ASP.NET CORE SPA SSR

1. 安装 asp.net core,vscode, node etc.

2. Asp.net core 自带的模板生成工具等

   1) Microsoft.AspNetCore.SpaTemplates 提供了一些基础模板(angular,react,knockout 等)

   2) Microsoft.AspNetCore.SpaServices :关于SpaTemplates生成的项目内部如何工作的,为SPA提供了很多有用得特性,如服务器端渲染及与webpack的集成等

   3) Microsoft.AspNetCore.NodeServices :关于SpaServices内部是如何工作的,为构造ASP.NET Core项目提供了一个快速健壮的在服务器端运行的方法

  以上提及的特性都能在github上找到:https://github.com/aspnet/JavaScriptServices 

  可以直接安装vs2017,里面包括了asp.net core https://visualstudio.microsoft.com/zh-hans/vs/whatsnew/?rr=https%3A%2F%2Fdevblogs.microsoft.com%2Faspnet%2Fbuilding-single-page-applications-on-asp-net-core-with-javascriptservices%2F


1.运行dotnet new(这里给出了很多实用的模板)


2.选择一个mvc的项目,运行dotnet new web

3.运行dotnet restore

4.为ASP.NET指定运行环境为development

     1)如果你是在windows下使用powershell: $Env:ASPNETCORE_ENVIRONMENT = "Development"

     2)如果你是在使用cmd : setx ASPNETCORE_ENVIRONMENT "Development" 并重启你的cmd使配置生效

     3)如果你在使用Mac/Linux:  export ASPNETCORE_ENVIRONMENT=Development

5. 执行 dotnet run把项目跑起来:

服务器端渲染:

    服务器端渲染会使得你的初始UI出现得更快,因为用户无须等待他们的浏览器下载,评估,及执行巨大的js文件,我们将在服务器端执行angular,react等组件,这也意味着及时在客户端禁止的js,也能够正常的渲染页面,从而也能保证你的网站能被搜素引擎抓取。

NodeServices:

    即使你不创建spa项目,它也能使你能在服务器端运行js,这也是SpaServices能工作的原因,比如如果你要在服务器端渲染一个angular或者React组件,通过使用NodeServices,会创建一个Node.js的实例,并且.net 提供了一个快速、健壮的方法调用它

   使用NodeServices:

   1. dotnet add package Microsoft.AspNetCoreNodeServices

   2. dotnet restore

   3. Startup.cs 添加 services.AddNodeServices(); (*可以添加不同配置,如允许debug: services.AddNodeServices(x=>x.LaunchWithDebugging = true))

4. 在 index control中添加引用 using Microsoft.AspNetCore.NodeServices

5. 在index方法中使用nodeService


  6.添加chartModule文件

     

7.在index.cshtml中直接输出

8.运行 dotnet run (后台执行完毕的js直接显示)

 9. Chart示例, npm install --save node-chartist

10. 在index controller中添加mock数据


11.改写chartModules.js 


12.在index.cshtml中引入对应css文件

13. 运行dotnet run


使用SapServices

    添加对其引用,并运行dotnet restore


添加对应TagHelper



安装npm包

1.npm init

2.npm install --save aspnet-prerendering

3. 在about页面加上对应代码


4. 添加一个ClientApp目录在此目录下新建boot-server.js

5. 编写一个测试用例:(引用aspnet-prerendering并返回一个Promise)

6:打开页面:


为此js文件添加初始化数据

1.使用asp-prerender-data


2. 在js文件中调用传过来的参数


3. 刷新页面






更进一步,使用ts:

1.npm install --save ts-loader typescript webpack

2.添加webpack配置文件


3. 添加tsconfig并把boot-server.js改成ts


4.将boot-server换成ts


5.执行webpack,编译后的文件已生成至ClientApp/dist目录下,main-server.js

6.更改about页面的引用为main-server(编译后文件)


7. 再次运行dotnet run





Reference:https://devblogs.microsoft.com/aspnet/building-single-page-applications-on-asp-net-core-with-javascriptservices/

https://github.com/wuzinong/JsLearning/tree/master/DotNetCoreSingleApplication/ServerSideRendering

你可能感兴趣的:(ASP.NET CORE SPA SSR)