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的問題