如何使用来自 CMS 的服务器端渲染内容来补充 Vue.js？

Posted 2023-02-22

【中文标题】如何使用来自 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