.NET Core前后端分離快速開發框架(Core.3.1+AntdVue)


.NET Core前后端分離快速開發框架(Core.3.1+AntdVue)

引言

時間真快,轉眼今年又要過去了。回想今年,依次開源發布了Colder.Fx.Net.AdminLTE(254Star)Colder.Fx.Core.AdminLTE(335Star)DotNettySocket(82Star)IdHelper(47Star),這些框架及組件都是本着以實際出發,實事求是的態度,力求提高開發效率(我自己都是第一個使用者),目前來看反響不錯。但是隨着前端和后端技術的不斷變革,尤其是前端,目前大環境已經是前后端完全分離為主的開發模式,在這樣的大環境和必然趨勢之下,傳統的MVC就顯得有些落伍了。在這樣的背景下,一款前后端分離的.NET開發框架就顯得尤為必要,由此便定了框架的升級目標:前后端分離

首先后端技術的選擇,從目前的數據來看,.NET Core的發展遠遠快於.NET Framework,最簡單的分析就是Colder.Fx.Core.AdminLTE發布比Colder.Fx.Net.AdminLTE晚,但是星星卻后來居上而且比前者多30%,並且這個差距在不斷擴大,由點及面的分析可以看出我們廣大.NET開發人員學習的熱情和積極向上的態度,並不是某些人所認為的那么不堪(走自己的路,讓別人說去吧)。大環境上微軟積極擁抱開源,大力發展.NET Core, 可以說前途一片光明。因此后端決定采用 .NET Core3.1 ,不再浪費精力去支持.NET Framework。

然后是前端技術選擇,首選是三大js框架選擇,也是從實際出發,Vue相對其它而言更加容易上手,並且功能也毫不遜色,深得各種大小公司喜歡,如果偏要說缺點的話,那就是對TS支持不行,但是即將發布Vue3.0肯定會改變這一缺陷。選擇了Vue之后,然后就是UI框架的選擇了,這里的選擇更多了,我選擇了Ant Design Vue,理由便是簡潔方便,十分符合我的設計理念。

技術選型完畢之后便進入研發,由於鄙人前端比較菜,因此需要從頭學Vue2.x全家桶,從開始到現在差不多經歷3個月,在預期之內。其實學習並使用前端的Vue2.x全家桶並不難,還是比較容易上手的,所以在此給沒有前后端分離開發經驗的老哥打一記預防針,不要退縮,要知難而上,學習永無止境。

