ASP.NET Core WebApi+React UI开发入门详解

张茹發表於 2025-3-25 00:50:00

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开发系统的基本步骤，仅供学习分享使用，如有不足之处，还请指正。
 
<h1>开发环境</h1>
 
创建和开发基于ASP.NET Core Web Api+React UI的前后端分离项目，需要的环境如下：
开发环境：Visual Studio 2022 最低支持版本为17.11或更高版本。在Visual Studio 中，点击“帮助”菜单，然后点击“关于Microsoft Visual Studio”，可以查看已安装的版本。
小编电脑上的Visual Studio 2022版本为v17.13.2，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250319234518693-1260718892.png">
安装Visual Studio 2022时，需要安装“ASP.NET 和Web开发”，以及“Web部署”模块，如果没有安装，可以通过Visual Studio中“工具”菜单，然后点击“获取工具和功能”进行查看，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250319235147612-450563540.png">
Web部署组件
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250319235406972-1703653188.png">
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。如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250320002105679-351635736.png">
 
<h1>项目创建步骤</h1>
 
选择项目模板，在创建项目向导中，搜索React关键字，然后选择“React and ASP.NET Core”模板，搜索出来的两个分别是基于TypeScript和JavaScript，均可以创建，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250320003234314-425529420.png">
配置项目，输入解决方案名称，如“OneReactApp”,以及项目存储的位置。如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250320003600971-1395338505.png">
选择框架，目前只有“.NET 8.0”支持此项目的创建，其他选择默认即可，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250320003752686-2095651289.png">
创建项目，在上述步骤中，配置完信息，点击“创建”即可创建项目。Visual Studio会默认创建两个项目，分为客户端和服务端。客户端基于React UI进行开发，服务端基于ASP.NET Core Web Api进行开发，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250320004032360-35778419.png">
在项目创建过程中，并不一定会顺利，如果报以下错误“Unsupported engine for tmp@0.2.3:wanted:{node:>=14.4 }”等信息，则表示node版本太低，需要升级。
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250320004408707-910610849.png">
如果提示“Syntax Error:Unexpected token ?”等语法错误，是因为可选链操作符需要在 Node.js 的较新版本中才支持。如果你使用的是 Node.js 的一个旧版本，它将无法识别 <code class="dqa-code-span">?</code> 符号。建议升级Node.js到最新版本。
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250320004617957-1220301686.png">
 
<h1>设置项目属性</h1>
 
选择服务端项目【OneReactApp.Server】，右键“属性”打开属性页面，在“调试”选项卡，点击“打开调试启动配置文件 UI”打开“启动配置文件”窗口，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250321000024919-1343606504.png">
在“启动配置文件”窗口，选择Https选项卡，在启动浏览器，取消勾选“指示在调试项目时应自动启动web浏览器”，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250321000209041-866561280.png">
配置启动项，选择解决方案，在右键菜单中，选择“配置启动项”打开“解决方案属性页”，选择“多个启动项目(M)”，然后将客户端和服务端项目都设置为启动，然后点击“应用”按钮。如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250321000732377-741834913.png">
 
<h1>启动项目</h1>
 
在Visual Studio 开发工具中，点击“启动”按钮或快捷键“F5”启动调试。如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250321001127152-1476463118.png">
第一次启动项目，需要先还原客户端需要的库，此操作是通过npm命令在线执行，可能需要几分钟，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250321001353124-1166643256.png">
程序运行后，会出现两个命令提示符，Vite Cli表示React UI客户端项目是通过VITE启动的，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250321001759447-1902031954.png">
另外一个窗口是“正在运行的 ASP.NET Core API 项目”，表示服务端运行窗口。如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250321001921772-323093707.png">
在上述启动的两个窗口中，可以看到默认的客户端端口为53017，服务端端口为7061。
正常启动后，可在默认浏览器里看到一个“Weather forecast”页面，这是Visual Studio 2022项目创建模板自带的页面，即表示运行成功，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250321002117552-171962876.png">
 
