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

日期：2020-05-11 栏目：程序人生浏览：次

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

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

相关推荐