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

簡介

昨天參加了《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的全解析)

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章