分享一個基于 ABP(.NET 5.0) + vue-element-admin 管理后臺

1、前言

分享一個基于ABP(.NET 5.0) + vue-element-admin項目。希望可以降低新手對于ABP框架的學(xué)習(xí)成本，感興趣的同學(xué)可以下載項目啟動運(yùn)行一下。對于想選型采用ABP框架的，個人認(rèn)為: ABP框架本身功能完善、設(shè)計封裝優(yōu)雅、擴(kuò)展性高、層次劃分簡直完美、DDD基礎(chǔ)設(shè)施完善，基本適用于大部分項目。唯一致命缺陷在于租戶、用戶主鍵采用了GUID類型，兼容性太差。還有就是相對于JAVA框架來說，實踐開源項目、文檔資料較少。不過很多項目可以忽略這個影響，極力推薦后端直接采用ABP作為框架。然后祝大家春節(jié)快樂。

2、Demo項目信息

2.1、在線Demo預(yù)覽

(國內(nèi))?https://xfree.top/simple-admin
(國外)?https://zhoufeihong.github.io/XFreeSimpleWeb/

2.2、源碼網(wǎng)址

https://gitee.com/RiverBied/XFreeSimple.git
https://github.com/zhoufeihong/XFreeSimple.git

2.3、支持功能清單

• [x]?多租戶管理(平臺)

• [x]?數(shù)據(jù)庫連接信息:?管理租戶使用的數(shù)據(jù)庫集群

• [x]?租戶管理:?支持選擇獨(dú)享、共享數(shù)據(jù)庫

• [x]?系統(tǒng)管理(租戶)

• [x] 菜單管理

• [x] 按鈕權(quán)限、特殊管理添加

• [x] 關(guān)聯(lián)后端接口資源

• [x] 刷新后臺接口資源

• [x] 權(quán)限分配

• [x] 職務(wù)管理

• [x] 導(dǎo)入

• [x] 導(dǎo)出

• [x] 重置密碼

• [x] 基于角色的用戶權(quán)限分配

• [x] 用戶管理

• [x] 部門管理

• [x] 角色管理

• [x] 菜單權(quán)限管理

• [x] 數(shù)據(jù)字典管理

• [x]?其他要求

• [x] 多語言

• [x] 平臺、租戶數(shù)據(jù)首次初始化

• [x] 按鈕級別的權(quán)限管控

3、如何快速開始

3.1、啟動mysql、redis基礎(chǔ)設(shè)施

如果系統(tǒng)已經(jīng)安裝了Docker Desktop

在如下圖目錄右鍵up.ps1使用Powershell運(yùn)行或者使用命令行輸入"powershell .\up.ps1"運(yùn)行，即在本機(jī)運(yùn)行了mysql、redis，同時自動創(chuàng)建數(shù)據(jù)庫: "x_free_dev_center_1"。

Docker Desktop安裝可以參考:?https://docs.docker.com/desktop/windows/install/

已經(jīng)有Mysql服務(wù)、Redis服務(wù)

修改appsettings.json下的配置，確保和環(huán)境一致。創(chuàng)建"x_free_dev_center_1"數(shù)據(jù)庫，不然無法啟動，數(shù)據(jù)庫名稱可以自定義。

"ConnectionStrings": {

"ApplicationConnection": "Server=127.0.0.1;port=3306;Database=x_free_dev_center_1;User=root; Password=root"

},

"Redis": {

"IsEnabled": true,

"Configuration": "127.0.0.1:6379,password=123"

}

3.2、啟動后臺服務(wù)

編譯解決方案、將XFreeSimpleService.Host設(shè)為啟動項目

啟動XFree.Simple.Web

打開swagger地址

網(wǎng)址: http://localhost:41130/swagger/index.html。

出現(xiàn)如下界面則說明后臺已經(jīng)正常啟動。

連接數(shù)據(jù)庫，可以看到已經(jīng)自動初始化數(shù)據(jù)庫表。

3.3、啟動前端項目

使用Visual Code打開項目目錄vue-element-admin

前端基于vue-element-admin方案實現(xiàn)，具體可以參見README.vue-element-admin.md。打開后效果:

安裝依賴、啟動項目

# 安裝依賴

npm install



# 建議不要直接使用 cnpm 安裝依賴，會有各種詭異的 bug?？梢酝ㄟ^如下操作解決 npm 下載速度慢的問題

npm install --registry=https://registry.npm.taobao.org



# 啟動服務(wù)

npm run dev

4、功能體驗

4.1、平臺管理員登錄

打開網(wǎng)址:?http://localhost:9527/

選擇管理后臺、輸入用戶名: admin、輸入密碼123456，進(jìn)行登錄。

4.2、新建數(shù)據(jù)庫連接信息

供租戶使用。支持租戶獨(dú)享、共享數(shù)據(jù)庫。

4.3、添加租戶

4.4、租戶登錄

登錄界面，初始密碼:123456

租戶管理界面

獨(dú)立之精神，自由之思想