如何使用来自 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?的主要内容,如果未能解决你的问题,请参考以下文章

后端开发者的Vue学习之路

(十八)补充-Vue3中插槽的使用

SSR服务端渲染

基于Gatsby的React静态化实践

vue06 基础-列表渲染

如何在服务器端做出反应来渲染图像?