ng-alain / Ng Alain .netcore
Programming Languages
Projects that are alternatives of or similar to Ng Alain .netcore
ng-alain 与 .net core 搭配
本地启动
git clone --depth 1 https://github.com/cipchk/ng-alain-.netcore
cd be
dotnet run
cd fe
yarn
npm run hmr
写在前面
鉴于很多使用 ng-alain 都以 .net 为后端，以下我将以一个示例来描述 ng-alain 如何同 .net core 一起开发。示例以单个中后台项目为基准，对于多项目的应用大体相同，但整体目录结构当然不能以单个项目了，更多应该以多人开发为准。
所有源码，从 Github 中获取。
一、构建项目
1、构建
分为 ng-alain 和 .net core 两个部分，当然我推荐二者分开创建在一个根目录下，例如以一个 asdf 为项目名，创建一个 asdf 目录，然后分别使用以下方式构建一个完整的前后端：
md asdf
cd asdf
ng-alain
ng new asdf --style less
cd asdf
ng add ng-alain
此时，我们将 asdf/asdf 目录重命名另一个名称以便区分前后端：fe。
.net core
dotnet new webapi -o asdf
# 这里采用命令行，依然可以使用 vs 创建项目
同样，我们将 asdf/asdf 目录重命名另一个名称以便区分前后端：be。
示例的命名方式你可以使用你喜欢的风格。
最终我们的 asdf 项目的目录结构如下：
asdf
- be （后端 .net core）
- fe （前端 Angular）
2、运行
前后端分开自然，分别开启两个命令行，而 vscode 着实很方便，分别在 be 和 fe 目录下运行：
be: dotnet watch run
fe: npm run hmr
默认情况下分开可以通过 https://localhost:5001/api/values 和 http://localhost:4200/ 访问前后端。
IIS
其实若是使用 vs 创建项目，可以更友好的将后端绑定至某个域名下，配合修改 host 可以使开发环境更接近生产环境。当然啦，这一部分百度或博客园可以得到信息支持，这里不再赘述。
二、编写后端
我在浅谈Angular网络请求 描述过网络请求与用户认证相关的，以此为扩展，我们来尝试怎么实现这些细节。
.net core 也有中间件的概念，如同 Angular 拦截器。依然以一个网络请求流程式来描述这一过程，其大概如下：
- 使用拦截器，从 Header 获取用户 Token，并检查 Token 有效性
- 使用过滤器，检查请求体参数有效性
- 执行方法，并响应结果
- 使用拦截器处理统一异常处理
当然，这只是一个大概性，细节上可能需要处理得更多。
1、校验 Token
在 Startup.cs 增加一个简单通过 header 来获取 token 属性值，并进行校验有效性，最后再结果写入至 context.Items 里，这样整个请求只需要一次用户信息，后续直接使用 context.Items 来获取用户信息。
app.Use(async (context, next) => {
if (!context.Request.Path.ToString().StartsWith("/api/passport")) {
var _token = "";
if (context.Request.Headers.TryGetValue("token", out var tokens) && tokens.Count > 0) {
_token = tokens[0];
}
if (_token != "123456789") {
context.Response.StatusCode = 401;
return ;
}
var user = new User();
user.Id = 1;
user.Name = "cipchk";
context.Items.Add("token", _token);
context.Items.Add("user", user);
}
await next();
});
整段代码实现几个细节：
- 忽略所有
/api/passport开头用户 Token 校验 - 从 headers 获取
token值，并校验值- 若错误则直接返回
401不再执行后续动作
- 若错误则直接返回
- 获取
User信息并写入context.Items中，以后后续请求直接读取
此时，若再一次访问 https://localhost:5001/api/values 后端接收到的是一个 401 状态码。
2、统一异常处理
依然可以使用中间件的写法，但为了区分不同，这里采用过滤器的写法。
继承 ExceptionFilterAttribute 并重写 OnException 就可以简单的完成，ExceptionFilterAttribute 异常过滤器会在执行过程中若遇到 throw 时会被触发。
public class ExceptionAttribute : ExceptionFilterAttribute {
public override void OnException(ExceptionContext context) {
var res = context.HttpContext.Response;
res.StatusCode = 200;
res.ContentType = "application/json; charset=utf-8";
context.Result = new JsonResult(new {
msg = context.Exception.Message,
code = 503
});
}
}
最后，需要注册到整个应用里。
services.AddMvc(options => {
options.Filters.Add(new ExceptionAttribute());
})
3、PassportController
新建一个 PassportController.cs 文件，内容如下：
[Route("api/[controller]")]
[ApiController]
public class PassportController : ControllerBase
{
[HttpPost("login")]
public JsonResult Login(LoginRequest req)
{
if (req.email == "[email protected]" && req.password == "wodemima")
{
return Output(new LoginResponse
{
token = "123456789",
username = "cipchk",
email = req.email,
avatar = "https://ng-alain.com/assets/img/logo-color.svg"
});
}
throw new Exception("无效用户");
}
}
前面我们已经忽略对所有 /api/passport 开头的 URL 的用户 Token 校验，它是一个授权页理当如此。这里体现了两个细节：
- 若无效用户抛出一个错误
-
ExceptionAttribute会捕获到这个错误，并重新指定变更响应体内容 - 当然你依然可以使用
return new JsonResult(new { msg = "无效用户" });这种方式
-
- 若有效用户返回用户 Token 值
这里都是手工创建统一响应体，你依然可以利用过滤器或中间件来统一处理响应体为统一风格，而对于方法内永远都只返回一个 data 对应值。上述单纯只是一个示例，需要自行更进一步封装。
4、跨域问题
本文描述是前后端分开开发，因此开发过程中势必存在跨域请求的问题，一个简单的办法在 Startup.cs 里增加跨域代码：
#if DEBUG
app.UseCors(builder =>
{
builder.AllowAnyMethod()
.AllowAnyHeader()
.AllowAnyOrigin();
});
#endif
条件编译可以很好的解决生产和开发环境的不同，因为部署时我们将不存在跨域问题，后续会描述。
5、小结
到此，我们已经实现大部分 浅谈Angular网络请求 描述的功能，哪怕都是一个简化，但我们可以访问：
- https://localhost:5001/api/values 返回 401
- https://localhost:5001/api/passport/1 返回用户 Token
- https://localhost:5001/api/passport/2 返回无效用户异常
三、编写前端
ng-alain 默认是以尽可能接收生产环境项目的脚手架，诚如我在 浅谈Angular网络请求 描述的那样，不应该编写一个简单的 Hello World 请求来校验是否可用。
在开始之前，需要先了解 Angular 环境变更配置，它位于 fe/src/environments 目录中，每一个文件表示一种环境，他们有者相同参数，但其值可能各不同。
若是你跟着本文来做的话，那么相对应的是 environment.hmr.ts，我们修改这里的 SERVER_URL 值为 https://localhost:5001/api/。这是表示所有请求都会在请求URL前自动加上该地址。
1、APP_INITIALIZER
Angular 启用前我们能做的事只有这里，脚手架默认实现了 StartupService（位于：fe/src/app/core/startup/ 下），当然默认代码并不可用，我们将其修改为：
load(): Promise<any> {
// only works with promises
// https://github.com/angular/angular/issues/15088
return new Promise((resolve, reject) => {
this.httpClient.get('values').subscribe(
(res: any) => {
this.injector.get(NzMessageService).success(JSON.stringify(res));
},
() => {},
() => {
resolve(null);
},
);
});
}
这里请求是 api/values，但由于我们给 Angular 环境变量统一配置 URL 前缀，因此只需要一个简单的 values 为请求 URL。（注：若请求URL地址不是期望结果，需要重新运行 npm run hmr）
此时，你访问前端时会自动跳转至 /passport/login 登录页，这一切都是由于 @delon/auth 用户认证模块在管理的，我们没有写任何一行关于前端校验的代码。
2、登录页
登录示例页的大部分代码是可用的，但本文并不关心这一些，我们修改其中发送请求部分如下：
// mock http
this.loading = true;
this.http.post('passport/login', {
email: '[email protected]',
password: 'wodemima'
}).subscribe((res: any) => {
this.loading = false;
// 清空路由复用信息
this.reuseTabService.clear();
// 设置Token信息
this.tokenService.set({
token: res.data.token,
});
// 重新获取 StartupService 内容，若其包括 User 有关的信息的话
this.startupSrv.load().then(() => this.router.navigate(['/']));
// 否则直接跳转
// this.router.navigate(['/']);
});
请求 passport/1 返回用户 Token，并把 Token 值写入 TokenService 中，最后跳转至仪表盘页。
登录成功后，你还会接收到一个条 [ "value1", "value2" ] 的消息，这是来自 APP_INITIALIZER 产生的，至少表明我们能正常访问到 values，因为此时你会发现该主体的 Header 已经包含了 token: asdf 字样。
3、小结
关于前端部分我简略的描述，这里还有更多细节，例如：响应体直接返回 data 的内容，更多细节自行挖掘。
四、部署
示例中的 .net core 部分是单纯的 Web API 项目，由此不存在任何页面之说。而如何让 .net core 项目直接以 Angular 项目来访问呢？这需要解决两个问题。
- 前端打包至
wwwroot目录里 - .net core 默认以
index.html默认访问页
1、打包前端
这里一个简单的办法是修改 angular.json 的输出路径（当然也可以直接命令行里直接指定）：
"outputPath": "../be/wwwroot",
最后，执行：
npm run bash
打包后的文件会直接存放至 be/wwwroot 目录下。
2、打包后端
默认情况下需要开启静态资源访问能力并且指定默认页为 index.html，在 Startup.cs 增加：
var options = new DefaultFilesOptions();
options.DefaultFileNames.Clear();
options.DefaultFileNames.Add("index.html");
app.UseDefaultFiles(options);
app.UseStaticFiles();
此时，若你再访问 https://localhost:5001/ 会发现我们启动的是一个 ng-alain 项目。
而对于后端的打包，也非常简单：
dotnet publish -o ../dist
最终，直接将根目录下的 dist 部署至 Web 服务器上。
五、总结
本文算是对 浅谈Angular网络请求 进一步实践，虽然一切都采用简化的代码来解释，但总体的流程是等同的。
基于 .net core 为后端是出于群里反应很多项目都是使用 .net，可能是 .net framework 版本，但本质上是相同。示例我是以 vscode 编写，可能后端的格式会有些同 vs 不同。
（完）