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的问题