Asp.Net7 与 Vue3 组成的 BFF模式

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

Asp.Net7 与 Vue3 组成的 BFF模式

2023-01-30 11:57:49 来源：博客园

(资料图)

大家好，我是没有好工作的后端开发工程师，兼云原生方向的运维，被社会毒打被迫学习前端，写文保平安。

介绍

BFF 模式 Backend For Frontend（服务于前端的后端）初看我们会感觉它是MVC，因为它与BFF都是带有后端的前端不一样的是BFF是针对于SPA项目（SPA 是单页应用程序，如我们常用的Vue3）

这种带有后端的前端，有一个好的特性，保护好了前端的安全。前端的安全性：比如要保护发送给后端的一个Key和加密解密的过程。纯前端的话要把KEY放在JS中是很不安全的。

如何在ASP.NET7里使用Vue3？

第一,创建空白ASP.NETCore项目，名叫SPA。(忽略

第二,在项目中引入Vue3项目

可以在当前项目下创建，如下图所示我们需要创建一个Vue3的项目，这里使用NPM安装。我给它命名为ClientApp。
也可以在当前项目下创建客户端文件夹,把已经写好的Vue3项目复制进来。

第三,安装微软官方提供的SPA包。

Microsoft.AspNetCore.SpaServices.Extensions

第四,修改Program.cs文件。

var builder = WebApplication.CreateBuilder(args);builder.Services.AddSpaStaticFiles(configuration => configuration.RootPath = "ClientApp/dist");var app = builder.Build();app.UseSpaStaticFiles();app.UseSpa((spa) => { });app.Run();

这个 configuration.RootPath = "ClientApp/dist" dist是生产环境的文件夹，是需要生成的出来的。

第五，得到结果。

生成Vue3项目。
执行当前.NET项目

结论:

可以只复制dist文件夹，到项目中。开发环境，建议还是运行 npm run dev，不建议使用 .NET编译生成环境的SPA。生产环境或者多项目在VS2022快速协作调试，可以使用 npm run build 生成 dist 文件夹使用。

如何在ASP.NET7的SPA项目中使用本地API，组成BFF模式？

答案很简单，在此项目中我们可以使用控制器，中间件。演示一个控制器的。

第一. 创建一个控制器

修改Program.cs

var builder = WebApplication.CreateBuilder(args);builder.Services.AddSpaStaticFiles(configuration => configuration.RootPath = "ClientApp/dist");builder.Services.AddControllers(); //newvar app = builder.Build();app.UseSpaStaticFiles();app.UseSpa((spa) => { });app.MapControllers(); //newapp.Run();

第二. 修改Vue项目中的 App.vue

fetch(new Request("/good")).then(resp => {  if (resp.ok) {    resp.text().then(context =>{      console.log(context);    })  }});

第三，得到结果

结论

调试：在开发环境下，配置地址为这个项目服务器地址。在生产环境下去掉服务器地址。容器友好：起一个dockerfile 可以直接跑在容器中。（有需要我可以讲）BFF模式）SPA安全：降低了在前端对后端的配置，大多数配置完全可以放在后端API中。

关键词：生产环境服务器地址开发环境