前後端分離如何配置asml

『壹』 springboot 前後端分離跨域方案 ProxyServlet配置

針對前後端分離場景下的一種跨域方案，如果不使用如nginx或者springboot的zuul網關等方案，可以採用 httpproxy 方案。

配置說明：
servlet_url : 對外可以訪問的匹配路徑，如前端js 在web服務訪問後端服務的一個介面，可以不加域名或者ip port;
target_url : 指向後端服務的根服務地址。

更多，請關註：
springboot 技術實踐總結

『貳』 怎樣通過nginx配置實現前後端分離

兩種方式，一個是前端一個nginx，後端幾個webserver，後端設置防火牆，防火牆允許nginx進入。
另一個方式就是nginx設置好讀寫分離

『叄』 springboot國際化（前後端分離情況）

spring.messages.basename=messages/messages

其中if else部分可以省略，看前端傳的情況，前端如果傳送header中的Accept-Language是en，zh，ja這樣的簡寫，就需要補全，如果前端傳過來的就是en-US，zh-CN,這樣的就不需要if，else轉換。

當然也可以不用messageSource用ResourceBundle ：

messages.properties中的是默認的，如果語言取不到就取默認的。

messages_zh_CN.properties是中文的配置：

messages_en_US.properties是英文配置：

比如切換語言的多選框：

具體方法：

則jquery調用可以是這樣：

其中 headers:{ 'Accept-Language':localStorage.getItem('lang')||'en' }, 這個就是根據你切換的語言，傳給服務端對應的語言，這樣就做到前後端同步。

『肆』 Sa-Token v1.20.0許可權系統Springboot前後端分離使用

Sa-Token是一個輕量級java許可權認證框架，主要解決：登錄認證、許可權認證、Session會話、單點登錄、OAuth2.0 等一系列許可權相關問題

框架針對踢人下線、自動續簽、前後台分離、分布式會話……等常見業務進行N多適配，通過Sa-Token，你可以以一種極簡的方式實現系統的許可權認證部分。

以往大家會選擇使用shiro或spring security都需要繁瑣的配置定義攔截，前後端分離時還要搭配shiro，OAuth2.0 跨域等等問題。

sa-token在於方便、簡單、拆箱即用，少量配置實現登錄、許可權攔截。

下面演示在springboot中使用sa-token：

1. 首先需要引入jar：maven項目在pom當中寫入即可，此外關於許可權系統都需要5張表：

 user表、role表、permission表 userRole表，rolePermission表(不在贅述)

2. 配置攔截器 （主要用於攔截未登錄用戶，排除login、index等介面）

3.對於前端的跨域解決，因為復雜post請求會有預請求，所以作如下配置:

5.眾所周知，許可權攔截是根據角色code或許可權code進行攔截，sa-token將此介面暴漏，在此處存儲List<String>,當攔截時可根據code是否擁有校驗即可，所以此處查詢code碼存儲到集合。

6.至此，許可權配置基本完結，另外sa-token提供了兩種方式攔截，一種是路由攔截，一種是介面註解攔截，

路由攔截:

此處方法可以寫到攔截器配置 2 的SaServletFilter 里，例如：

註解攔截：

加在controller的介面註解上即可。

『伍』 (Docker Nginx) Spring boot+Vue 前後端分離部署 詳細完整版

簡述：Spring boot+Vue 前後端分離項目部署，主要採用docker容器部署方式。

Springboot項目部署：docker構建mysql環境+docker構建項目自身環境。

Vue項目：使用docker啟動nginx伺服器方式代理部署。

項目使用mysql8.0作為數據源，所以部署時需要使用docker構建mysql環境及項目自身環境。

連接出現1251錯誤時：

首先將項目進行打包：mumu-0.0.1-SNAPSHOT.jar

到此，springboot項目採用docker方式運行部署結束。

使用docker容器方式運行nginx伺服器。

對於nginx伺服器，重要的兩個操作是：

所以我們在配置啟動nginx容器的時候，需要將對應的目錄及文件進行宿主機掛載，方便後續更新資源及操作

啟動命令：

『陸』 前後端分離的前端是怎麼部署到生產環境中的，直接通過 nginx 嗎

front-end-separate(前後端分離腳手架)

front-end-separate
一個前後端分離的腳手架工具（自主研發）
為什麼選擇grunt而不是gulp
如果你也和我一樣喜歡grunt這種配置的方式，那麼我相信這個腳手架覺對十分適合你
所有靜態資源都md5全並壓縮打包,css,js,img,html
已在生產環境驗證
基於express和grunt的前後端分離框架
模板引擎使用的是nunjucks，好處是可以實現模版繼承，又不像jade一樣把html標簽都簡化了
express提供路由服務
項目中app為原代碼文件（開發用），dist為打包後的文件（用於線上）
開發使用app，線上使用dist，支持一鍵cdn部署，加速你的項目
項目啟動時，修改任何express代碼，可以實現自動重啟–基於nodemon
支持sass圖片精靈（自動打包精靈圖片，再也不用手動去拼湊了）
基於grunt md5 打包合並
線上輸出的html已經壓縮成一行（讓你的代碼更有Geeker范）

『柒』 如何在開發時部署和運行前後端分離的JavaWe

在開發中大型的JavaEE項目時，前後端分離的框架逐漸成為業界的主流，傳統的單機部署前後端在同一個項目中的工程項目越來越少。這類JavaWeb項目的後端通常都採用微服務的架構，後端會被分解為諸多個小項目，然後使用bbo+zookeeper或者springCloud來構建微服務，前端則會是一個單獨的項目，前台的請求通過微服務來調用。但是，不同與傳統的web項目，這類前後端分離的項目如何在開發中部署和運行呢？

