如何使用来自 CMS 的服务器端渲染内容来补充 Vue.js?
Posted
技术标签:
【中文标题】如何使用来自 CMS 的服务器端渲染内容来补充 Vue.js?【英文标题】:How to hydrate Vue.js with server-side-rendered content from CMS? 【发布时间】:2018-03-28 01:31:20 【问题描述】:比方说,情况是这样的:
内容通过 WordPress 或 TYPO3 等“经典”CMS 进行管理 内容由 CMS 交付为完全呈现的 html 和 CSS在前端 Vue.js 应该用于与 UI 的所有交互。
尽管我阅读了大部分 vue 的文档以及页面 Vue.js Server-Side Rendering Guide 和 Usage in non-Node.js Environments,但我仍然不确定如何完成这项工作。
一个例子*
页面有一个组件,它基本上是一个产品列表。对于使用 javascript 的每个人,此列表都会在顶部添加一个过滤器。
现在,我从 CMS 获得完整的渲染列表,例如:
<div class="product-component">
<ul class="products">
<li data-id="1">Product 1</li>
<li data-id="2">Product 2</li>
<li data-id="3">Product 3</li>
</ul>
</div>
JavaScript 运行后应该如下所示:
<div id="product-component">
<form>
<select>
<option value="1">Show Product 1 only</option>
</select
</form>
<ul class="products"></ul>
</div>
Vue.js 中的组件可能是这样的:
<div id="product-component">
<form>
<!-- Vue.js logic for the filter -->
</form>
<ul class="products">
<li v-for="product in products">
product.name
</li>
</ul>
</div>
var vm = new Vue(
el: '#product-component',
data:
products: [
id: 1, name: 'Product 1',
id: 2, name: 'Product 2',
id: 3, name: 'Product 3',
],
filterCurrent: null,
);
现在我的问题是:
如何将 Vue.js 挂接到预渲染的模板中? 如何在运行时更新/注入 Vue.js 变量(尤其是data
)?
这意味着:如何将 CMS 中的产品列表获取到组件中?
由于列表和模板的那部分已经渲染,Vue.js 是否必须在初始化后重新渲染它?
Vue.js' Lifecycle 中如何表示?
最后但并非最不重要的一点:这样的设置是否可行?
*代码只是为了说明问题的伪代码。
【问题讨论】:
我不明白你为什么要挂钩到预渲染的代码。这不是 Vue 的真正概念。大多数大型框架(如 Wordpress)都有 API 来为您收集数据。通过这种方式,您可以简单地将这些数据转换为 JSON 并将其提供给您的组件。即使你可以挂钩到预渲染的代码,你所做的工作量也是两倍。 @Stephan-v 嗯,我不这么认为,例如TYPO3 有一个用于这种用例的 API。也不可能进行渐进增强,对吗?有没有另一种方法,我可以在服务器之间挂钩 Vue 的服务器端渲染?还是我坚持使用 jQuery 作为我唯一可以使用的框架? 嗨,您有没有为您的问题找到好的解决方案? 请参见此处了解类似(但不相同)的用例:***.com/questions/61043632/… 【参考方案1】:只要你在自己的扩展中,通过 JSON 渲染数据是没有问题的。 Vue.js 可以获取它们并接管前端渲染。
【讨论】:
这是一个旧线程,但作为一个 Vue 菜鸟,我仍然看不到答案。假设您的后端是 php,它正在生成这个 JSON。那么——使用 PHP 打印 Vue 组件?或者我们是说,加载页面然后使用 xhr 水合 Vue 组件?那将是两个 http 请求而不是一个,不是吗? 好的,这是对我自己上面评论的评论:router.vuejs.org/guide/advanced/data-fetching.html以上是关于如何使用来自 CMS 的服务器端渲染内容来补充 Vue.js?的主要内容,如果未能解决你的问题,请参考以下文章