ASP.NET Core WebApi+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开发入门详解》的全部内容，希望可以抛砖引玉，一起学习，共同进步。