當前後端分離時，後端項目一定會被載入到tomcat的webapp目錄下面，但是前端的資源院該如何被訪問到呢？這里以tomcat這個中間件為例，探討在開發這類項目的時候，如何讓前後端分離的項目部署並且運行起來，即後端項目部署在tomcat之後如何在運行時訪問靜態資源（非上線部署）。

主要有兩種方案：1.在本地通過Nginx來處理這些靜態資源。2、將靜態資源統一放入一個javaweb應用中，並將自動生成的war包隨後端項目一期丟入tomcat。下面詳細介紹

一、使用Nginx來訪問靜態資源。

在本地安裝nginx並且修改nginx.conf，修改相關配置，將web訪問的埠的資源進行更改，配置如下：

server { listen 80; server_name localhost; charset utf-8; #access_log logs/host.access.log main;
location / { proxy_pass http://tomcat_pool; proxy_redirect off;
proxy_set_header HOST $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m;
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout 90;
proxy_read_timeout 90;
proxy_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
}
location ~ .*.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|woff|woff2|ttf|eot|map)$ {
root D:Workspacesesop-html; index index.html;
}

listen對象改為你本地的tomcat訪問埠，最下面location中的root改為你前端項目中靜態資源的位置，這樣就可以實現只部署後端的項目就能訪問前端的頁面了。

二、將前端項目轉換為動態的web項目，隨後端項目一起丟入tomcat

這個方案省去了在本地安裝和配置nginx，但是也只適用於開發階段項目的部署運行和調試，真正在生產環境通常前後端項目會部署在不同的伺服器。

• 如果是Intellij Idea,在導入前端項目之後，右鍵項目 add framework support --> web application，這時將會把前端項目轉換為一個javaweb項目，然後將靜態資源放在生成的web目錄下即可。

• 如果是eclipse，可以新建一個javaweb項目然後將靜態資源放入web或者webcontent目錄下，或者直接先導入前端項目，然後通過 project facts 將項目轉換為dynamic web項目並勾選 js等相關配置。

然後，運行項目時把後端的war包和前端的war包一同添加到 deployment中運行即可。

『捌』 解決前後端分離開發，後端重定向不到前端頁面問題

公司項目使用的是springboot+angularjs這種前後端不完全分離的開發方式，前段時間把項目改成springboot+vue前後端完全分離，開發過程中有個後端重定向問題。後端項目地址： http://localhost:8080/ ，前端項目地址： http://localhost:9090/ ，比如後端 redirct:"/#/main" 重定向到這個頁面，瀏覽器重定向的卻是 http://localhost:8080/#/main 後端項目的地址，找了很久最終在webpack中找到解決方案。

我們可以在 devServer.proxy.onProxyRes 中做處理，配置如下:

『玖』 前後端如何做到分離開發，最後再整合部署

由於後端提供的介面方式可能多種多樣，同時開發人員在編寫Node端代碼訪問這些介面的方式也有可能多種多樣。如果我們在介面訪問方式及使用上不做統一架構處理，則會帶來以下一些問題：
1. 每一個開發人員使用各自的代碼風格編寫介面訪問代碼，造成工程目錄及編碼風格混亂，維護相對困難。
2. 每一個開發人員編寫自己的mock數據方式，開發完畢之後，需要手工修改代碼移除mock。
3. 每一個開發人員為了實現介面的不同環境切換(日常，預發，線上)，可能各自維護了一些配置文件。
4. 數據介面調用方式無法被各個業務model非常方便地復用。
5. 對於數據介面的描述約定散落在代碼的各個角落，有可能跟後端人員約定的介面文檔不一致。
6. 整個項目分離開發之後，對於介面的聯調或者測試回歸成本依然很高，需要涉及到每一個介面提供者和使用者。

『拾』 nodejs-koa2（mvc模式）前後端分離 前端設計

前後端分離，前端nodejs運行環境，使用koa2集成負責資源分配與用戶交互，實現token驗證用戶身份，路由控制。等！

自行 網路 解決；

"program": "${workspaceFolder}app.js"

此處就是是將app.js作為啟動文件。${workspaceFolder}代表根目錄，vsc啟動時會在根目錄下找到並載入app.js文件。

參數介紹： name 項目名稱、 version 版本號、 description 項目描述、 main 項目啟動文件、 scripts 啟動快捷設置， author 作者， dependencies 第3方中間件名稱及版本。

最重要的
「 dependencies 」這里添加一些要用到的包，以上是這次要用到的所有的包，版本自己更改。
「 scripts 」這里是一些nodejs的便捷命令，上線的時候會用到，直接在終端中，package.json同級目錄 ，執行『npm start』 即 可啟動app.js。
別的沒啥太大作用瞎寫即可。

啟動相關配置，封裝到config/init.js中，啟動文件直接引用即可

3-6-1、init.js項目核心。

異常友好處理方法封裝

路由配置

視圖渲染

核心集成

3-6-2、config.js項目參數配置。為什麼不用json文件 因為json不能加註釋

3-6-3、token.js項目token相關方法封裝。

執行後項目結構會增加兩個文件

新增

src/hello.js。

views/index.html

瀏覽器訪問： http://127.0.0.1:3000/koa/login

輸入值獲取token

獲取的token如圖：

先不用帶token進行訪問: http://127.0.0.1:3000/koa/ hello/jiaobaba,被token攔截，返回401

帶上token訪問： http://127.0.0.1:3000/koa/ hello/jiaobaba

測試頁面渲染，及跳轉html頁面，直接訪問 http://127.0.0.1:3000/koa /views

結束！！！！！！

需要源碼聯系我