ASP.NET Core loves JavaScript
前言
在 ASP.NET 团队的 Github 的主页上,有这样一个开源项目叫:“JavaScriptsServices”,那么
什么是 JavaScriptsServices 呢? 它又有什么用呢?
下面就让我们一起来看一下吧。
什么是 JavascriptServices
GitHub:https://github.com/aspnet/JavaScriptServices
JavascriptServices 是微软提供给 ASP.NET Core 开发者的一项技术,如果你使用的是 Angular2,React,Knockout等这些Javascript技术之一的话, 他提供了一些基础的程序集供开发者来很方便的调用Javascript,同时,你可以很方便的整合 NodeJS 代码到你的ASP.NET Core应用程序中。
JavascriptServices 是提供给开发者一套工具,目前已经以NuGet包的形式释出,主要包括这三个程序集:Microsoft.AspNetCore.NodeServices
,Microsoft.AspNetCore.SpaServices
,Microsoft.AspNetCore.AngularServices
。还有一个包叫ReactServices
,现在已经不需要它了,你可以使用SpaServices替代之。现在就来分别看一下这三个包吧。
必须的环境:
1、NodeJS 环境,可以在程序目录下使用node -v
,来查看是否具有Node环境。
2、ASP.NET Core 环境,可以在程序目录下使用 dotnet --version
,来查看是否具有 dotnet 环境。
NodeServices
NodeServices 是一个基础包,它主要是提供了在 .NET 程序 Server 端运行 Javascript 的功能,要做到这一点,他是利用了NodeJS 的环境。来看看怎么样使用吧。
首先新建一个 ASP.NET Core WebApi 项目,然后在项目根目录新建一个Node文件夹,然后添加一个 addNumbers.js
的文件,
文件内容如下:
module.exports = function (callback, first, second) { var result = first + second;callback(null /* error */, result);
};
这里有有个JS函数,它将在.NET 程序中被调用,通过传入一个 Node风格的回调函数和两个参数来计算结果。
在NodeJS中,一个 JS 文件即代表一个模块,module.exports
的意思是把当前函数作为一个对象提供出去以供调用。
然后在 Controller 文件夹新建一个 NodeController.cs
的文件。整个解决方案看起来是这个样子的:
为了使用 NodeServices,你需要 using Microsoft.AspNetCore.NodeServices
,然后在 Startup.cs 文件中的 ConfigureServices 方法添加如下:
public void ConfigureServices(IServiceCollection services){ // ... 其他代码 ...// 启用 Node Servicesservices.AddNodeServices();
}
现在,你就可以在 Action 中使用NodeServices库为我们提供的功能了,打开NodeController.cs
,修改如下:
using Microsoft.AspNetCore.NodeServices;[Route("api/[controller]")]public class NodeController : Controller{ public async Task<IActionResult> Get([FromServices] INodeServices nodeServices) { var result = await nodeServices.InvokeAsync<int>("./Node/addNumbers", 1, 2); return Content("1 + 2 = " + result);}
}
这里使用的是 [FromServices] 解析的INodeServices
接口来供我们使用调用Node Javascript。然后我们再看一下InvokeAsync<T>
(``),他是一个异步的方法,通过传入一个node.js脚本文件(模块),两个形参 来得到一个结果。
方法签名: Task InvokeAsync (string moduleName, params object[] args);
然后,我们使用 Postman 来测试一下:
结果符合预期,现在,我们已经在ASP.NET Core 程序中成功的调用了Node提供的Javascript脚本服务,是不是很方便。
SpaServices
SpaServices 这个包是基于 NodeServices 构建的,当你基于单页面应用(SPA)来构建应用程序的话,它为你提供了很多很有用的助手工具,像 路由助手(Routing)、服务端的预渲染(Pre-Rendering) 、Webpack中间件 、模块热替换(HMR)等。 下面来依次看一下:
Routing helper
在单页面应用程序中,也许你想同时配置服务端路由以及配置客户端路由,大多数时候,这两个路由系统将互不干扰独立运行。但是有些时候可能会有问题,就是怎么样识别404。
这个时候你可能就会用到 Routing helper ,它叫MapSpaFallbackRoute
, 它将帮助你更加方便的做这个工作。
app.UseStaticFiles();app.UseMvc(routes =>
{routes.MapRoute( name: "default", template: "{controller=Home}/{action=Index}/{id?}");routes.MapSpaFallbackRoute( name: "spa-fallback", defaults: new { controller = "Home", action = "Index" });
});
Pre-Rendering
你可以创建一个同构的(Isomorphic )JavaScript 服务器预渲染的应用。对于 isomorphic web app 可能了解的人不是特别多,就是说一套JS代码可能同时运行于服务端和客户端,是不是很有趣,利用这种技术有助于提高SEO(搜索引擎优化)和客户端性能。
Webpack
如果你正在使用 webpack,那么 SpaServices 里面的 webpack 中间件将简化你的开发过程,使用此中间件将会拦截webpack匹配的文件请求并且在内存中动态构建,然后直接到浏览器中。
HMR
使用这种技术,你可以减少大幅减少模块加载的时间,通过启用中间件的HMR支持,在你对磁盘上的文件(如 .ts/.html/.sass 等)做出更改的时候,会自动构建,然后会把结果推到浏览器上,你就不需要手动的去刷新浏览器了。
app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {HotModuleReplacement = true});
这个包还包含了很多其他的一些功能,有兴趣的可以去 github 了解一下。
AngularServices
AngularServices 主要提供了一些扩展的工具,包括一些验证助手,还有一些"cache priming"的功能。
示例模板
你可以通过 yeoman 工具来生成基于 Angular2、Knockout、React、React+Redux 等的ASP.NET Core SPAs 示例模板。
npm install -g yo generator-aspnetcore-spanpm install -g webpack
然后创建项目:
yo aspnetcore-spa
可以选择Angular2、Knockout、React、React+Redux等来生成SPA项目,生成完成后以开发环境方式启动项目:
Windows:
set ASPNETCORE_ENVIRONMENT=Developmentdotnet run
Linux 或 masOS:
export ASPNETCORE_ENVIRONMENT=Development
dotnet run
现在,你就可以感受一下基于 ASP.NET Core + SPA 的应用了。
试着对项目做更多你熟悉的操作吧:比如修改客户端资源(.ts, .tsx, .html),看看浏览器的变化吧。
总结
这是一套对于ASP.NET Core开发者来说非常方便的工具在构建 JavaScripts 应用程序服务时候,目前该库目前也在快速的迭代中,也许提供出来的这些功能只是一个开始……
原文地址:http://www.cnblogs.com/savorboard/p/dotnet-javascript-services.html
.NET社区新闻,深度好文,微信中搜索dotNET跨平台或扫描二维码关注
ASP.NET Core loves JavaScript相关推荐
- 使用ASP.NET Core、JavaScript和Angular防止CSRF攻击
目录 介绍 关于源代码 CSRF示例 攻击剖析 保护您的Web应用程序 CSRF攻击实战 防伪令牌 ASP.NET Core中的防伪 令牌生成:手动方式 令牌生成:自动方式 令牌验证 JavaScri ...
- 使用ASP.NET Core,JavaScript,PostegreSql和ChartJs的动态仪表板Web应用程序
目录 介绍 先决条件 创建项目架构 创建数据库 实现后端 一)创建DataAccess 1)创建实体和关系 2)设置数据库 3)创建存储库 II)实现应用逻辑 III)实现Web服务 IV)测试Web ...
- 在ASP.NET Core中使用Angular2,以及与Angular2的Token base身份认证
Angular2是对Angular1的一次彻底的,破坏性的更新. 相对于Angular1.x,借用某果的广告语,唯一的不同,就是处处都不同. 首先,推荐的语言已经不再是Javascript,取而代之的 ...
- 基于PaddleOCR实现AI发票识别的Asp.net Core应用
简要介绍 用户批量上传需要识别的照片,上传成功后,系统会启动Hangfire后台Job开始调用PaddleOCR服务返回结果,这个过程有点类似微服务的架构模型. PaddleOCR PaddleOCR ...
- ASP.NET Core Blazor WebAssembly 之 .NET JavaScript互调
Blazor WebAssembly可以在浏览器上跑C#代码,但是很多时候显然还是需要跟JavaScript打交道.比如操作dom,当然跟angular.vue一样不提倡直接操作dom:比如浏览器的后 ...
- ASP .NET Core Web MVC系列教程二:添加控制器
系列文章目录:ASP .NET Core Web MVC系列教程:使用ASP .NET Core创建MVC Web应用程序 上一个教程:ASP .NET Core Web MVC系列教程一:创建一个W ...
- asp.net core 教程(七)-异常处理、静态文件
Asp.Net Core-异常处理 Asp.Net Core-异常处理 在这一章,我们将讨论异常和错误处理.当 ASP.NET Core应用程序中发生错误时,您可以以各种不同的方式来处理.让我们来看看 ...
- diskgeniusv4.4.0_.NET Core 3.0及ASP.NET Core 3.0前瞻
(给DotNet加星标,提升.Net技能) 转自:LineZerocnblogs.com/linezero/p/netcore3 前几天微软发布了< .NET Core 3.0 Preview ...
- .NET Core 3.0 Preview 6中对ASP.NET Core和Blazor的更新
我们都知道在6月12日的时候微软发布了.NET Core 3.0的第6个预览版.针对.NET Core 3.0的发布我们国内的微软MVP-汪宇杰还发布的官翻版的博文进行了详细的介绍.具体的可以关注&q ...
最新文章
- 根据UE发送前导码时是否存在碰撞
- android ptrace注入
- 【ARM】Tiny4412裸板编程之异常
- 云计算具有什么平台_究竟什么是云计算?
- 属性总结(一):marker
- 根据实例说数据库设计(一)—— 人员管理
- Sentinel(十八)之注解支持
- ideadebug热更新_Spring Boot 在IDEA中debug时的hot deployment(热部署)
- 敢死队核心:{买了就涨指标}
- XMPP系列2:如何掌握XMPP协议
- SPSS安装以及如何解决can not create java virtual machine问题
- 浏览器极速模式和兼容模式差异
- linux目录结构全解,Linux目录结构详解(最全最详细版)
- 纯css制作导航下拉菜单
- 东京中文离线地图App上线
- 佐治亚理工计算机科学录取,佐治亚理工学院计算机科学专业排名第8(2020年USNEWS美国排名)...
- gis环境设置在哪_怎样解决GIS长距离母线筒的位移问题?
- android通知栏点击关闭,Android点击通知栏 ,移除通知
- yolov4-tiny使用jetson nano进行目标检测+tensorrt+CSI+USB摄像头检测
- 基于Keras的卷积神经网络模型预测--狗的品种识别