Vue.js与 ASP.NET Core 服务端渲染功能整合
http://mgyongyosi.com/2016/vuejs-server-side-rendering-with-aspnet-core/
原作者:mihály gyöngyösi
译者:oopsguy.com
我真的很喜欢在前端使用 vue.js,vue 服务端渲染直到第二个版本才被支持。 在本例中,我想展示如何将 vue.js 服务端渲染功能整合 asp.net core。 我们在服务端使用了 microsoft.aspnetcore.spaservices 包,该包提供 asp.net core api,以便于我们可以使用上下文信息调用 node.js 托管的 javascript 代码,并将生成的 html 字符串注入渲染页面。
在此示例中,应用程序将展示一个消息列表,服务端只渲染最后两条消息(按日期排序)。可以通过点击“获取消息”按钮从服务端下载剩余的消息。
项目结构如下所示:
. ├── vuejsssrsample | ├── properties | ├── references | ├── wwwroot | └── dependencies ├── controllers | └── homecontroller.cs ├── models | ├── clientstate.cs | ├── fakemessagestore.cs | └── message.cs ├── views | ├── home | | └── index.cshtml | └── _viewimports.cshtml ├── vueapp | ├── components | | ├── app.vue | | └── message.vue | ├── vuex | | ├── actions.js | | └── store.js | ├── app.js | ├── client.js | ├── renderonserver.js | └── server.js ├── .babelrc ├── appsettings.json ├── dockerfile ├── packages.json ├── program.cs ├── project.json ├── startup.cs ├── web.config ├── webpack.client.config.js └── webpack.server.config.js
正如你看到的,vue 应用位于 vueapp 文件夹下,它有两个组件、一个包含了一个 mutation 和一个 action 的简单 vuex store 和一些我们接下来要讨论的其他文件:app.js、client.js、 renderonserver.js、server.js。
实现 vue.js 服务端渲染
要使用服务端渲染,我们必须从 vue 应用创建两个不同的 bundle:一个用于服务端(由 node.js 运行),另一个用于将在浏览器中运行并在客户端上混合应用。
app.js
引导此模块中的 vue 实例。它由两个 bundle 共同使用。
import vue from 'vue'; import app from './components/app.vue'; import store from './vuex/store.js'; const app = new vue({ store, ...app }); export { app, store };
server.js
此服务端 bundle 的入口点导出一个函数,该函数有一个 context 属性,可用于从渲染调用中推送任何数据。
client.js
客户端 bundle 的入口点,其用一个名为 initial_state 的全局 javascript 对象(该对象将由预渲染模块创建)替换 store 的当前状态,并将应用挂载到指定的元素(.my-app)。
import { app, store } from './app'; store.replacestate(__initial_state__); app.$mount('.my-app');
webpack 配置
为了创建 bundle,我们必须添加两个 webpack 配置文件(一个用于服务端,一个用于客户端构建),不要忘了安装 webpack,如果尚未安装,则:npm install -g webpack。
webpack.server.config.js const path = require('path'); module.exports = { target: 'node', entry: path.join(__dirname, 'vueapp/server.js'), output: { librarytarget: 'commonjs2', path: path.join(__dirname, 'wwwroot/dist'), filename: 'bundle.server.js', }, module: { loaders: [ { test: /\.vue$/, loader: 'vue', }, { test: /\.js$/, loader: 'babel', include: __dirname, exclude: /node_modules/ }, { test: /\.json?$/, loader: 'json' } ] }, }; webpack.client.config.js const path = require('path'); module.exports = { entry: path.join(__dirname, 'vueapp/client.js'), output: { path: path.join(__dirname, 'wwwroot/dist'), filename: 'bundle.client.js', }, module: { loaders: [ { test: /\.vue$/, loader: 'vue', }, { test: /\.js$/, loader: 'babel', include: __dirname, exclude: /node_modules/ }, ] }, };
运行 webpack --config webpack.server.config.js, 如果运行成功,则可以在 /wwwroot/dist/bundle.server.js 找到服端 bundle。获取客户端 bundle 请运行 webpack --config webpack.client.config.js,相关输出可以在 /wwwroot/dist/bundle.client.js 中找到。
实现 bundle render
该模块将由 asp.net core 执行,其负责:
渲染我们之前创建的服务端 bundle
将 **window.__ initial_state__** 设置为从服务端发送的对象
process.env.vue_env = 'server'; const fs = require('fs'); const path = require('path'); const filepath = path.join(__dirname, '../wwwroot/dist/bundle.server.js') const code = fs.readfilesync(filepath, 'utf8'); const bundlerenderer = require('vue-server-renderer').createbundlerenderer(code) module.exports = function (params) { return new promise(function (resolve, reject) { bundlerenderer.rendertostring(params.data, (err, resulthtml) => { // params.data is the store's initial state. sent by the asp-prerender-data attribute if (err) { reject(err.message); } resolve({ html: resulthtml, globals: { __initial_state__: params.data // window.__initial_state__ will be the initial state of the vuex store } }); }); }); };
实现 asp.net core 部分
如之前所述,我们使用了 microsoft.aspnetcore.spaservices 包,它提供了一些 taghelper,可轻松调用 node.js 托管的 javascript(在后台,spaservices 使用 microsoft.aspnetcore.nodeservices 包来执行 javascript)。
views/_viewimports.cshtml
为了使用 spaservices 的 taghelper,我们需要将它们添加到 _viewimports 中。
@addtaghelper "*, microsoft.aspnetcore.spaservices" home/index public iactionresult index() { var initialmessages = fakemessagestore.fakemessages.orderbydescending(m => m.date).take(2); var initialvalues = new clientstate() { messages = initialmessages, lastfetchedmessagedate = initialmessages.last().date }; return view(initialvalues); }
它从 messagestore(仅用于演示目的的一些静态数据)中获取两条最新的消息(按日期倒序排序),并创建一个 clientstate 对象,该对象将被用作 vuex store 的初始状态。
vuex store 默认状态:
const store = new vuex.store({ state: { messages: [], lastfetchedmessagedate: -1 }, // ... }); clientstate 类: public class clientstate { [jsonproperty(propertyname = "messages")] public ienumerable<message> messages { get; set; } [jsonproperty(propertyname = "lastfetchedmessagedate")] public datetime lastfetchedmessagedate { get; set; } }
index view
最后,我们有了初始状态(来自服务端)和 vue 应用,所以只需一个步骤:使用 asp-prerender-module 和 asp-prerender-data taghelper 在视图中渲染 vue 应用的初始值。
@model vuejsssrsample.models.clientstate <!-- ... --> <body> <div class="my-app" asp-prerender-module="vueapp/renderonserver" asp-prerender-data="model"></div> <script src="~/dist/bundle.client.js" asp-append-version="true"></script> </body> <!-- ... -->
asp-prerender-module 属性用于指定要渲染的模块(在我们的例子中为 vueapp/renderonserver)。我们可以使用 asp-prerender-data 属性指定一个将被序列化并发送到模块的默认函数作为参数的对象。
您可以从以下地址下载原文的示例代码:
http://github.com/mgyongyosi/vuejsssrsample
总结
以上所述是小编给大家介绍的vue.js与 asp.net core 服务端渲染功能整合,希望对大家有所帮助
上一篇: 白发怎么能变黑发 不同发质的乌发秘方