system template

項目介紹

基於SpringBoot + Vue開發的後台管理系統模板

前言

像若依框架中的描述那樣，我也一直想開發一個屬於自己的後台管理系統模板，但是自己最初沒有接觸過前後端分離的系統，開發前端時被各種樣式和菜單動態渲染搞得痛不欲生，開發後端時被Spring Security虐的體無完膚，期間無數次想過用熟練一套優秀的開源框架，但是本著這樣一個浮躁的心態去學習，最終的結果就是再次被各種優秀的開源框架摁在地上摩擦......

痛定思痛，深刻意識到自己應該沉下心來去踏實的學習技術。終於在一段時間以後，我將之前的問題一一解決並且成功的看懂了一些優秀的開源框架，內心對自己開發一套後台管理系統模板的渴望愈發強烈，有想法就去做，最後我終於開發了屬於自己的一套後台管理系統模板。

開發完成後，深刻的意識到只是開發完成實現相應的基本功能是遠遠不夠的，系統在遇到高並發、多用戶訪問時的各種情況處理使我明白，萬裡長徵我現在只是跨出了第一步。後續我會持續進行優化迭代，您的star就是我的動力❤️

項目地址

Github網址： https://github.com/Architect-Java/system-template

Gitee網址： https://gitee.com/dream-flight/system--template

管理員帳號：admin 密碼：123456

測試帳號：test 密碼：1234567

目錄結構

前端專案位於system-vue目錄

後端專案位於system-springboot目錄

SQL檔案為根目錄的system-mysql8.sql文件，需要MySQL8及以上的版本

前端專案：

system-vue
├── public   
├── api                -- api请求接口目录
├── assets             -- 静态资源
├── components         -- 全局组件
├── constant           -- 全局常量
├── filter             -- 过滤器
├── icons              -- svg图标
├── layout             -- 布局目录
├── router             -- 路由
├── store              -- 全局缓存
├── styles             -- scss样式目录
├── utils              -- 工具目录
├── views              -- 页面视图
├── App.vue            -- App.vue
├── main.js            -- main.js
└── permission.js      -- 路由导航守卫  

後端項目

system-springboot
├── annotation         --  自定义注解
├── aspect             --  aop切面
├── config             --  配置模块
├── constant           --  静态常量模块
├── controller         --  控制器模块
├── dto                --  dto模块
├── entity             --  实体类模块
├── enums              --  枚举模块
├── filters    	       --  过滤器模块
├── generator	       --  逆向工程模块
├── handler            --  处理器模块（自定义JWT权限过滤器）
├── mapper             --  数据持久化模块
├── service            --  业务处理模块
├── util               --  工具类模块
└── vo        	       --  vo模块

專案運行：

拉取專案到本機後，在資料庫中直接執行system-mysql8.sql檔案即可，資料庫會自動建立好並匯入資料。接著需要修改項目配置類別中對應的參數資訊。接著在前端專案中執行npm install方法下載前端專案對應的依賴後專案即可成功啟動。

專案啟動成功後輸入管理員帳號：admin 密碼：123456進行登入即可進入系統

本機介面文件位址：http://localhost:8090/doc.html

程式碼產生器運作：使用Mybatis-Plus程式碼產生器時，需要先將/src/main/java/com/zrkizzy/template/generator目錄下的CodeGentrator檔案中資料庫連線參數以及資料庫使用者名稱密碼進行對應的修改後即可成功運行

注意：先啟動後端項目，再啟動前端項目，前端項目很多數據以及配置由後端動態加載

專案特點

• 前端樣式參考"若依框架"、"element-admin"、"風宇的個人部落格"、"楠橘星後台管理"進行設計
• 使用"element-ui"進行樣式渲染，重寫部分"element-ui"樣式源碼，側邊欄、麵包屑導航自動生成
• 採用RBAC模型，支援動態權限分配，前端選單與後台權限即時更新
• 專案前後端分離開發，適應當前潮流
• 頁面切換採用了NProgress進行過渡，增加專案美觀程度
• 使用Spring AOP自訂註解實現日誌管理
• 整合Mybatis-Plus程式碼產生器，簡化後續開發
• 前端程式碼層次簡單，沒有進行嚴重封裝，方便後端開發者閱讀與擴充開發
• 後端程式碼編寫遵循阿里巴巴開發規範，利於開發者學習
• 專案僅完成後台管理系統最基本功能，無任何業務侵入，利於二次開發

技術介紹：

前端： vue + vuex + vue-router + axios + element-ui + sass + vue-cropper + dayjs + nprogress
後端： SpringBoot + SpringSecurity + JWT + Swagger2 + MyBatisPlus + MySQL + Redis + Freemarker + FastJson + Kaptcha

開發環境

開發工具	功能作用
Idea	Java開發工具
Navicat	MySQL連線工具
VSCode	Vue開發工具
Medis	Redis連接工具

開發環境	版本
JDK	1.8
MySQL	8.0.13
Vue	2.6.11
Redis	6.0.5

專案截圖

專案總結

一直記得我第一個完整開發的Web計畫是大二為學校開發的評獎評優管理系統，還記得那時的Layui官網還沒有下線，jQuery仍然佔據著一片天。對於新手來說，後台管理系統模板還是比較容易上手的，在集成了Mybatis-Plus代碼生成器後開發難度進一步下降，適合初學者學習開發以及復現，個人認為難點更多在於前端樣式的手動實現與搭建。計畫中的不足之處也請大家見諒，有問題和好的建議也歡迎大家私聊我，也歡迎大家加入群聊當中，我們相互鼓勵、一起探討、共同進步，與大家共勉！

交流群