某些老哥可能比較直接粗暴,嫌我BBB嘮叨,下面直接上地址
代碼(GitHub):https://github.com/Coldairarrow/Colder.Admin.AntdVue
文檔(GitHub):https://github.com/Coldairarrow/Colder.Admin.AntdVue/wiki
代碼(碼雲鏡像):https://gitee.com/Coldairarrow/Colder.Admin.AntdVue
文檔(碼雲鏡像):https://gitee.com/Coldairarrow/Colder.Admin.AntdVue/wikis
在線預覽地址http://coldairarrow.gitee.io/coler.antdvue.preview
由於服務器是阿里雲的86服務器,帶寬1M小水管,因此將前端部署到碼雲上了,在此多謝碼雲,后端部署在阿里雲86服務器CentOS7上。整個技術棧使用.NET Core + PostggreSQL+ Ant Design Vue + CentOS7+Nginx+Dokcer+jenkins,囊括了從快速開發到自動化部署一條龍,開源免費並具有高性能、高移植性、高拓展性(小公司創業選型+個人接單利器

簡介

本框架為.NET Core3.1+Ant Design Vue版

本框架旨在極大的提高開發效率

使用技術棧:
后端:采用.NET Core平台,ASP.NET Core3.1,C#語言(使用反射等高級技術),Entity FrameworkCore(數據庫ORM框架)。
使用數據倉儲模式,抽象化數據庫操作(CRUD等)、支持事務處理以及分布式事務處理(跨庫)
支持數據庫讀寫分離、分庫分表及事務(僅支持單表操作,不支持多表) 全面采用Autofac作為IOC容器,面向接口編程,全面解耦
集成多種工具類庫以及操作拓展
數據庫:支持SqlServer,PostgreSQL,MySQL,Oracle(框架使用簡單工廠,工廠方法,抽象工廠,可輕松更換數據庫),Redis作為分布式緩存
前端:Vue2.x全家桶+Ant Design Vue,其中集成常用組件,力求方便項目開發。

具體技術實施:
項目采用前后端完全分離模式,並采用嚴格分層模式,極大的增加聚合度,降低耦合度,
提高代碼的健壯性,可維護性。
前后端通過JWT進行身份驗證,通過數據接口操作數據,統一使用JSON作為數據格式,並使用默認接口簽名算法保證接口的安全性。

功能架構部分詳解:
快速開發:此功能為框架的核心,通過選擇數據庫中的表,就能自動生成對應的實體層、業務邏輯層、控制器、前端頁面Vue文件,無需編寫代碼即可生成基本的CRUD操作。
接口密鑰管理:管理接口的密鑰,若開啟接口簽名的規則,則前端需要通過給接口簽名才能夠正常訪問后台接口。
權限管理:使用基本的RBAC權限控制,支持操作權限、接口權限以及數據權限

框架主要功能及特色如下

功能 詳細描述
用戶登錄 用戶登錄、密碼修改
系統用戶管理 系統用戶管理
角1色管理 角色管理
部門管理 部門管理、天然多級
權限管理 使用RBAC權限體系,基於角色的權限管理,支持菜單權限、操作權限(按鈕權限)、接口權限、數據權限
系統日志 支持多彩控制台、文件、數據庫和ElasticSearch記錄日志,框架全局異常自動捕捉,多級別記錄
快速開發 通過數據庫直接生成實體層、業務邏輯層、控制器層以及前端頁面Vue代碼,無需編碼即可實現CURD
數據庫操作封裝 使用基於EF的倉儲模式、封裝常用的CURD,支持單庫事物和分布式事物
多數據庫支持 使用基於EF的倉儲模式,支持各大主流關系型數據庫(SQLServer、MySQL、PostgreSQL和Oracle)
超強移植性 使用抽象工廠封裝數據庫操作層,切換數據庫0代碼修改
支持軟刪除 一鍵切換刪除模式,支持物理刪除和軟刪除,對業務操作透明
緩存支持 支持系統自帶緩存和Redis緩存、封裝操作接口、簡單易用
前后端完全分離 前端使用Vue2.x全家桶+Ant Design Vue,界面簡潔美觀,組件化開發
集成JWT驗證 框架使用JWT作為身份驗證,擺脫Cookie苦海,分布式拓展毫無壓力
集成對外接口簽名算法 框架對外接口可以開啟超強嚴格簽名校驗(防抵賴、防偽造、防重復調用),保障系統安全性
頁面響應式 前端為單頁應用,無iframe,各大主流瀏覽器支持友好
拓展 其它各種幫助類庫及插件

其相關版本請看下表:

.NET版本 前端UI 地址
Core3.1 Ant Design Vue https://github.com/Coldairarrow/Colder.Admin.AntdVue
Core2.2 AdminLTE https://github.com/Coldairarrow/Colder.Fx.Core.AdminLTE
.NET4.72 AdminLTE https://github.com/Coldairarrow/Colder.Fx.Net.AdminLTE
.NET4.52 Easyui https://github.com/Coldairarrow/Coldairarrow.Fx.Net.Easyui.GitHub
Core2.1 Easyui https://github.com/Coldairarrow/Coldairarrow.Fx.Core.Easyui.GitHub
.NET4.0 Easyui https://github.com/Coldairarrow/Coldairarrow.Fx.Net40.Easyui.GitHub

后台效果展示如下:
MG22Bd.png

環境搭建

開發環境要求:

操作系統:Windows 10
后端開發工具:Visual Studio 2019+
前端開發工具:Visual Studio Code,安裝nodejs,yarn
SDK:安裝.NET Core SKD 3.0 及以上
數據庫:SQLServer2008 R2及以上

基礎數據庫構建:

  • 數據庫創建
    目錄"/docs/初始化文件"中有所需的數據庫資料
    MGo70U.png
    先手動創建數據庫,然后執行對應的SQL腳本即可

  • 連接字符串配置
    打開src目錄下Colder.Admin.AntdVue的解決方案,如下圖

MGTuB8.png

如下圖所示依次展開05.Coldairarrow.Api/appsettings.json,配置數據庫連接字符串,name不用修改,connectionString改為上述創建的數據庫(若不清楚數據庫連接字符串請自行百度搜索教程)
JKgHRf.png

數據庫設計規范

由於本框架支持自動生成代碼的核心功能,此功能是根據數據庫的表結構來生成代碼的
因此規定每張表都有一個主鍵,列名為Id,類型為字符串,實際添加數據時默認使用SnowflakeId(雪花Id,Twitter設計的分布式趨勢自增Id,若不清楚請自行百度相關資料),表中的每個列都需要有描述信息(建議這樣操作,若不按照這個標准則需要一些額外的改動才能夠成功運行)。每張表都需要Id、CreateTime、CreatorId這幾個必帶字段

MG7p2n.png

運行

后端:打開解決方案=>還原nuget包=>配置數據庫=>運行(05.Coldairarrow.Api設為啟動項目)
后台成功運行后會自動打開swagger
MGHcTO.png
前端: 確保已安裝nodejsyarn
用VS Code 打開文件夾src\Coldairarrow.Web
MGHEOP.png
輸入命令:yarn
輸入命令:yarn run serve
成功運行后即可打開登錄頁面
MGH56I.png
輸入賬號:Admin,密碼:123456進入后台主頁
MG22Bd.png

使用教程

系統配置

05.Coldairarrow.Api/appsettings.json中配置了系統的必要參數,其中包括數據庫類型、連接字符串、日志配置等,具體配置參考注釋

快速開發

此功能為本框架的核心功能,能夠自動生產完整的可運行代碼,具體使用如下:

  • 配置數據源

首選需要有數據庫源,因為代碼生成是根據數據庫表來生成的。
菜單:開發=>數據庫連接
MYpg8P.png
若列表中沒有目標數據源,則添加數據庫連接
MYphDg.png
數據連接名、連接字符串、數據庫類型即可。添加完成后即可看到連接字符串信息。

  • 生成代碼

有了數據庫連接之后,即可進行代碼生成。
菜單:開發=>代碼生成

MYpb80.png

選擇數據庫,然后勾選需要生成代碼的數據庫表,點擊生成代碼會彈出生成選項(這里演示勾選 Base_BuildTest,其余表全是系統基礎表,不要勾選,否則會被覆蓋,導致異常,請勾選自己的業務表進行生成):

MYi3M6.png

生成選項中可以選擇需要生成的類型,默認生成全部:實體層、業務層、接口層(即控制器)和頁面(Vue前端頁面代碼)。
生成區域請輸入業務模塊名(例如系統叫Base_Manage),請按具體業務填入(必填)
這里示例填寫TestManage,點擊生成按鈕,即可完成代碼生成。生成后的代碼在項目解決方案中,將代碼文件包括進入項目

默認生成后的文件會被自動包括到解決方案中,若沒有則需要點擊顯示所有文件按鈕,即可看到生成后的新文件

生成的實體層、業務邏輯層、控制器層代碼:
JKRu7j.png
前端生成的代碼:
MYiXWR.png

后端代碼添加后需要重新編譯下(F7),編譯后好可以看到有新的接口
MYQYcD.png
前端生成代碼后會自動保存並編譯(別的文件修改保存也會自動編譯,畢竟編譯一次挺慢的),不放心可以Ctrl+C停止,然后再yarn run serve重新運行

代碼生成完畢,但是要展示到菜單上需要進行配置,並且所有業務菜單都是動態的(權限控制)
打開菜單:系統管理=>權限管理=>新建
MYPsUJ.png
MYFUmT.png
菜單名:即需要顯示的菜單名
上級菜單:菜單是多級樹狀的,可以放在某個菜單下面
類型:可以選擇菜單或頁面,這里是具體的頁面,所以選頁面
路徑:頁面的路徑,菜單可以不配置,這里配置為/TestManage/Base_BuildTest/List,這里設置規則為:views文件夾為根路徑(即"/"),向下展開依次為/TestManage/Base_BuildTest/List,最后真正的列表頁為List.vue文件,表單頁為EditForm.vue文件
是否需要權限:若為“否”,則此頁面不限制權限,即所有人都能看
圖標:菜單顯示圖標,具體到開發=>圖標選擇頁進行選擇
排序:若需要需要對菜單進行排序則設置,默認0,類型為int
頁面權限:頁面擁有的權限(權限值唯一,作為操作權限即接口權限的依據),詳見權限管理

確認保存,然后刷新整個頁面(F5),即可看到全新生成的菜單“生成測試”
MYkvqK.png
MYAFxI.png
MYAVqf.png

整個代碼生成過程,無需編寫代碼即可完成一張表的CRUD,當然需要根據具體業務中進行相應的修改,本次示例中字段比較少,但是當一張表的字段很多時,那么此功能能夠將開發效率提高幾個檔次。

管理員登錄

MGH56I.png
默認超級管理員賬號為:Admin
密碼為:123456

系統用戶管理

管理系統登錄的用戶
菜單:系統=>用戶管理
點擊右側設置權限

系統角色管理

管理系統角色,角色是權限的載體,合理分配角色有利於權限管理
菜單:系統=>角色管理
操作中可以設置角色的權限,詳情見<權限管理>模塊

權限管理

一般情況下,后台管理系統多少會涉及權限管理,因此本框架提供了一個靈活、高效、簡潔的權限管理系統。

首先,權限分為兩種,即操作權限數據權限,其中操作權限主要包括菜單權限和按鈕權限,在角色編輯表單中,給角色勾選需要的權限即可,用戶可以分配多個角色,繼承所有角色的權限。
MYET39.png
如上圖,按需勾選,有人會疑問為什么只有增、改和刪的權限而沒有查的權限,其實這里考慮到了當勾選“用戶管理”時,就已經默認擁有“查”的權限了,這里再設置“查”權限豈不是多此一舉,可以根據實際業務需求添加諸如申請、審核等權限,靈活應用。
這里的樹狀是和菜單一一對應的,勾選哪些菜單就擁有哪些菜單

下面介紹下最常用的按鈕權限
MYVTIS.png

如上圖,在需要控制權限的按鈕使用v-if="hasPerm('Base_User.Add')",表示只有當用戶擁有權限值Base_User.Add才顯示此按鈕,權限值就是權限表單中配置的權限值

這里的按鈕級權限控制只能夠在前端控制操作入口,若系統對安全性要求較高,則需要控制接口權限
MYZNo8.png

如上圖,在需要權限控制的接口加上ApiPermission特性即可,參數也為權限值,只有擁有此權限才能訪問此接口

數據權限比較復雜,若采用純SQL方式,那么會更加復雜,本框架全程采用EF作為ORM框架,通過對IQueryable< T >進行過濾,即可完成數據權限控制,詳細使用方式見用戶管理

更詳細的使用方式,請參考源代碼中的用戶管理模塊(菜單權限、操作權限、數據權限、聯表查詢、業務層AOP等使用方式均可參考此模塊)

接口秘鑰管理

作為對外接口簽名的AppId和AppSecret管理
菜單:系統=>接口秘鑰管理

系統日志

菜單:系統=>系統日志

操作日志

菜單:系統=>操作日志

事務使用

系統采用AOP管理事務,使用十分簡單,只需要在需要事務包裹的方法中添加Transactional特性,無需任何其他處理,系統會自動捕捉異常並回滾,而且支持多庫事務(即使用多個不同的IRepository也會在同一個事務中處理)
JKWm26.png

讀寫分離分庫分表

系統采用EFCore.Sharding組件,具體使用方式請移步EFCore.Sharding

常見疑問

如何進行聯表查詢

框架使用EF+LINQ進行聯表操作,核心在於對IQueryable< T >的使用,另可網上搜EF+LINQ的相關教程。

示例如下:
Base_User表左連接Base_Department表獲取DepartmentName屬性

//定義數據模型類
public class Base_UserTestDTO : Base_User
{
    public string DepartmentName { get; set; }
}

//即BaseBusiness中的Service
var db = DbFactory.GetRepository();
Expression<Func<Base_User, Base_Department, Base_UserTestDTO>> select = (a, b) => new Base_UserTestDTO
{
    DepartmentName = b.Name
};
select = select.BuildExtendSelectExpre();
var q = from a in db.GetIQueryable<Base_User>().AsExpandable()
        join b in db.GetIQueryable<Base_Department>() on a.DepartmentId equals b.Id into ab
        from b in ab.DefaultIfEmpty()
        select @select.Invoke(a, b);
//篩選
var where = LinqHelper.True<Base_UserTestDTO>();
where = where.And(x => x.UserName == "Admin");

//獲取篩選數據
var list = q.Where(where).ToList();

源碼可參考Base_UserBusiness.GetDataList

如何切換數據庫類型

修改05.Coldairarrow.Api/appsettings.json中的DatabaseType
修改相應的數據庫連接字符串
安裝相應的數據庫Nuget包
注意:若使用Oracle,只能使用2.x版本的包(EFCore.Sharding也要降級為2.x),因為EF Core3.x版本暫不支持Oracle,其余版本數據庫使用最新版即可

JK4tR1.png
JK4rIH.png

如何使用多個數據庫

默認框架會自動注入IRepository作為數據庫訪問接口,在需要的時候注入即可,若系統需要操作多個數據庫,那么需要定義額外的接口繼承IRepository然后配置注入進去即可訪問

  • 先定義新的接口IMyRepository
    JKI3C9.png

  • 然后配置數據庫類型和連接字符串
    JKINDK.png

  • 使用IMyRepository
    JKIr8A.png

這樣就可以在任何地方注入並使用IMyRepository,更多數據庫同理配置即可

結語

歡迎使用本框架,若覺得不錯,請比心

Github歡迎星星:https://github.com/Coldairarrow

博客園歡迎點贊:https://www.cnblogs.com/coldairarrow/

QQ群3:940069478
個人QQ:862520575(歡迎技術支持及商務合作,提供.NET Core + Linux + Nginx+ jenkins + git整套持續集成快速開發平台

本人將會對這個快速開發框架不斷完善與維護,希望能夠幫助到各位
若遇到任何問題或需要技術支持,請聯系我
------學習永無止境,技術永無上限,代碼就是藝術------


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM