フロントエンドで Vue.js を使用します。Vue のサーバー側レンダリングは、2 番目のバージョンまでサポートされていませんでした。 この例では、Vue.js のサーバー側レンダリング機能を ASP.NET Core と統合する方法を示します。 サーバー側では、ASP.NET Core API を提供する Microsoft.AspNetCore.SpaServices パッケージを使用しました。これにより、コンテキスト情報を使用して Node.js でホストされる JavaScript コードを呼び出し、結果の HTML 文字列をレンダリングされたページに挿入できます。
この例では、アプリケーションはメッセージのリストを表示し、サーバーは最後の 2 つのメッセージ (日付でソート) のみを表示します。残りのメッセージは、「メッセージを取得」ボタンをクリックしてサーバーからダウンロードできます。
プロジェクトの構造は次のとおりです:
. ├── 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 フォルダーの下にあり、ミューテーションとアクションを含む単純な Vuex ストアと、いくつかのその他のファイルの 2 つのコンポーネントがあります。次に、app.js、client.js、renderOnServer.js、server.js について説明します。
Vue.js サーバーサイド レンダリングを実装する
サーバーサイド レンダリングを使用するには、Vue アプリケーションから 2 つの異なるバンドルを作成する必要があります。1 つはサーバーサイド用 (Node によって実行される) .js) 、もう 1 つはブラウザーとクライアントで実行されるハイブリッド アプリ用です。
app.js
このモジュールで Vue インスタンスをブートストラップします。両方のバンドルで使用されます。
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
このサーバー バンドルのエントリ ポイントは、レンダー呼び出しから任意のデータをプッシュするために使用できるコンテキスト プロパティを持つ関数をエクスポートします。
client.js
クライアント バンドルのエントリ ポイント。ストアの現在の状態を INITIAL_STATE という名前のグローバル Javascript オブジェクト (プリレンダリング モジュールによって作成されます) に置き換え、アプリケーションを指定された要素 (.my-app)。
import { app, store } from './app';
store.replaceState(__INITIAL_STATE__);
app.$mount('.my-app');Webpack設定
バンドルを作成するには、2つの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 でサーバー バンドルを見つけることができます。クライアント バンドルを取得するには、webpack --config webpack.client.config.js を実行してください。関連する出力は /wwwroot/dist/bundle.client.js にあります。
バンドル レンダリングの実装
このモジュールは ASP.NET Core によって実行され、次の役割を果たします:
以前に作成したサーバー側バンドルのレンダリング
**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 部分を実装します
前に述べたように、Node.js でホストされている Javascript を簡単に呼び出すためのいくつかの TagHelpers を提供する Microsoft.AspNetCore.SpaServices パッケージを使用しました(内部では、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 (デモンストレーションのみを目的とした静的データ) から 2 つの最新のメッセージ (日付で逆順にソート) を取得し、Vuex ストア状態の初期化として使用される ClientState オブジェクトを作成します。
Vuex ストアのデフォルト状態:
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 アプリを取得したので、たった 1 つのステップ: 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/mgyonkyosi/VuejsSSRSample
関連推奨事項:
Diyページのサーバー側レンダリング Solution_html/css_WEB-ITnose
以上がVue.jsおよびASP.NET Coreのサーバーサイドレンダリング機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
