前後端分離是現在主流的架構設計模式，它初衷是用「單壹職責」原則把代碼質量提上去從而達到節省人力和減少溝通時的信息損失的目的。
本文推薦九個前後端分離的開源項目，都是采用最流行的技術棧。本文推薦的開源項目已經收錄到 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，支持數據字典與數據權限管理，支持壹鍵生成前後端代碼，支持動態路由。
體驗地址：；用戶名和密碼：admin
瀏覽器輸入 localhost:8000 後會自動跳轉到登錄頁
輸入用戶名和密碼 admin/admin後,跳轉到首頁
Cookie中JWT Token
監控服務 localhost:8001效果(如果啟動了monitor服務，用戶名和密碼為admin/admin)
移動端效果
09 美人魚
NiceFish（美人魚） 是壹個系列項目，目標是示範前後端分離的開發模式：前端瀏覽器、移動端、Electron 環境中的各種開發模式；後端有兩個版本：SpringBoot 版本和 SpringCloud 版本。
歷史 推薦的開源項目已經收錄到 GitHub 項目，歡迎 Star：