Asp.Net7 与 Vue3 组成的 BFF模式
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
大家好，我是没有好工作的后端开发工程师，兼云原生方向的运维，被社会毒打被迫学习前端，写文保平安。
介绍
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(); //new
var app = builder.Build();
app.UseSpaStaticFiles();
app.UseSpa((spa) => { });
app.MapControllers(); //new
app.Run();
第二. 修改Vue项目中的 App.vue
fetch(new Request("/good")).then(resp => {
if (resp.ok) {
resp.text().then(context =>{
console.log(context);
})
}
});
第三，得到结果
结论
调试：在开发环境下，配置地址为这个项目服务器地址。在生产环境下去掉服务器地址。
容器友好：起一个dockerfile 可以直接跑在容器中。（有需要我可以讲）
BFF模式）SPA安全：降低了在前端对后端的配置，大多数配置完全可以放在后端API中 。