前言 今天給大家推薦一個超實用的開源項目《.NET 7 + Vue 許可權管理系統 小白快速上手》,DncZeus的願景就是做一個.NET 領域小白也能上手的簡易、通用的後臺許可權管理模板系統基礎框架。 不管你是技術小白還是技術大佬或者是不懂前端Vue 的新手,這個項目可以快速上手讓我們從0到1,搭建自 ...
前言
今天給大家推薦一個超實用的開源項目《.NET 7 + Vue 許可權管理系統 小白快速上手》,DncZeus的願景就是做一個.NET 領域小白也能上手的簡易、通用的後臺許可權管理模板系統基礎框架。
不管你是技術小白還是技術大佬或者是不懂前端Vue 的新手,這個項目可以快速上手讓我們從0到1,搭建自己的通用後臺許可權管理系統,掌握後臺許可權管理系統的搭建技巧以及系統基礎框架。
它不僅涵蓋了從環境搭建到核心功能實現的全過程,而且特別註重讓初學者也能輕鬆上手。 無論你是希望通過實戰來加深對新技術的理解,還是想要為自己的項目升級許可權管理功能,讓這個項目成為大家的好幫手。期待我們都能夠從小白變大佬!
項目介紹
DncZeus 是一個基於 .NET 7 和 Vue.js 的前後端分離的通用後臺管理系統框架。
後端使用 .NET 7 和 Entity Framework Core 構建,前端則採用了流行的 iView UI 框架配合 Vue.js。
該項目實現了前後端的動態許可權管理和控制以及基於 JWT 的用戶令牌認證機制,從而確保前後端交互流暢。
請註意:DncZeus 不是一個完整的業務系統,但它提供了大多數業務系統所需的開發場景,幫助 .NET 開發者快速構建出交互良好、體驗優秀且功能豐富的單頁應用程式 (SPA)。
項目特點
- 技術棧:後端使用 .NET 7 + EF Core 構建,前端採用基於 Vue.js 的 iView (iview-admin) 進行前後端分離開發。
- 新手友好:設計考慮新手上手簡易,代碼邏輯清晰。
- 許可權管理:實現通用後臺許可權管理,精確到頁面訪問和操作按鈕的控制。
項目技術
- .NET 7
- ASP.NET Core WebAPI
- JWT 令牌認證
- AutoMapper
- Entity Framework Core 7
- .NET 7 依賴註入
- Swagger UI
- Vue.js (ES6 語法)
- iView (基於 Vue.js 的 UI 框架)
環境工具
1、Node.js (同時安裝 npm 前端包管理工具)
2、Visual Studio 2022
3、VS Code 或者其他前端開發工具
4、git 管理工具
5、MySQL、PostgreSQL 或 SQL Server (SQL Server 2012+)
適合人群
瞭解 DncZeus 所需的知識,DncZeus
讓初級 .NET 開發者也能輕鬆上手,因此後端項目並未涉及複雜的架構和封裝,代碼邏輯直觀易懂。
為了更好地熟悉和運用 DncZeus
,你需要瞭解以下技術:
- .NET 7:確保你能看懂並理解後端的實現和工作方式。
- Vue.js:前端實現的基礎。
- iView:基於 Vue.js 的 UI 框架,
DncZeus
的前端 UI 交互正是基於此框架實現。
如果你對這些技術還不熟悉,建議先學習一些基礎知識再使用 DncZeus
。
以下是學習這些技術的官方資源:
下載項目
1、Git工具下載
首先請確保本地開發環境已安裝了Git管理工具,然後在需要存放本項目的目錄
打開Git 命令行工具Git Bash Here,在命令行中輸入如下命令:
git clone https://github.com/lampo1024/DncZeus.git
以上命令就把 DncZeus
的源代碼拉取到你的本地開發機上。
2、手動下載
如果你不願意使用Git管理工具下載 DncZeus
的源代碼,也可以在 Github
手動下載。
打開地址 https://github.com/lampo1024/DncZeus
,找到頁面中"Code" 的按鈕點擊,然後在彈出的對話框中點擊"Download ZIP" 按鈕,即可下載 DncZeus
的源代碼,具體如下圖所示:
安裝依賴
1、前端項目
安裝前端依賴
1、使用 Git 管理工具,無需退出當前工具,進入DncZeus
的前端項目目錄:
cd DncZeus/DncZeus.App
2、如果你是手動下載的源代碼,請在該目錄下打開命令行工具。
3、在命令行中輸入以下命令來安裝前端依賴包:
npm install
或者使用簡寫命令:
npm i
2、後端項目
配置資料庫連接
1、在 Visual Studio 中打開解決方案 DncZeus.sln
。
2、根據你的開發環境(預設示例為 SQL Server Localdb),修改配置文件 appsettings.json
中的資料庫連接字元串。
示例預設連接字元串為:
"ConnectionStrings": { "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=DncZeus;Trusted_Connection=True;MultipleActiveResultSets=true" }
初始化系統數據
1、打開項目根目錄中的 Scripts
文件夾。
2、執行與你的資料庫類型對應的腳本文件以初始化系統數據。
從 v2.1.0 版本開始,DncZeus 支持 MySQL、PostgreSQL 和 MSSQL 三種資料庫類型!
你可以根據需求選擇適合自己的資料庫。
至此,所有的準備工作已經完成。
現在,你可以開始體驗 DncZeus 框架了!
啟動項目
1、啟動後端服務
使用 Visual Studio 打開 DncZeus
根目錄中的解決方案文件 DncZeus.sln
。(也可以使用 VS Code 進行 .NET 7 的開發。)
設置 DncZeus.API
項目為預設啟動項並運行此項目。
瀏覽器中打開地址: http://localhost:xxxx/swagger
,即可查看已實現的後端 API 介面服務。
2、啟動前端服務
在命令行中進入到 DncZeus
的前端項目目錄 DncZeus.App
。
運行如下命令以啟動前端項目服務:
npm run dev
成功運行後,前端項目服務會在瀏覽器中自動打開地址 http://localhost:xxxx
。
項目演示
1、登錄信息
- 超級管理員用戶名:
administrator
- 普通管理員用戶名:
admin
- 密碼:
111111
- 體驗地址:https://dnczeus.codedefault.com
嘗試使用不同的用戶名登錄系統,體驗不同角色的菜單許可權差異。
註意:這是一個個人項目,體驗伺服器配置較低,請輕度使用,感謝您的理解和支持!
國內鏡像地址:https://gitee.com/rector/DncZeus
2、項目效果
登錄頁面
系統首頁
用戶許可權
消息中心
項目地址
Gitee:https://gitee.com/rector/DncZeus
Github:https://github.com/lampo1024/DncZeus
總結
如果你覺得這篇文章對你有幫助,不妨點個贊支持一下!你的支持是我繼續分享知識的動力。如果有任何疑問或需要進一步的幫助,歡迎隨時留言。也可以加入微信公眾號[DotNet技術匠] 社區,與其他熱愛技術的同行一起交流心得,共同成長!