当前位置 : 主页 > 编程语言 > 其它开发 >

.NET Core + React Antd Pro脚手架

来源:互联网 收集:自由互联 发布时间:2022-05-30
朋友有个小项目的需求,想要用.NET Core 做后端, 前端使用React Antd Pro,比较正常的前后端分离项目需求。 研究了一下发现dotnet 项目模板里面自带react框架,是可以直接使用的。 PS:非

朋友有个小项目的需求,想要用.NET Core 做后端,

前端使用React Antd Pro,比较正常的前后端分离项目需求。

研究了一下发现dotnet 项目模板里面自带react框架,是可以直接使用的。

PS:非服务端渲染,这里只是使用了Statis File中间件发布了前端页面。

框架依赖
  • dotnet core sdk 5.0
  • node 14.0 + npm
➜  RCTableAdminTemplate git:(master) dotnet new 
正在准备...
模板名                                           短名称             语言          标记                    
--------------------------------------------  --------------  ----------  ----------------------
Console Application                           console         [C#],F#,VB  Common/Console        
Class library                                 classlib        [C#],F#,VB  Common/Library        
Worker Service                                worker          [C#],F#     Common/Worker/Web     
MSTest Test Project                           mstest          [C#],F#,VB  Test/MSTest           
NUnit 3 Test Item                             nunit-test      [C#],F#,VB  Test/NUnit            
NUnit 3 Test Project                          nunit           [C#],F#,VB  Test/NUnit            
xUnit Test Project                            xunit           [C#],F#,VB  Test/xUnit            
MVC ViewImports                               viewimports     [C#]        Web/ASP.NET           
Razor Component                               razorcomponent  [C#]        Web/ASP.NET           
MVC ViewStart                                 viewstart       [C#]        Web/ASP.NET           
Razor Page                                    page            [C#]        Web/ASP.NET           
Blazor Server App                             blazorserver    [C#]        Web/Blazor            
Blazor WebAssembly App                        blazorwasm      [C#]        Web/Blazor/WebAssembly
ASP.NET Core Empty                            web             [C#],F#     Web/Empty             
ASP.NET Core Web App (Model-View-Controller)  mvc             [C#],F#     Web/MVC               
ASP.NET Core Web App                          webapp          [C#]        Web/MVC/Razor Pages   
ASP.NET Core with React.js and Redux          reactredux      [C#]        Web/MVC/SPA           
ASP.NET Core with Angular                     angular         [C#]        Web/MVC/SPA           
ASP.NET Core with React.js                    react           [C#]        Web/MVC/SPA           
Razor Class Library                           razorclasslib   [C#]        Web/Razor/Library     
ASP.NET Core Web API                          webapi          [C#],F#     Web/WebAPI            
ASP.NET Core gRPC Service                     grpc            [C#]        Web/gRPC              
dotnet gitignore file                         gitignore                   Config                
global.json file                              globaljson                  Config                
NuGet Config                                  nugetconfig                 Config                
Dotnet local tool manifest file               tool-manifest               Config                
Web Config                                    webconfig                   Config                
Solution File                                 sln                         Solution              
Protocol Buffer File                          proto                       Web/gRPC              

Examples:
    dotnet new mvc --auth Individual
    dotnet new nunit 
    dotnet new --help
    dotnet new mstest --help

在新文件下执行 “dotnet new react ” ,于是生成了以下项目

在这里可以看到

  • ClientApp 为标准React前端项目
  • 其他为正常的dotnet core项目文件

启动项目看一下

 

看起来基本没什么问题。

 


不过后端代码没有完整隔离在一个项目里面,看起来不太舒服,还是折腾一下。

所以,先搞个sln项目,在当前文件夹下面再创建一个src文件夹.

➜  DotnetReact dotnet new sln
已成功创建模板“Solution File”。
➜  DotnetReact pwd
/Users/liguobao/code/github.com/DotnetReact
➜  DotnetReact mkdir src

接着把所有的后端项目代码全部挪到src目录。

执行 "dotnet sln add src/DotnetReact.csproj "

项目文件到这里已经调整完成了。

但是,因为DotnetReact.csproj项目引用ClientApp有所变化,构建打包逻辑还需要调整一下。

打开DotnetReact.csproj文件。

找到 <SpaRoot>ClientApp\</SpaRoot> 节点,

将其修改为 <SpaRoot>..\ClientApp\</SpaRoot>

执行一下“dotnet build”,确认没什么问题,该有的数据都有了

➜  DotnetReact dotnet build .
用于 .NET 的 Microsoft (R) 生成引擎版本 16.11.2+f32259642
版权所有(C) Microsoft Corporation。保留所有权利。

  正在确定要还原的项目…
  已还原 /Users/liguobao/code/github.com/DotnetReact/src/DotnetReact.csproj (用时 181 ms)。
  DotnetReact -> /Users/liguobao/code/github.com/DotnetReact/src/bin/Debug/net5.0/DotnetReact.dll
  DotnetReact -> /Users/liguobao/code/github.com/DotnetReact/src/bin/Debug/net5.0/DotnetReact.Views.dll

已成功生成。
    0 个警告
    0 个错误

已用时间 00:00:07.63

执行 ‘dotnet publish’, 发现打包有点问题 :

后端DLL正常打包,

前端ClientApp项目构建正常,但是没被复制到发布目录。

认真研究了一波 stackoverflow.com/quest 之后确认,需要调整一下 ResolvedFileToPublish 配置。

将RelativePath调整为

 <RelativePath>./publish/%(DistFiles.Identity)</RelativePath>

然后重新dotnet publish 构建,确认ClientApp正常构建

不过如果只设置这里,默认是publish到 debug/xxx/publish文件夹的,

比较合适的办法是设置一下默认发布文件夹

在 DotnetReact.csproj 文件<PropertyGroup>节点下新增 <PublishDir>..\release</PublishDir>

完整节点数据如下

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>..\ClientApp\</SpaRoot>
    <PublishDir>..\release</PublishDir>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
  </PropertyGroup>

然后再执行 dotnet publish 即可默认发布到release文件夹下,一切正常。

 


最后把整个前端项目替换成Antd Pro的项目代码即可。

 


 

完事。

 

 

 

完整代码可见:

GitHub - liguobao/RCTableAdminTemplate: RCTableAdminTemplate

PS: 包含Dockerfile + gitlab ci + k8s deployment 部署文件

 

编辑于 2022-04-12 21:10
上一篇:如何获取网站的logo
下一篇:没有了
网友评论