Asp.Net7 与 Vue3 组成的 BFF模式
2023-04-18 15:25:02 时间
大家好,我是没有好工作的后端开发工程师,兼云原生方向的运维,被社会毒打被迫学习前端,写文保平安。
介绍
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中 。
相关文章
- 【技术种草】cdn+轻量服务器+hugo=让博客“云原生”一下
- CLB运维&运营最佳实践 ---访问日志大洞察
- vnc方式登陆服务器
- 轻松学排序算法:眼睛直观感受几种常用排序算法
- 十二个经典的大数据项目
- 为什么使用 CDN 内容分发网络?
- 大数据——大数据默认端口号列表
- Weld 1.1.5.Final,JSR-299 的框架
- JavaFX 2012:彻底开源
- 提升as3程序性能的十大要点
- 通过凸面几何学进行独立于边际的在线多类学习
- 利用行动影响的规律性和部分已知的模型进行离线强化学习
- ModelLight:基于模型的交通信号控制的元强化学习
- 浅谈Visual Source Safe项目分支
- 基于先验知识的递归卡尔曼滤波的代理人联合状态和输入估计
- 结合网络结构和非线性恢复来提高声誉评估的性能
- 最佳实践丨云开发CloudBase多环境管理实践
- TimeVAE:用于生成多变量时间序列的变异自动编码器
- 具有线性阈值激活的神经网络:结构和算法
- 内网渗透之横向移动 -- 从域外向域内进行密码喷洒攻击