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