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. 编辑项目文件，在服务端项目上点击右键，在弹出的右键菜单中选择“编辑项目文件”，打开项目文件，请确保项目引用包含一个  元素，其值设置为 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开发入门详解》的全部内容，希望可以抛砖引玉，一起学习，共同进步。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。