<h1>发布项目</h1>
 
ASP.NET Core WebAPI+React UI前后端分离的项目，发布步骤如下：
1. 在服务端添加对客户端的引用，首先在解决方案管理器中，选择服务端项目，在右键菜单中，选择“添加”，在子菜单中选择“项目引用”或者在“依赖项”点击右键，在弹出菜单中选择“添加项目引用”，打开“引用管理器”，选择客户端项目“onereactapp.client”，然后点击“确定”即可，如下图所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250322225623359-2124864218.png">
添加成功后，即可在“依赖项”项目中看到对客户端的引用，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250322225750717-144303011.png">
2. 编辑项目文件，在服务端项目上点击右键，在弹出的右键菜单中选择“编辑项目文件”，打开项目文件，请确保项目引用包含一个 <code><ReferenceOutputAssembly></code> 元素，其值设置为 <code>false</code>。如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250322230154834-2057760642.png">
3. 确保Program.cs文件中存在如下代码
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250322230452058-2103726469.png">
然后选择服务端项目“OneReactApp.Server”右键菜单点击“发布”，然后选择发布方案，如“文件夹”，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250322230752460-138990227.png">
然后点击“下一步”，选择目标发布的位置，默认为“bin\Release\net8.0\publish\”，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250322230933252-1398655871.png">
然后点击“完成”，创建项目发布文件，然后点击“关闭”，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250322231034973-1462457262.png">
然后点击“发布”按钮，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250322231213826-326405928.png">
发布成功后，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250322231317410-1494184818.png">
在“输出”窗口，也可以看到发布过程中输出的信息，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250322231433185-474319749.png">
发布成功，在文件夹里面，可以看到发布后的结果文件，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250322231616156-1371862887.png">
双击“OneReactApp.Server.exe”，提示缺少“wwwroot”目录，静态文件可能会不可用，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250322231830073-1183616104.png">
后来经过分析，发现客户端采用npm run build命令进行构建，在构建后，会在dist目录下生成静态文件，所以在服务端发布目录下，创建wwwroot目录，并将dist目录下的文件拷贝过来即可。
onereactapp.client\dist目录下的静态文件，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250323124034556-832901138.png">
复制到服务端发布目录下的文件结构，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250323124230046-1949393381.png">
再次双击“OneReactApp.Server.exe”后，显示运行正常，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250323124359120-820749669.png">
然后在浏览器中输入配置的http://localhost:5000即可访问，与在Visual Studio 2022中调试状态下输出内容一样，则表示发布成功，如下所示：
<img src="https://img2024.cnblogs.com/blog/1068941/202503/1068941-20250323124539602-991184372.png">
以上就是《ASP.NET Core WebApi+React UI开发入门详解》的全部内容，希望可以抛砖引玉，一起学习，共同进步。

</div>
<div id="MySignature" role="contentinfo">
<div id="AllanboltSignature">

<p style="border-top: #e0e0e0 1px dashed; border-right: #e0e0e0 1px dashed; border-bottom: #e0e0e0 1px dashed; border-left: #e0e0e0 1px dashed; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 30px; font-family: 微软雅黑; font-size: 12px" id="PSignature">
 

<img alt="" src="https://images.cnblogs.com/cnblogs_com/hsiang/1154298/o_115f1cd8.jpg" width="80px" height="80px">

作者：老码识途
 
出处：http://www.cnblogs.com/hsiang/
 
本文版权归作者和博客园共有，写文不易，支持原创，欢迎转载【点赞】，转载请保留此段声明，且在文章页面明显位置给出原文连接，谢谢。
 关注个人公众号，定时同步更新技术及职场文章
 

</div> 
来源：https://www.cnblogs.com/hsiang/p/18782180

頁: [1]

琼殿技术论坛's Archiver

ASP.NET Core WebApi+React UI开发入门详解