Vue.js与 ASP.NET Core 服务端渲染功能整合

站长资源 2024/11/28 佚名

2 0 1

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"color: #ff0000">实现 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="/UploadFiles/2021-04-02/bundle.client.js">

asp-prerender-module 属性用于指定要渲染的模块（在我们的例子中为 VueApp/renderOnServer）。我们可以使用 asp-prerender-data 属性指定一个将被序列化并发送到模块的默认函数作为参数的对象。
您可以从以下地址下载原文的示例代码：
http://github.com/mgyongyosi/VuejsSSRSample
总结
以上所述是小编给大家介绍的Vue.js与 ASP.NET Core 服务端渲染功能整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

asp.net,core,vue.js,服务端

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“Vue.js与 ASP.NET Core 服务端渲染功能整合”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

Vue.js与 ASP.NET Core 服务端渲染功能整合

Bootstrap table使用方法汇总

使用3D引擎threeJS实现星空粒子移动效果

评论“Vue.js与 ASP.NET Core 服务端渲染功能整合”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接