在前段時間，有粉絲反饋能否寫一篇基于ASP.NET Core Web Api+React UI進行Web開發的文章，經過查閱相關資料，發現Visual Studio 2022已經集成相關模板，可以在Visual Studio中直接創建項目項目，今天以一個小例子，簡述ASP.NET Core Web Api+React UI開發系統的基本步驟，僅供學習分享使用，如有不足之處，還請指正。

在前段時間，有粉絲反饋能否寫一篇基于ASP.NET Core Web Api+React UI進行Web開發的文章，經過查閱相關資料，發現Visual Studio 2022已經集成相關模板，可以在Visual Studio中直接創建項目項目，今天以一個小例子，簡述ASP.NET Core Web Api+React UI開發系統的基本步驟，僅供學習分享使用，如有不足之處，還請指正。

 

開發環境

 

創建和開發基于ASP.NET Core Web Api+React UI的前后端分離項目，需要的環境如下：

開發環境：Visual Studio 2022 最低支持版本為17.11或更高版本。在Visual Studio 中，點擊“幫助”菜單，然后點擊“關于Microsoft Visual Studio”，可以查看已安裝的版本。

小編電腦上的Visual Studio 2022版本為v17.13.2，如下所示：

安裝Visual Studio 2022時，需要安裝“ASP.NET 和Web開發”，以及“Web部署”模塊，如果沒有安裝，可以通過Visual Studio中“工具”菜單，然后點擊“獲取工具和功能”進行查看，如下所示：

Web部署組件

NPM環境，NPM的全稱是Node Package Manager，是一個NodeJS包管理和分發工具，已經成為了非官方的發布Node模塊（包）的標準。由于基于React UI的前端項目，是通過NPM創建模板項目，所以需要NPM的支持。在命令行中，可以通過npm -v 查看當前版本，如果使用npm -v 提示不存在的命令，則表示沒有安裝npm，可以通過安裝node.js進行安裝。小編的npm當前版本為10.7.0，node.js的版本為v22.2.0。如下所示：

 

項目創建步驟

 

選擇項目模板，在創建項目向導中，搜索React關鍵字，然后選擇“React and ASP.NET Core”模板，搜索出來的兩個分別是基于TypeScript和JavaScript，均可以創建，如下所示：

配置項目，輸入解決方案名稱，如“OneReactApp”,以及項目存儲的位置。如下所示：

選擇框架，目前只有“.NET 8.0”支持此項目的創建，其他選擇默認即可，如下所示：

創建項目，在上述步驟中，配置完信息，點擊“創建”即可創建項目。Visual Studio會默認創建兩個項目，分為客戶端和服務端。客戶端基于React UI進行開發，服務端基于ASP.NET Core Web Api進行開發，如下所示：

在項目創建過程中，并不一定會順利，如果報以下錯誤“Unsupported engine for tmp@0.2.3:wanted:{node:>=14.4 }”等信息，則表示node版本太低，需要升級。

如果提示“Syntax Error:Unexpected token ?”等語法錯誤，是因為可選鏈操作符需要在 Node.js 的較新版本中才支持。如果你使用的是 Node.js 的一個舊版本，它將無法識別 ? 符號。建議升級Node.js到最新版本。

 

設置項目屬性

 

選擇服務端項目【OneReactApp.Server】，右鍵“屬性”打開屬性頁面，在“調試”選項卡，點擊“打開調試啟動配置文件 UI”打開“啟動配置文件”窗口，如下所示：

在“啟動配置文件”窗口，選擇Https選項卡，在啟動瀏覽器，取消勾選“指示在調試項目時應自動啟動web瀏覽器”，如下所示：

配置啟動項，選擇解決方案，在右鍵菜單中，選擇“配置啟動項”打開“解決方案屬性頁”，選擇“多個啟動項目(M)”，然后將客戶端和服務端項目都設置為啟動，然后點擊“應用”按鈕。如下所示：

 

啟動項目

 

在Visual Studio 開發工具中，點擊“啟動”按鈕或快捷鍵“F5”啟動調試。如下所示：

第一次啟動項目，需要先還原客戶端需要的庫，此操作是通過npm命令在線執行，可能需要幾分鐘，如下所示：

程序運行后，會出現兩個命令提示符，Vite Cli表示React UI客戶端項目是通過VITE啟動的，如下所示：

另外一個窗口是“正在運行的 ASP.NET Core API 項目”，表示服務端運行窗口。如下所示：

在上述啟動的兩個窗口中，可以看到默認的客戶端端口為53017，服務端端口為7061。

正常啟動后，可在默認瀏覽器里看到一個“Weather forecast”頁面，這是Visual Studio 2022項目創建模板自帶的頁面，即表示運行成功，如下所示：

 

發布項目

 

ASP.NET Core WebAPI+React UI前后端分離的項目，發布步驟如下：

1. 在服務端添加對客戶端的引用，首先在解決方案管理器中，選擇服務端項目，在右鍵菜單中，選擇“添加”，在子菜單中選擇“項目引用”或者在“依賴項”點擊右鍵，在彈出菜單中選擇“添加項目引用”，打開“引用管理器”，選擇客戶端項目“onereactapp.client”，然后點擊“確定”即可，如下圖所示：

添加成功后，即可在“依賴項”項目中看到對客戶端的引用，如下所示：

2. 編輯項目文件，在服務端項目上點擊右鍵，在彈出的右鍵菜單中選擇“編輯項目文件”，打開項目文件，請確保項目引用包含一個 <ReferenceOutputAssembly> 元素，其值設置為 false。如下所示：

3. 確保Program.cs文件中存在如下代碼

然后選擇服務端項目“OneReactApp.Server”右鍵菜單點擊“發布”，然后選擇發布方案，如“文件夾”，如下所示：

然后點擊“下一步”，選擇目標發布的位置，默認為“bin\Release\net8.0\publish\”，如下所示：

然后點擊“完成”，創建項目發布文件，然后點擊“關閉”，如下所示：

然后點擊“發布”按鈕，如下所示：

發布成功后，如下所示：

在“輸出”窗口，也可以看到發布過程中輸出的信息，如下所示：

發布成功，在文件夾里面，可以看到發布后的結果文件，如下所示：

雙擊“OneReactApp.Server.exe”，提示缺少“wwwroot”目錄，靜態文件可能會不可用，如下所示：

后來經過分析，發現客戶端采用npm run build命令進行構建，在構建后，會在dist目錄下生成靜態文件，所以在服務端發布目錄下，創建wwwroot目錄，并將dist目錄下的文件拷貝過來即可。

onereactapp.client\dist目錄下的靜態文件，如下所示：

復制到服務端發布目錄下的文件結構，如下所示：

再次雙擊“OneReactApp.Server.exe”后，顯示運行正常，如下所示：

然后在瀏覽器中輸入配置的http://localhost:5000即可訪問，與在Visual Studio 2022中調試狀態下輸出內容一樣，則表示發布成功，如下所示：

以上就是《ASP.NET Core WebApi+React UI開發入門詳解》的全部內容，希望可以拋磚引玉，一起學習，共同進步。