全球建筑设计网站,南昌网站建设方案推广,网站是怎么做的吗,做评测好的视频网站有哪些前言 在 ASP.NET 团队的 Github 的主页上#xff0c;有这样一个开源项目叫#xff1a;“JavaScriptsServices”#xff0c;那么什么是 JavaScriptsServices 呢#xff1f; 它又有什么用呢#xff1f; 下面就让我们一起来看一下吧。 什么是 JavascriptServices GitHub… 前言 在 ASP.NET 团队的 Github 的主页上有这样一个开源项目叫“JavaScriptsServices”那么什么是 JavaScriptsServices 呢 它又有什么用呢 下面就让我们一起来看一下吧。 什么是 JavascriptServices GitHubhttps://github.com/aspnet/JavaScriptServices JavascriptServices 是微软提供给 ASP.NET Core 开发者的一项技术如果你使用的是 Angular2ReactKnockout等这些Javascript技术之一的话 他提供了一些基础的程序集供开发者来很方便的调用Javascript同时你可以很方便的整合 NodeJS 代码到你的ASP.NET Core应用程序中。 JavascriptServices 是提供给开发者一套工具目前已经以NuGet包的形式释出主要包括这三个程序集Microsoft.AspNetCore.NodeServicesMicrosoft.AspNetCore.SpaServicesMicrosoft.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 TaskIActionResult Get([FromServices] INodeServices nodeServices) { var result await nodeServices.InvokeAsyncint(./Node/addNumbers, 1, 2); return Content(1 2 result);}
} 这里使用的是 [FromServices] 解析的INodeServices接口来供我们使用调用Node Javascript。然后我们再看一下InvokeAsyncT他是一个异步的方法通过传入一个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: {controllerHome}/{actionIndex}/{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、ReactRedux 等的ASP.NET Core SPAs 示例模板。 npm install -g yo generator-aspnetcore-spanpm install -g webpack 然后创建项目 yo aspnetcore-spa 可以选择Angular2、Knockout、React、ReactRedux等来生成SPA项目生成完成后以开发环境方式启动项目 Windows: set ASPNETCORE_ENVIRONMENTDevelopmentdotnet run Linux 或 masOS export ASPNETCORE_ENVIRONMENTDevelopment
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跨平台或扫描二维码关注
