java前後端分離框架

① 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的介面註解上即可。

② 推薦 9 個 yyds 前後端分離項目

前後端分離是現在主流的架構設計模式，它初衷是用「單一職責」原則把代碼質量提上去從而達到節省人力和減少溝通時的信息損失的目的。

本文推薦九個前後端分離的開源項目，都是採用最流行的技術棧。本文推薦的開源項目已經收錄到 Awesome GitHub Repo。

Awesome GitHub Repo 是逛逛 GitHub 創建的開源項目，會收集整理 GitHub 上高質量、有趣的開源項目，並將他們進行歸類。

該開源項目集不是簡單的按照編程語言來分類，而是按照更有趣的分類方式，比如：有趣項目、沙雕項目、實戰項目、學習項目、實用工具等等。

本期推薦的開源項目是：

1. 前後端分離博客系統

2. 前後端分離考試系統

3. 基於 TypeScript 的聊天室項目

4. 人力資源管理開源項目

5. 一個可以用來練手的前後端分離項目

6. 學之思開源考試系統

7. 前後端分離的後台管理系統

8. 前後端管理平台一站式腳手架

9. 一個系列項目：NiceFish（美人魚）

01 前後端分離博客系統

這是一款基於 Spring Boot = Vue 的前後端分離的博客系統，後端採用技術棧：Spring Boot、Spring Security、jjwt、MyBatis、PageHelper、Redis、commonmark-java、ip2region、quartz、yauaa。

前端核心框架：Vue2.x、Vue Router、Vuex；Vue 項目基於 @vue/cli4.x 構建。JS 依賴及參考的 CSS：axios、moment、nprogress、v-viewer、prismjs、APlayer、MetingJS、lodash、mavonEditor、echarts、tocbot、iCSS

02 前後端分離考試系統

該項目是一個前後端分離的在線考試系統。後端使用 Spring Boot，前端使用 VUE 和 Element-UI 組件庫配合完成開發。

03 基於扒弊 TypeScript 的聊天室項目

該項目是一個聊天室，採用全 TypeScript 開發，目前聊天室已經具備完整的聊天功能，有興趣的朋友可以自行 fork 去開發。

技術選型：Typescript、Vue2.6.x、Socket/io、Vuex、Nestjs、Typeorm、ES6+、SASS(SCSS)。

04 人力資源管理系統

微人事是一個前後端分離的人力資源管理系統，散猜項目採用 Spring Boot + Vue 開發。首先，不同的用戶在登錄成功之後，根據不同的角色，會看到不同的系統菜單，完整菜單如下：

每個用戶的角色是由系統管理員進行分配的，系統管理員給用戶分配角色的頁面如下：

系統管理員也可以管理不同角色可以操作的資源，頁面如下：

後端技術棧：Spring Boot、Spring Security、MyBatis、Mysql、Redis、RabbitMQ、Spring Cache、WebSocket

前端技術棧：Vue、ElementUI、axios、vue-router、Vuex、WebSocket、vue-cli4

05 前後端分離練手項目

一個基於 Spring Boot + Vue 開發的前後端分離博客項目，帶有超級詳細開發文檔和講解視頻。還未接觸過 Vue 開發或者前後端分離的同學可以學起來。

06 開源考試系沖此型統

學之思開源考試系統是一款 Java + Vue 的前後端分離的考試系統。主要優點是開發、部署簡單快捷、界面設計友好、代碼結構清晰。

支持 Web 端和微信小程序，能覆蓋到 PC 機和手機等設備。支持多種部署方式：集成部署、前後端分離部署、Docker 部署。

07 後台管理系統

一個基於 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue 的前後端分離的後台管理系統。

項目採用分模塊開發方式， 許可權控制採用 RBAC，支持數據字典與數據許可權管理，支持一鍵生成前後端代碼，支持動態路由。

體驗地址：https://el-admin.xin

賬號密碼：admin / 123456

08 前後端管理平台一站式腳手架

本項目基於Spring Cloud 和Ant Design Pro實現前後端管理平台一站式腳手架，便於快速開發企業級應用。我們的願景是 基於Copy&Paste技術，實現面向Google&Bai編程，讓碼農搬磚不累，做更好的良民。

預覽地址：https://admin.awesome-coder.com；用戶名和密碼：admin

瀏覽器輸入 localhost:8000 後會自動跳轉到登錄頁

輸入用戶名和密碼 admin/admin後,跳轉到首頁

Cookie中JWT Token

