Asp .Net Core Spa (一) - 入门

第一次写文章, 很久之前就想写来着了, 文章哪里不清楚的, 也请多多提出意见。

最近发现用 .net core + spa (single page application) 这个组合的人也变多了, 所以写一套 各种 关于 这个组合的实践方案, 也算是留个记录。

主要针对 .net core 2.1 以后的版本。主要原因是 之前的版本 spa 的实现还是基于 mvc 的pipeline 但是在 .net core 2.1 之后 引入了 UseSpa 这个 中间件后 Spa 已经完成了和mvc的分离 包括 SSR (服务端渲染)。

这是第一篇 入门 主要讲解 .net core 的 基础 spa 模版。项目案例用的 React， Angular 和 Vue 也类似， 不过Vue 貌似没有和Cli的整合 API

1. 创建项目

新项目 -> .Net Core -> ASP .NET Core Web Application -> React.js (暂时不选 Redux, Redux 很重要 但是几个框架都有自己不同的状态管理)

这里用的 Core 2.2 和 2.1 没什么太大变化

2. 项目目录

.Net Core Spa 项目，和NodeJs 项目类似，不过以 .Net Core为服务端。 主要服务 包括 静态文件，API 和 服务器渲染

./ClientApp Spa项目

./ClientApp/public Spa静态资源

./ClientApp/build Spa静态发布文件

3. 中间件和设置

主要套路都在这里

1. 定义Spa静态文件根目录，这里的文件 将被注册到Spa静态文件路由

services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/build";
});

,默认是用的是 CientApp/build. 所有在 这个文件夹下的文件 会被直接 映射到 root url 之下

例如: ClientApp/build/react.js 这个文件就会被 映射到 localhost:5000/react.js

2. 使用Spa静态文件服务

app.UseSpaStaticFiles();

这个中间件将会启用静态文件映射

3. 使用Spa网页

app.UseSpa(spa =>
{
    spa.Options.SourcePath = "ClientApp";
    if (env.IsDevelopment())
    {
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

这个就是代替了mvc 渲染 spa的中间件了，在没有服务器渲染的时候，我们定义了默认的SourcePath。

主要利用于跑node指令，和index.html入口无关，默认网页入口是 Spa静态文件根目录/index.html

当然 这里例子用的是 UseReactDevelopmentServer 这个必须配合 create-react-app (react-script)使用， 他会创建一个node event 然后监控 console

当react-script 启动的时候 会自动和 .net core产生proxy， 使你的.net core localhost 可以看见spa的页面，不过编译速度很慢。推荐关闭 使用 webpack-dev-server + api proxy 来提高开发速度

5. 修改中间件管道

默认的中间件管道并不是很完美，因为mvc中间件的性质 一旦请求进入了mvc中间件，请求是不会走道后面的中间件的。

这里就要修改中间件顺序啦。。然后利用到我们伟大的 app.Map 和 app.MapWhen

app.UseHttpsRedirection();

app.Map("/api", apiApp => {
    apiApp.UseMvc(routes => routes.MapRoute("default", "{controller}/{action=Index}/{id?}"));
});

app.UseStaticFiles();
app.UseSpaStaticFiles();

我们把中间件改成这样，用Map 来限制 只有 /api 的路由才能进入 mvc中间件，当然用MapWhen也是可以的.

两者主要区别就在:

1. Map只针对Url，而MapWhen侧可以对整个请求作出判断

2. Map之后的Url会切除Map到的路由，而MapWhen则不变

我上面这个例子 在Map 检测到 /api 后才会进入mvc, 但是进入mvc的时候 api其实已经被去掉了, 所以controller不再需要强制标明 api/[controller], 只需要 [controller] 即可

6. csproj

其实有很多编译或者发布指令是通过项目的.csproj 来实现的

默认的指令有 DebugEnsureNodeEnv 和 PublishRunWebpack 分别是 npm install 和 npm install & run build

小结

项目本身其实很简单，也很容易上手，配合mvc 搭建的api 和新一代的前端框架，.net core的性能和发布的简易型，其实是可以尝试的。

这里有个我一直在更新的Boilerplate项目 https://github.com/JiarongGu/ReactCoreTemplate

一篇一篇来吧。。下一篇就说说 SSR的问题