每一個新項目,都離不開身份認證,許可權授權,系統配置,還有相應的前端操作界面等基礎而重覆的工作,如果每一個新項目都要從0開始做這些重覆性工作,是很無味而繁瑣的。因此,OSharp 框架製作了一個基於 dotnet cli 命令行工具的快速啟動模板 ...
什麼是OSharp
OSharpNS全稱OSharp Framework with .NetStandard2.0,是一個基於.NetStandard2.0
開發的一個.NetCore
快速開發框架。這個框架使用最新穩定版的.NetCore SDK
(當前是.NET Core 2.2),對 AspNetCore 的配置、依賴註入、日誌、緩存、實體框架、Mvc(WebApi)、身份認證、許可權授權等模塊進行更高一級的自動化封裝,並規範了一套業務實現的代碼結構與操作流程,使 .Net Core 框架更易於應用到實際項目開發中。
- 開源地址:https://github.com/i66soft/osharp
- 官方示例:https://www.osharp.org
- 文檔中心:https://docs.osharp.org
- VS 插件:https://marketplace.visualstudio.com/items?itemName=LiuliuSoft.osharp
開發環境
OSharp 框架使用現在流行的 前後端分離 的架構模式,開發環境的初始化涉及後端開發環境和前端開發環境。
後端開發環境
後端開發環境指的是 .NetCore 的開發環境,涉及到的開發環境為SDK,IDE,資料庫等。
.NetCore SDK
OSharp 框架的後端是基於 .NetCore 的最新穩定版本的,目前最新穩定版本為 ,當 3.0 版本發佈穩定版本之後,不出意外 OSharp 會跟隨腳步升級到 3.0,所以,請安裝最新版本的 SDK。
最新 SDK 下載地址如下:
https://dotnet.microsoft.com/download
- 點擊 Download .NET Core SDK 按鈕進行最新 SDK 的下載。
- 在伺服器部屬的時候,不需要完整的 SDK,點擊 Download .NET Core Runtime 按鈕進行最新 Runtime 的下載。
安裝完成後,在 命令提示符
或 PowerShell
視窗輸入如下命令,即可查看到本機已安裝的 .NetCore 的 SDK 和 Runtime 版本詳細信息
dotnet --info
我的電腦輸出如下,可以看到,已經安裝了 2.2.203
版本的 SDK 和 2.2.4
版本的 Runtime:
.NET Core SDK(反映任何 global.json):
Version: 2.2.203
Commit: e5bab63eca
運行時環境:
OS Name: Windows
OS Version: 10.0.17763
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\2.2.203\
Host (useful for support):
Version: 2.2.4
Commit: f95848e524
.NET Core SDKs installed:
2.2.203 [C:\Program Files\dotnet\sdk]
.NET Core runtimes installed:
Microsoft.NETCore.App 2.2.4 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
To install additional .NET Core runtimes or SDKs:
https://aka.ms/dotnet-download
IDE (集成開發環境)
- Visual Studio 2019:開發 .NET 程式,當前首先宇宙最強IDE Visual Studio,.NetCore 2.2 的可用VS版本為 VS2017 和 VS2019,推薦使用最新版本的 VS2019。
- Visual Studio Code:如果你覺得VS太過笨重,喜歡比較輕量級的IDE,VS Code 也是個很不錯的選擇,只需裝上
C#
插件即可完美運行 .NetCore 代碼。VS Code 也是目前最好用的前端IDE,後面將作為前端IDE進行前端代碼的開發。
兩個IDE都可以在如下的地址中下載:
https://visualstudio.microsoft.com/zh-hans/downloads/
補充說明
當使用 Visual Studio 時,Resharper 這個插件是個不可錯過的插件,可以在 智能提示、變數命名、代碼優化、代碼重構、代碼結構導航、dll反編譯查看源代碼等方面對 Visual Studio 進行大量不可多得的功能補充。當然,這個插件比較吃資源,需要你有一臺性能優良的硬體機器才能流暢使用。
資料庫
OSharp 框架的數據存儲是基於 EntityFrameworkCore (簡稱EFCore) 這個ORM實現的,只要 EFCore 支持的資料庫,都可以作為 OSharp 的數據存儲,現已支持資料庫如下:
- Microsift SqlServer 2012+
- MySql 5.7+
- Sqlite
- PostgreSql
- Oracle
前端開發環境
在前後端分離的項目中,三大前端技術框架 Angular、Vue、React 已經成為不可跨越的必選項,基於歷史的原因(osharp的.net fx 版本基於AngularJS),OSharp 的前端是基於 Angular 實現的,考慮到 Vue 在國內不可忽視的市場,Vue 版本的前端也在計劃之內,而 React 版本目前還沒有排上日程。
要上三大前端,NodeJS 是必須的,可在如下地址獲得 NodeJS 的安裝包:
https://nodejs.org/en/
NodeJS 安裝 好之後,NPM 也就可以用了。但 NPM 的預設安裝源在國外,通常會比較慢,因此需要把 NPM 的安裝源設置到國內鏡像源,淘寶鏡像是個不錯的選擇,執行如下命令設置將淘寶鏡像設置為NPM的安裝源:
npm config set registry https://registry.npm.taobao.org
Angular
OSharp 的 Angular 版前端是基於 NG-ALAIN
前端框架開發的。NG-ALAIN 是一個基於 Antd 中後臺前端解決方案,提供更多通用性業務模塊,讓開發者更加專註於業務。
首先,需要通過 npm 命令全局安裝 @angular/cli 運行環境
npm install -g @angular/cli
Vue
OSharp 的 Vue 版前端是基於 IView
前端框架開發的。IView 是一套基於 Vue.js 的高質量 UI 組件庫。
首先,需要通過 npm 命令全局安裝 @@vue/cli 運行環境
npm install -g @@vue/cli
由於精力有限及優先順序的問題,Vue版本現在尚未開發完成。
項目初始化
每一個新項目,都離不開身份認證,許可權授權,系統配置,還有相應的前端操作界面等基礎而重覆的工作,如果每一個新項目都要從0開始做這些重覆性工作,是很無味而繁瑣的。因此,OSharp 框架製作了一個基於 dotnet cli
命令行工具的快速啟動模板 OSharpNS.Template.Mvc_Angular ,一鍵搞定這些重覆性的模塊,讓項目啟動不再繁瑣。下麵讓我們一起來啟動一個新項目。
安裝 OSharp 的 dotnet new 項目模板
安裝項目模板的前提,是已經按照前面的要求下載安裝好了 .NetCore SDK。>>飛機票
在任意空白文件夾,打開 cmd
或 powershell
命令行視窗,執行如下命令安裝或更新 OSharp .NetCore CLI 項目模板
dotnet new -i OSharpNS.Template.Mvc_Angular
執行後,將能看到 osharp_xxx
系列的命令已安裝到 .NetCore CLI 列表中
Name | Command | Language | Path |
---|---|---|---|
OSharp Build Command File | osharp | [C#] | Web/MVC/OSHARP |
OSharp Solution Project | osharp_sln | [C#] | Web/MVC/OSHARP |
OSharp Service Core Project | osharp_core | [C#] | Web/MVC/OSHARP |
OSharp EntityConfiguration Project | osharp_entityconfig | [C#] | Web/MVC/OSHARP |
OSharp MVC Project | osharp_mvc | [C#] | Web/MVC/OSHARP |
OSharp Angular Project | osharp_ng | Angular | Web/MVC/OSHARP |
其中 osharp
是個一鍵命令,可通過此命令創建一個完整的項目啟動解決方案。下麵,我們以創建一個 博客系統 為例,完整的步驟如下:
執行 osharp 命令,得到一個
osharp.cmd
腳本文件dotnet new osharp
輸出:
已成功創建模板“OSharp Build Command File”。
打開
osharp.cmd
腳本文件,進行解決方案生成./osharp.cmd
輸出:
------------------------- - 歡迎使用 OSharp一鍵模板 命令 - http://www.osharp.org - Copyright @ 2014 - 2019 OSHARP.ORG ------------------------- 請輸入項目名稱,推薦形如 “公司.項目”的模式:
按要求的格式 公司.項目 輸入項目名稱,即生成項目的主命名空間。
例如,公司的代碼為 Liuliu,要創建一個博客系統,則輸入 Liuliu.Blogs
Liuliu.Blogs
輸出:
已成功創建模板“OSharp Solution Project”。 已成功創建模板“OSharp Service Core Project”。 已成功創建模板“OSharp EntityConfiguration Project”。 已成功創建模板“OSharp MVC Project”。 已成功創建模板“OSharp Angular Project”。 項目代碼生成完成
至此,一個完整的項目啟動解決方案創建完成。
完整的創建過程演示如下:
打開項目,讓項目跑起來
使用VS2019打開後端 .NetCore 解決方案
使用 VS2019 打開 解決方案文件 Liuliu.Blogs.sln
,可以看到各個工程之間的引用關係已經配置好了,OSharp框架的各個依賴類庫也已引用了 nuget.org 上的相應版本,並將自動完成類庫還原。
解決方案項目結構如下:
Liuliu.Blogs # 解決方案根目錄
└─src # 源代碼
├─Liuliu.Blogs.Core # 業務層
│ ├─Common # 通用業務服務
│ ├─Identity # 身份認證模塊業務服務
│ │ ├─Dtos # 身份認證模塊傳輸DTO
│ │ ├─Entities # 身份認證模塊數據實體
│ │ └─Events # 身份認證模塊事件處理器
│ ├─Security # 許可權安全模塊業務服務
│ └─Systems # 系統模塊業務服務
├─Liuliu.Blogs.EntityConfiguration # 實體類資料庫映射配置工程
│ ├─Identity # 身份認證模塊實體類配置
│ ├─Security # 許可權安全模塊實體類配置
│ └─Systems # 系統模塊實體類配置
└─Liuliu.Blogs.Web # Web工程
├─Areas # 區域文件夾
│ └─Admin # 管理區域
│ └─Controllers # 管理API控制器
│ ├─Identity # 身份認證模塊API
│ ├─Security # 許可權安全模塊API
│ └─Systems # 系統模塊API
├─Controllers # 前臺API
├─Hangfire # Hangfire後臺工作
├─Migrations # 資料庫遷移
└─Startups # 啟動相關代碼
- Liuliu.Demo.Core: 業務核心工程,頂層文件夾以業務模塊內聚,每個文件夾按職責劃分文件夾,通常可包含傳輸對象
Dtos
、實體類型Entities
、事件處理Events
等,業務介面IXXXContract與業務實現IXXXService放在外邊,如果文件數量多的話也可以建文件夾存放。 - Liuliu.Demo.EntityConfiguration: EFCore實體映射工程,用於配置各個業務實體映射到資料庫的映射細節。文件夾也推薦按模塊內聚。
- Liuliu.Demo.Web: 網站的Hosting項目,按常規方式使用即可
我們仍需做一點小工作,才能讓後端工程跑起來:
- 將 Web 工程
Liuliu.Blogs.Web
設置為啟動項目 - 打開配置文件
appsettings.Development.json
,啟用相應資料庫連接配置,並將資料庫連接用戶名和密碼改為本地環境的用戶名和密碼
"SqlServer": {
"DbContextTypeName": "OSharp.Entity.DefaultDbContext,OSharp.EntityFrameworkCore",
"ConnectionString": "Server=.;Database=Liuliu.Blogs-dev;User Id=sa;
Password=Abc123456!;MultipleActiveResultSets=true",
"DatabaseType": "SqlServer",
"LazyLoadingProxiesEnabled": true,
"AuditEntityEnabled": true,
"AutoMigrationEnabled": true
}
特別註意:
資料庫配置中,同一上下文(相同的
DbContextTypeName
)只能配置一種資料庫類型(DatabaseType
),並且要保持在appsettings.json
和appsettings.Development.json
範圍內 全局唯一,否則將會引發異常無法正常啟動。
完成配置後,在 VS2019 上按 Ctrl+F5
啟動項目,將看到項目正常啟動(前提是你已經安裝好了相應版本的 .NetCore SDK)。我們將在瀏覽器看到 Swagger
的API頁面:
打開相應的資料庫管理軟體(本次使用MSSQL,這裡使用VS2019自帶的 SQL Server 對象資源管理器
),可以看到資料庫已經自動生成,並且必要基礎數據已經初始化完成:
使用VSCode打開前端 Angular 項目
使用 VS Code 打開 src/ui/ng-alain
文件夾,前端項目是基於 NG-ALAIN,項目結構如下:
├── _mock # Mock 數據規則
├── src
│ ├── app
│ │ ├── core # 核心模塊
│ │ │ ├── i18n
│ │ │ ├── net
│ │ │ │ └── default.interceptor.ts # 預設HTTP攔截器
│ │ │ ├── services
│ │ │ │ └── startup.service.ts # 初始化項目配置
│ │ │ └── core.module.ts # 核心模塊文件
│ │ ├── layout # 通用佈局
│ │ ├── routes
│ │ │ ├── ** # 業務目錄
│ │ │ ├── routes.module.ts # 業務路由模塊
│ │ │ └── routes-routing.module.ts # 業務路由註冊口
│ │ ├── shared # 共用模塊
│ │ │ └── shared.module.ts # 共用模塊文件
│ │ ├── app.component.ts # 根組件
│ │ └── app.module.ts # 根模塊
│ │ └── delon.module.ts # @delon模塊導入
│ ├── assets # 本地靜態資源
│ ├── environments # 環境變數配置
│ ├── styles # 樣式目錄
└── └── style.less # 樣式引導入口
按 Ctrl+Tab
快捷鍵,調出 VS Code 的命令行控制台,輸入 NodeJS 包安裝命令:
npm install
依賴包安裝完成之後,輸入項目啟動命令
npm start
此命令將會執行如下命令:ng serve --port 4201 --proxy-config proxy.config.json --open
,其中--proxy-config proxy.config.json
對前端項目發起的API請求進行了代理,所有以 /api/
開頭的請求,都會轉發到服務端項目中進行處理,代理的實際配置如下:
{
"/api": {
"target": "http://localhost:7001",
"secure": false
}
}
至此,項目啟動完成,將進入登錄界面,如下圖所示:
需要註冊一個用戶,才能進入系統。
第一個註冊用戶將自動擁有 最高許可權 的 超級管理員 角色身份。
註冊界面:
後臺主頁:
功能管理:
數據實體管理: