如何为 Headless CMS 构建 Vue 前端

fatimakanij204

在本指南中，我们将学习如何使用 Vue.js 和GraphCMS（一个无头 CMS 平台）构建现代博客网站。 Backward Skip 10s Play Video Forward Skip 10s 如果您今天想创建一个快速博客，我的建议是直接使用 WordPress。 但是，如果您是媒体巨头并且希望将内容尽快传送到多个设备，该怎么办？您可能还需要将您的内容与广告和其他第三方服务集成。好吧，您可以使用 WordPress 来做到这一点，但您会在该平台上遇到一些问题。 您需要安装插件来实现附加功能。您安装的插件越多，您的网站就会变得越慢。 与大多数 JavaScript Web 框架相比，PHP 相当慢。从开发人员的角度来看，在 JavaScript 驱动的前端上实现自定义功能要容易得多、快捷得多。 在浏览器加载测试中，JavaScript 的性能优于 PHP。

此外，在快速构建新的 Web 体验方面，现代 JavaScript 及其生态系统提供了更加愉快的开发体验。 想从头开始学习 Vue.js 吗？本文摘自我们的高级库。使用 SitePoint Premium 获取涵盖基础知识、项目、技巧和工具等的完整 Vue 书籍合集。立即加入，每月仅需 9 美元。 Learn to Code with JavaScript 因 黎巴嫩电话号码表 此，无头 CMS解决方案不断增长——它们只是管理内容的后端。通过这种方法，开发人员可以专注于使用他们选择的 JavaScript 框架构建快速且交互式的前端。自定义 JavaScript 驱动的前端比在 WordPress 网站上进行更改要容易得多。 GraphCMS 与大多数 Headless CMS 平台的不同之处在于，它不是通过 REST 交付内容，而是通过 GraphQL 交付内容。这项新技术优于 REST，因为它允许我们在单个请求中构建涉及属于多个模型的数据的查询。



考虑以下模型架构： 邮政 身份证号 标题：字符串 内容：字符串 comments ：评论数组 评论 身份证号 名称： 字符串 消息：字符串 上述模型具有一对多（评论）关系。让我们看看如何获​​取附加有所有链接评论记录的单个帖子记录。 如果数据位于关系数据库中，则必须构造一条低效的 SLQ 语句或两条 SQL 语句来干净地获取数据。如果数据存储在 NoSQL 数据库中，您可以使用Vuex ORM等现代 ORM轻松获取数据，如下所示： const post = Post.query() .with('comments') .find(1); Learn to Code with JavaScript 非常简单！您可以轻松地通过 REST 将此数据传递给目标客户端。但问题是：每当客户端的数据需求发生变化时，您将被迫返回后端代码来更新现有的 API 端点，或者创建一个提供所需数据集的新端点。这个来来回回的过程既累人又重复。