首頁  >  文章  >  web前端  >  Vue.js與 ASP.NET Core 服務端渲染功能

Vue.js與 ASP.NET Core 服務端渲染功能

小云云
小云云原創
2018-01-18 13:54:092604瀏覽

在前端使用 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>
 <p class="my-app" asp-prerender-module="VueApp/renderOnServer" asp-prerender-data="Model"></p>
 <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

#相關推薦:

#詳解React服務端渲染實例

Diy頁面服務端渲染解決方案_html/css_WEB-ITnose

Nuxt 的Vue.js 服務端渲染實作

#

以上是Vue.js與 ASP.NET Core 服務端渲染功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn