基於Spring boot+Mybatis+Angular8+Maven+MySQL的基礎開發平臺

前言:

在大多數管理系統以及產品中,我們需要基礎平臺,在這平臺之上,我們將業務添加,就形成了具體的業務系統,開發這樣一個平臺需要一定的時間與成本,本人基於多年的工作經驗開發了一套基於Angular+NG-Zorro+Spring boot+MySQL+Maven基礎平臺,適合各種公司、接單以及個人學習,它具有跨平臺、前端後分離、數據權限、按鈕權限、訪問權限、用戶權限等功能特點,具體技術、功能等後續章節介紹。

 

相關說明:

1.前端:angular8.2.4+ng-zorro-antd8.5.1+less+各種組件

2.後端:spring boot+mybatis3.1.1 + maven模塊化

3.數據庫:mysql8.0以上(需要低版本的可修改配置)

4.管理工具:maven3.9

5.分佈式多數據源,支持同時操作多個不同數據源

6.註解事務管理,支持分佈式事務管理

7.前後端分離,實現跨域請求,權限攔截,權限細化到按鈕、請求與菜單

8.實現請求\響應雙向數據加密

9.可在系統中自由的配置菜單、按鈕、訪問的權限,保證了操作的安全性,同時也避免了一些專業人員的強行代碼操作

10.支持皮膚更換,目前系統自帶三套皮膚(一套上下佈局,一套左右佈局,一套上左右佈局可查看下面的“系統部分頁面展示”部分),可根據自己的喜好配置less,定製成不同風格的佈局與皮膚,配置簡單,靈活。

11.主要功能:用戶、部門、角色、菜單、按鈕、訪問地址、數據權限、數據字典、系統公告、系統監控、我的待辦、我的公告、登錄日誌、系統日誌,密碼修改,頭像上傳,系統信息,等等

12.按鈕添加了表達式功能,表達式作用:通過簡單的表達式控制按鈕運行期的顯示,例如:資源庫中有一個收藏功能,當它未被收藏時應該顯示的是“收藏”,當它被收藏過顯示的是“取消收藏”,這時可配置“收藏”與“取消收藏”兩個按鈕,通過表達式控制它們的顯示,其中“收藏”表達式配置爲“data.status==='1'”,表示當數據的狀態爲1時顯示;其中“取消收藏”表達式配置爲“data.status==='2'”,表示當數據狀態爲2時顯示;這樣兩個按鈕就會根據數據在運行期時顯示了。

13.添加了數據權限功能,每個用戶查詢到的數據由權限數據權限處理器決定,另如:當前用戶爲某一功能配置部門數據權限,那麼在某個功能上,他能查詢的只有他擁有的部門的數據。

14.不支持古老的瀏覽器,僅支持現在瀏覽器

15.ehcache內置緩存

16.前後端實用的數據字典

 

功能:

皮膚:

通過自定義less配置不同風格,配置方式簡單,目前平臺內置三套不同風格的皮膚,分別如下:

配置方式:

項目assets/platform/less/theme/下新建一個目錄,目錄中新建app-theme.less與nz-zorro-overwrite.less文件,分別是平臺主題與zorro主題文件。

配置時只需要根據自己的需要修改less變量值即可。

使用主題,只需要修改如下兩個文件的主題引用即可。

首頁

首頁目前添加了下如內容,業務系統可根據自己需要去除或添加內容,只需要修改如圖所示的內容即可。

我的待辦

我的所以待辦列表,點擊查看可跳轉到具體的待辦內容。

我的公告

系統公告內容

用戶管理

包含用戶添加、編輯、刪除、重置密碼、修改密碼、角色分配、部門分配等功能。

部門管理

角色管理

可分配菜單、按鈕、訪問地址、數據權限

菜單管理

可配置無限級菜單

按鈕管理

所有的系統按鈕不需要在頁面中直接代碼編寫,而是通過按鈕管理功能添加,按鈕可控性強,按鈕添加了表達式功能,表達式作用:通過簡單的表達式控制按鈕運行期的顯示,例如:資源庫中有一個收藏功能,當它未被收藏時應該顯示的是“收藏”,當它被收藏過顯示的是“取消收藏”,這時可配置“收藏”與“取消收藏”兩個按鈕,通過表達式控制它們的顯示,其中“收藏”表達式配置爲“data.status==='1'”,表示當數據的狀態爲1時顯示;其中“取消收藏”表達式配置爲“data.status==='2'”,表示當數據狀態爲2時顯示;這樣兩個按鈕就會根據數據在運行期時顯示了。

訪問地址管理

通過訪問地址對權限進行細化管理,防止惡意訪問

數據權限管理

通過數據權限功能可實現不同訪問者的數據展示,例如部門領導與普通員工,部門領導可查看整個部門數據,而普通員工只能看自己的數據,系統內置了部門與員工相關的數據權限實現,業務系統如需要添加業務相關的權限,可通過實現後端實現DataPermissionsProcessorInterface接口進行擴展。

數據字典

分爲系統字典和業務字典兩類,字典可使用單例、列表、樹型結構的配置,前端後端有相應的獲取方式,可直接使用。

公告管理

系統信息

登錄日誌

系統日誌

演示

數據權限使用示例

技術:

前端技術:

1.基礎:angular8.2.4

2.UI框架:ng-zorro-antd8.5.1

3.樣式:less

4.第三方依賴與組件:echarts、進度條、animate.css、lodash、cookie、圖片裁剪、滾動條、二維碼、圖片查看

 

5.自定義組件:

5.1 水印

5.2 天氣

5.3功能標題

5.4相應式視圖(行列組件)

5.5 用戶資料

5.6 修改密碼

5.7 無限級菜單樹

5.8 待辦

5.9 結構圖(層次圖)

5.10本地、session存儲服務

5.11spinning

5.12全局模態框服務,全局只會彈出一次,避免多個框重疊

5.13滾動條指令封裝

5.14二維碼

5.15平臺存儲服務

5.16平臺根組件,對平臺所需要的標題、進度條等功能的統一實現

5.17HttpInterceptor攔截器實現跨域、加解密以及權限攔截

5.18平臺鑑權,對登錄管理

5.19頁面工具條,對標題、按鈕進行管理,這裏的按鈕是動態的

5.20公告

5.21佈局實現

5.22公共圖片上傳模態框

5.23圖片預覽指令

5.24翻牌器

5.25異常,例如404、500

5.26錯誤的URL資源,例如圖片找不到,通過這個組件顯示默認圖片

5.27常用驗證器

5.28字符串與模板插座,當頁面 中有一塊內容需要提供默認顯示又要提供自定義模塊的混合使用

5.29數據字典管道、表達式管道

5.30空數據

5.31業務按鈕,也就是動態按鈕,提供了各種視圖的按鈕,按鈕是通過後端獲取,每一個按鈕都不需要在頁面上寫好,都是通過按鈕管理功能配置

5.32訪問地址選擇框

 

後端技術

1.Spring、Spring boot

2.Mybatis

3.分佈式事務

4.Ehcache緩存

5.Maven 管理

6.Mybatis的分頁、數據權限插件

7.各種實用的工具類

8.MySQL8.1數據庫

 

部署

由於項目是前後端分離,後端需要使用maven打成war包或jar運行,前端通過npm run build命令打包,打後的文件可放到tomcat中運行。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章