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

江邊飛鳥發表於2022-01-28

1、前言

分享一個基於ABP(.NET 5.0) + vue-element-admin專案。希望可以降低新手對於ABP框架的學習成本，感興趣的同學可以下載專案啟動執行一下。對於想選型採用ABP框架的，個人認為: ABP框架本身功能完善、設計封裝優雅、擴充套件性高、層次劃分簡直完美、DDD基礎設施完善，基本適用於大部分專案。唯一致命缺陷在於租戶、使用者主鍵採用了GUID型別，相容性太差。還有就是相對於JAVA框架來說，實踐開源專案、文件資料較少。不過很多專案可以忽略這個影響，極力推薦後端直接採用ABP作為框架。然後祝大家春節快樂。

2、Demo專案資訊

2.1、線上Demo預覽

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

2.2、原始碼網址

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

2.3、支援功能清單

[x] 多租戶管理(平臺)
- [x] 資料庫連線資訊: 管理租戶使用的資料庫叢集
- [x] 租戶管理: 支援選擇獨享、共享資料庫
[x] 系統管理(租戶)
- [x] 使用者管理
  - [x] 匯入
  - [x] 匯出
  - [x] 重置密碼
  - [x] 基於角色的使用者許可權分配
- [x] 部門管理
- [x] 角色管理
  - [x] 許可權分配
  - [x] 職務管理
- [x] 選單許可權管理
  - [x] 選單管理
  - [x] 按鈕許可權、特殊管理新增
  - [x] 關聯後端介面資源
  - [x] 重新整理後臺介面資源
- [x] 資料字典管理
[x] 其他要求
- [x] 多語言
- [x] 平臺、租戶資料首次初始化
- [x] 按鈕級別的許可權管控

3、如何快速開始

3.1、啟動mysql、redis基礎設施

如果系統已經安裝了Docker Desktop

在如下圖目錄右鍵up.ps1使用Powershell執行或者使用命令列輸入"powershell .\up.ps1"執行，即在本機執行了mysql、redis，同時自動建立資料庫: "x_free_dev_center_1"。

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

已經有Mysql服務、Redis服務

修改appsettings.json下的配置，確保和環境一致。建立"x_free_dev_center_1"資料庫，不然無法啟動，資料庫名稱可以自定義。

"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、啟動後臺服務

編譯解決方案、將XFreeSimpleService.Host設為啟動專案

啟動XFree.Simple.Web

開啟swagger地址

網址: http://localhost:41130/swagger/index.html。

出現如下介面則說明後臺已經正常啟動。

連線資料庫，可以看到已經自動初始化資料庫表。

3.3、啟動前端專案

使用Visual Code開啟專案目錄vue-element-admin

前端基於vue-element-admin方案實現，具體可以參見README.vue-element-admin.md。開啟後效果:

安裝依賴、啟動專案

# 安裝依賴
npm install

# 建議不要直接使用 cnpm 安裝依賴，會有各種詭異的 bug。可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org

# 啟動服務
npm run dev