NCF 如何通過WebApi實現前後端分離

MartyZane發表於2021-06-06

簡介

昨天參加了《Best Of Microsoft Build》上海專場 

NCF 模組化 WebApi 系統開發 + 容器化部署實戰

的小夥伴們,昨天有些沒有記住的,今天我在這裡給大家把步驟再詳細的一步步闡述一下,如果中間有些環節大家不太清楚的,可以及時找我溝通

下面我們就來說一說昨天談到的NCF 如何寫WebApi

 

步驟

1.拉取NCF倉庫WebApi分支

2.修改資料庫連線字串

3.執行Senparc.Web專案,初始化基礎資料庫

4.登入後臺進入模組管理介面

5.安裝模組生成器模組

6.安裝本地的Xncf Module Template

7.使用模組生成器生成你想生成的任意的模組

8.生成資料庫所需要的表

9.進入演示完全分離的前後端及WebApi

 

實施

1.拉取NCF倉庫WebApi分支

首先我們得知道NCF的倉庫在什麼地方,推薦大家Star

NCF倉庫地址:https://github.com/NeuCharFramework/NCF

NCF依賴庫倉庫地址:https://github.com/NeuCharFramework/NcfPackageSources

NCF開發文件倉庫地址:https://gitee.com/NeuCharFramework/NcfDocs

找到倉庫,使用git工具拉取到本地後,直接使用宇宙第一IDE(Visual Studio)開啟專案,如圖所示

 

 

 2.修改資料庫連線字串

找到Senparc.Web專案下面的SenparcConfig.config

 

 

 開啟檔案,修改連線字串

 

 

 修改完連線字串以後,就可以直接執行咯,見證奇蹟的時候到來了

3.執行Senparc.Web專案,初始化基礎資料庫

 

 點選立即安裝,可以看到出現了登入的頁面,儲存好這個賬號密碼,以便後續使用

 

4.登入後臺進入模組管理介面

點選登入,並輸入賬號密碼,進入後臺管理

5.安裝模組生成器模組

 點選模組管理進入

 

 如果在這裡未發現模組生成器,則雙擊Senparc.Web,進入檔案編輯,增加XncfBuilder

<PackageReference Include="Senparc.Xncf.XncfBuilder" Version="0.8.127.20-beta1" />

 

 然後重新編譯,即可看到模組生成器

6.安裝本地的Xncf Module Template

首先檢查一下本地是否安裝了Xncf Module Template

進入cmd 或 powershell,輸入一下命令

dotnet new

看下是否會有圖中所示內容

 

 如果有就跳過此步驟,如果沒有則執行以下命令

dotnet new --install Senparc.Xncf.XncfBuilder.Template::0.1.19

安裝完成後效果如上圖所示

7.使用模組生成器生成你想生成的任意的模組

安裝模組生成器後,點選開啟

 

 

 

 點選執行生成模組

 

 彈出生成需要的條件引數

 

 

 

 執行後,則生成了專案中的

 

 然後把生成的模組及Senparc.Xncf.Swagger模組,加入到Senparc.Web的引用中

在模組管理中,則可以看到2個引入的模組

 

8.生成資料庫所需要的表 

安裝WorkShop.Xncf.WebApiDemo01模組,並開啟,則能看到如下圖所示

 

 同時資料庫中就已經生成了

9.進入演示完全分離的前後端及WebApi

在Senparc.Web/wwwroot/下面,我放了一個demo的資料夾

如果你的訪問首頁地址為:https://localhost:44311/

則訪問demo的地址為:https://localhost:44311/demo/index.html

 

以上就是昨天演示Demo的所有內容

 

下一篇預告:(NCF WebApi中 Controller的全解析)

 

相關文章