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 字符串注入渲染页面。

在此示例中,应用程序将展示一个消息列表,服务端只渲染最后两条消息(按日期排序)。可以通过点击“获取消息”按钮从服务端下载剩余的消息。

项目结构如下所示:

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

.

├── 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 共同使用。

?


1

2

3

4

5

6

7

8

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)。

?


1

2

3

import { app, store } from ‘./app‘;

store.replaceState(__INITIAL_STATE__);

app.$mount(‘.my-app‘);

Webpack 配置

为了创建 bundle,我们必须添加两个 Webpack 配置文件(一个用于服务端,一个用于客户端构建),不要忘了安装 Webpack,如果尚未安装,则:npm install -g webpack。

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

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__** 设置为从服务端发送的对象

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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 中。

?


1

2

3

4

5

6

7

8

9

10

11

@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 默认状态:

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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 应用的初始值。

?


1

2

3

4

5

6

7

@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 服务端渲染功能整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

原文链接:https://www.cnblogs.com/oopsguy/p/7837400.html

原文地址:https://www.cnblogs.com/dragon2017/p/9404311.html

时间: 2024-10-11 21:48:30

Vue.js与 ASP.NET Core 服务端渲染功能整合的相关文章

基于vue的nuxt框架cnode社区服务端渲染

nuxt-cnode 基于vue的nuxt框架仿的cnode社区服务端渲染,主要是为了seo优化以及首屏加载速度 线上地址 http://nuxt-cnode.foreversnsd.cngithub地址 https://github.com/Kim09AI/nu... 技术栈 vue vue-router vuex nuxt axios simplemde ES6/7 stylus 目录结构 ├─npm-shrinkwrap.json ├─nuxt.config.js # nuxt配置文件 ├

使用 PHP 来做 Vue.js 的 SSR 服务端渲染

对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/server-side-rendering 和 spatie/laravel-server-side-rendering适配 laravel 应用. 让我们一起来仔细研究一些服务端渲染的概念,权衡优缺点,然后遵循第一法则用 PHP 建立一个服务端渲染. 什么是服务端渲染 一个单页应用(通常也叫做 SPA

解析Nuxt.js Vue服务端渲染摸索

本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可.Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的.我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的

vue服务端渲染 同构渲染

引言 自JavaScript诞生以来,前端技术发展非常迅速.移动端白屏优化是前端界面体验的一个重要优化方向,Web 前端诞生了 SSR .CSR.预渲染等技术. 十年前,几乎所有网站都使用 ASP.Java.PHP 这类做后端渲染,但后来随着 jQuery.Angular.React.Vue 等 JS 框架的崛起,开始转向了前端渲染.2014年起又兴起了同构渲染,号称是未来,集成了前后端渲染的优点,当真如此? 我们先明确三个概念: 后端渲染:后端渲染指传统的 ASP.Java 或 PHP 的渲染

Vue服务端渲染和Vue浏览器端渲染的性能对比

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D

Vue 2.0 服务端渲染入门

1 什么是服务端渲染 SSR server side render 就是通过后端吐模板,而不是通过前端ajax获取数据,拼接字符串. 2 为什么需要SSR 需要SEO,因为爬虫不会等待ajax结果. 客户端网络慢,加载速度慢,影响用户体验. 3 另一种解决办法 预渲染 不是一次性下载整个单页应用,预渲染只是在构建时为了特定的路由生成特定的几个静态页面 你用webpack可以很简单地通过prerender-spa-plugin来添加预渲染 4 NodeJS编写Vue的SSR 首先npm insta

实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. 话不多说,我们分别来看两个Demo:(欢迎star 欢迎pull request) 1.浏

使用 Vue 2.0 实现服务端渲染的 HackerNews

Vue 2.0 支持服务端渲染 (SSR),并且是流式的,可以做组件级的缓存,这使得极速渲染成为可能.同时, 和 2.0 也都能够配合 SSR 提供同构路由和客户端 state hydration.vue-hackernews-2.0 是 Vue 作者在GitHub上面放的 Vue 2.0 的一个示例项目,结合 Express.vue-router & vuex 来构建,是很好的学习案例. Features Server Side Rendering Vue + vue-router + vue

追求极致的用户体验ssr(基于vue的服务端渲染)

首先这篇博客并不是ssr建议教程,需要ssr入门的我建议也不要搜索博客了,因为官网给出了详细的入门步骤,只需要step by step就可以了,这篇博客的意义是如何使用ssr,可能不同的人有不同的意见,我舍弃了ssr中的vuex和vue-router增加了redis,serverfetch等等实现了适合自己公司的业务,个人认为并不是所有的东西都值得吸收,对我来说我能用到的只是ssr将vue生成一个html和对应的js. 虾面我们来看看什么是服务端渲染? 官网给出的解释: Vue.js 是构建客户