監控服務 localhost:8001效果(如果啟動了monitor服務，用戶名和密碼為admin/admin)

移動端效果

09 美人魚

NiceFish（美人魚） 是一個系列項目，目標是示範前後端分離的開發模式：前端瀏覽器、移動端、Electron 環境中的各種開發模式；後端有兩個版本：SpringBoot 版本和 SpringCloud 版本。

歷史 推薦的開源項目已經收錄到 GitHub 項目，歡迎 Star：

③ 如何在開發時部署和運行前後端分離的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中運行即可。

④ Web項目開發為何要走前後端分離模式

把前端與後端獨立起來去開發，放在兩個不同的伺服器，需要獨立部署，兩個不同的工程，兩個不同的代碼庫，不同的開發人員，前後端工程師需要約定交互介面，實現同步開發，開發結束後需要進行獨立部署，前端通過介面來調用調用後端的API，前端只需要關注頁面的樣式與動態數據的解析和渲染，而後端專注於具體業務邏輯。具體好處有以下幾點：

1.徹底解放前端

前端不再需要向後台提供模板或是後台在前端html中嵌入後台代

2.提高工作效率，分工更加明確

前後端分離的工作流程可以使前端只關注前端的事，後台只關心後台的活，兩者開發可以同時進行，在後台還沒有時間提供介面的時候，前端可以先將數據寫死或者調用本地的json文件即可，頁面的增加和路由的修改也不必再去麻煩後台，開發更加靈活。

3.局部性能提升

通過前端路由的配置，我們可以實現頁面的按需載入，無需一開始載入首頁便載入網站的所有的資源，伺服器也不再需要解析前端頁面，在頁面交互及用戶體驗上有所提升。

4.降低維護成本

通過目前主流的前端MVC框架，我們可以非常快速的定位及發現問題的所在，客戶端的問題不再需要後台人員參與及調試，代碼重構及可維護性增強。

5.實現高內聚低耦合，減少後端（應用）伺服器的並發/負載壓力。

6.即使後端服務暫時超時或者宕機了，前端頁面也會正常訪問，但無法提供數據。

7.可以使後台能更好的追求高並發，高可用，高性能；使前端能更好的追求頁面表現、速度流暢、兼容性、用戶體驗等。

我理解的前後端分離，前端是需要起伺服器的，減少學習成本，可以用node，前端也要有域名的

如果是半分離， 那麼前端提供js文件（css等）這個我也做過，前後端都用node就不說了，如果是兩種語言，

如果一個工程文件下開發，webpack下直接打包進後台語言的靜態目錄下。

如果是兩個工程，那麼前端只提供生成的js（css）文件，git pull後台項目，扔進靜態目錄，這樣又涉及到版本控制的問題，一般我會生成一個配置文件，直接讀取的，內容是xxx.hash.js這種文件名，然後document.wirte動態寫入js/css

前端起伺服器就不需要動態引入了，直接html插件生成文件，更好的控製版本

半分離 還有一個問題，例如首頁同構，如果更改xxx.blade.php文件，這就又動了php文件，甚至包括nginx反向代理啊，ssl這種緩存啊，都比較麻煩，你要是改了點啥，自己的ok了，後台的崩了，那就挺操蛋了，大公司有專門的運維還好，小公司真的是一團糟

後台我們採取全分離，nginx前端管理，至於升級nginx版本，http2，反向代理，https證書，都是前端自己弄，畢竟小公司，每個人水平都不一致，自己負責自己的比較好

但是這個跨域又要稍微處理一下，至今我這邊後台還是*，我也沒法說什麼

阿里雲這么便宜，如果把成本浪費在人力上，會變得很貴

一個人的精力有限，前後端分離有助於我們更專注我們所要注重的技術點，俗話說：「術業有專攻」。

比如我們後端，前後端分離有助於我們把注意力放在java基礎，設計模式，jvm原理，spring+springmvc原理及源碼，linux，mysql事務隔離與鎖機制，mongodb，http/tcp，多線程，分布式架構（bbo，bbox，spring cloud），彈性計算架構，微服務架構（springboot+zookeeper+docker+jenkins），java性能優化，以及相關的項目管理等等。

而前端也可以集中精力在前端的展示上。

總的來說，前後端分離利大於弊。這也是越來越少用jsp的原因。

補充兩點

1.每次請求的數據量變小，也意味著更少的響應時間。

2.也不是每個應用用前後端分離都是最合適的，要根據應用規模，工期綜合判斷。