如何为无头CM构建VUE前端

构建现代化高效博客平台：Vue.js与GraphCMS的完美结合

核心要点:

• 利用Vue.js和GraphCMS构建现代化、高效的博客平台，充分发挥JavaScript的速度和灵活性以及GraphQL强大的查询功能。
• 选择GraphCMS是因为它能够通过GraphQL提供内容，这在效率上优于传统的REST，因为它允许复杂的查询在一个请求中从多个模型中提取数据。
• 使用Vue CLI设置你的Vue.js项目，包含Babel和Router等基本功能，并使用Bootstrap-Vue和Axios增强UI组件以进行API交互。
• 在Vue.js中实现动态路由以处理各种内容类别和单个文章视图，确保无缝的用户导航体验。
• 通过构建根据类别或单个slug检索文章的GraphQL查询，并将这些查询集成到Vue.js组件中，从GraphCMS获取和显示文章。
• 使用GraphQL变异来创建新评论并即时更新UI而无需页面重新加载，从而扩展博客的交互功能，例如评论系统。

本指南将指导你如何使用Vue.js和GraphCMS（一个无头CMS平台）构建现代化的博客网站。

如果你想今天就快速启动一个博客，我建议你直接使用WordPress。

但是，如果你是一个媒体巨头，并且希望以最快的速度将你的内容传递到多个设备呢？你可能还需要将你的内容与广告和其他第三方服务集成。你可以用WordPress做到这一点，但是你会遇到这个平台的一些问题。

1. 你需要安装插件来实现附加功能。你安装的插件越多，你的网站速度就越慢。
2. 与大多数JavaScript Web框架相比，PHP相当慢。从开发人员的角度来看，在基于JavaScript的前端实现自定义功能要容易得多、也快得多。

在浏览器加载测试中，JavaScript的性能优于PHP。此外，现代JavaScript及其生态系统在快速构建新的Web体验方面提供了更愉悦的开发体验。

想从头开始学习Vue.js吗？这篇文章摘自我们的高级库。立即加入SitePoint Premium，即可获得涵盖基础知识、项目、技巧和工具等的Vue书籍全集，每月只需9美元。

因此，无头CMS解决方案（这只是用于管理内容的后端）的数量有所增长。通过这种方法，开发人员可以使用他们选择的JavaScript框架专注于构建快速且交互式的前端。自定义基于JavaScript的前端比更改WordPress网站要容易得多。

GraphCMS与大多数无头CMS平台的不同之处在于，它不是通过REST提供内容，而是通过GraphQL提供内容。这项新技术优于REST，因为它允许我们构建查询，这些查询在一个请求中涉及属于多个模型的数据。

考虑以下模型模式：

文章

• id：数字
• 标题：字符串
• 内容：字符串
• 评论：评论数组

评论

• id：数字
• 姓名：字符串
• 消息：字符串

上述模型具有一对多（文章对评论）的关系。让我们看看如何获取附加了所有链接评论记录的单个文章记录。

如果数据位于关系数据库中，则必须构造一个低效的SQL语句，或者构造两个SQL语句才能干净地获取数据。如果数据存储在NoSQL数据库中，则可以使用像Vuex ORM这样的现代ORM来轻松为你获取数据，如下所示：

<code class="language-javascript">const post = Post.query()
  .with('comments')
  .find(1);</code>

非常简单！你可以轻松地通过REST将此数据传递给目标客户端。但问题是：每当客户端的数据需求发生变化时，你都将被迫返回你的后端代码来更新你现有的API端点，或者创建一个提供所需数据集的新端点。这种来回的过程既费力又重复。

如果在客户端级别，你可以只请求你需要的数据，而无需你做额外的工作，后端就会为你提供数据？嗯，这就是GraphQL的用途。

先决条件

在我们开始之前，我想指出，本指南适用于中级到高级用户。我不会讲解基础知识，而是向你展示如何使用GraphCMS作为后端快速构建Vue.js博客。你需要精通以下领域：

• ES6和ES7 JavaScript
• Vue.js（使用CLI版本3）
• GraphQL

这就是你开始本教程所需了解的一切。此外，使用REST的背景知识将非常有用，因为我将经常引用它。如果你想复习一下，这篇文章可能会有帮助：“REST 2.0来了，它的名字叫GraphQL”。

关于项目

我们将构建一个非常简单的博客应用程序，并带有一个基本的评论系统。以下是可以访问以查看已完成项目的链接：

• CodeSandbox.io演示
• GitHub仓库

请注意，演示中使用了只读令牌，因此评论系统将无法工作。你需要根据本教程中的说明提供你的OPEN权限令牌和端点才能使其工作。

创建GraphCMS项目数据库

前往GraphCMS网站，然后单击“免费开始构建”按钮。你将被带到他们的注册页面。

使用你首选的方法注册。完成帐户身份验证和验证过程后，你应该能够访问主仪表板。

在上面的示例中，我已经创建了一个名为“BlogDB”的项目。继续创建一个新项目，并随意命名。输入名称后，可以将其余字段保留为默认值。单击创建，你将进入他们的项目计划。

在本教程中，选择免费的开发者计划，然后单击继续。你将进入项目的仪表板，如下所示：

转到模式选项卡。我们将创建以下模型，每个模型都有以下字段：

类别

• 名称：单行文本，必填，唯一

文章

• slug：单行文本，必填，唯一
• 标题：单行文本，必填，唯一
• 内容：多行文本

评论

• 姓名：单行文本，必填
• 消息：多行文本，必填

使用创建模型按钮创建模型。在右侧，你应该找到一个用于字段的隐藏面板，可以通过单击字段按钮激活它。将适当的字段类型拖放到模型的面板上。你将看到一个表单，用于填写字段的属性。请注意，底部有一个粉红色的按钮，标记为高级。单击它将展开面板，为你提供更多可以启用的字段属性。

接下来，你需要按如下方式添加模型之间的关系：

• 文章 > 类别（多对多）
• 文章 > 评论（一对多）

使用引用字段定义此关系。你可以在任何一方添加此字段；GraphCMS将自动在引用的模型中创建相反的关系字段。完成模型定义后，你应该拥有如下内容：

你现在已经完成了第一部分。现在让我们为我们的模型提供一些数据。

GraphQL数据迁移

要向模型添加内容，你可以简单地单击项目仪表板中的内容选项卡，你可以在其中为每个模型创建新记录。但是，如果你发现这是一种缓慢的方法，你会很高兴知道我已经创建了一个GraphCMS迁移工具，它可以从CSV文件复制数据并将其上传到你的GraphCMS数据库。你可以在这个GitHub存储库中找到该项目。要开始使用该项目，只需将其下载到你的工作区，如下所示：

<code class="language-javascript">const post = Post.query()
  .with('comments')
  .find(1);</code>

接下来，你需要从仪表板的设置页面获取你的GraphCMS项目的API端点和令牌。你需要创建一个新的令牌。对于权限级别，使用OPEN，因为这将允许该工具对你的GraphCMS数据库执行读取和写入操作。创建一个名为.env的文件并将其放在项目的根目录下：

<code class="language-bash">git clone git@github.com:sitepoint-editors/graphcsms-data-migration.git
cd graphcsms-data-migration
npm install</code>

接下来，你可能需要使用你自己的数据填充data文件夹中的CSV文件。以下是一些已使用的示例数据：

<code>ENDPOINT=<你的API端点>
TOKEN=<你的OPEN权限令牌></code>

你可以根据需要更改内容。确保不要触摸顶行，否则你会更改字段名称。请注意，对于categories列，我已经使用管道|字符作为分隔符。

要将CSV数据上传到你的GraphCMS数据库，请按以下顺序执行以下命令：

<code>// Categories.csv
name
Featured
Food
Fashion
Beauty

// Posts.csv
title,slug,content,categories
Food Post 1,food-post-1,Breeze through Thanksgiving by making this Instant Pot orange cranberry sauce,Food|Featured
Food Post 2,food-post-2,This is my second food post,Food
Food Post 3,food-post-3,This is my last and final food post,Food
Fashion Post 1,fashion-post-1,This is truly my very first fashion post,Fashion|Featured
Fashion Post 2,fashion-post-2,This is my second fashion post,Fashion
Fashion Post 3,fashion-post-3,This is my last and final fashion post,Fashion
Beauty Post 1,Beauty-post-1,This is truly my very first Beauty post,Beauty|Featured
Beauty Post 2,Beauty-post-2,This is my second beauty post,Beauty</code>

每个脚本都将打印出已成功上传的记录。我们首先上传类别的原因是为了让文章记录能够成功链接到现有的类别记录。

如果你想清理你的数据库，你可以运行以下命令：

<code class="language-bash">npm run categories
npm run posts</code>

此脚本将删除所有模型的内容。你将收到一份报告，指示每个模型删除了多少条记录。

我希望你发现这个工具很方便。返回仪表板以确认文章和类别的数

据已成功上传。

后端已处理完毕，让我们开始构建我们的前端博客界面。

使用Vue.js构建博客的前端

如前所述，我们将构建一个由GraphCMS数据库后端支持的非常简单的博客应用程序。启动终端并导航到你的工作区。

如果你还没有安装Vue CLI，现在就安装：

<code class="language-bash">npm run reset</code>

然后创建一个新项目：

<code class="language-bash">npm install -g @vue/cli</code>

选择手动选择功能，然后选择以下选项：

• 功能：Babel，Router
• 路由历史模式：Y
• 仅使用错误预防的ESLint
• 保存时进行棉绒检查
• 配置文件位置：专用配置文件
• 保存预设：你的选择

项目创建过程完成后，更改到项目目录并安装以下依赖项：

<code class="language-bash">vue create vue-graphcms</code>

要在我们的项目中设置Bootstrap-Vue，只需打开src/main.js并添加以下代码：

<code class="language-bash">npm install bootstrap-vue axios</code>

接下来，我们需要开始构建项目结构。在src/components文件夹中，删除现有文件并创建这些新文件：

• CommentForm.vue
• CommentList.vue
• Post.vue
• PostList.vue

在src/views文件夹中，删除About.vue并创建一个名为PostView.vue的新文件。从演示中可以看出，我们将有几个类别页面，每个页面都显示按类别过滤的文章列表。从技术上讲，只有一个页面将根据活动路由名称显示不同的文章列表。PostList组件将根据当前路由过滤文章。

让我们首先设置路由。打开src/router.js并将现有代码替换为此代码：

<code class="language-javascript">const post = Post.query()
  .with('comments')
  .find(1);</code>

现在我们有了路由，让我们设置导航菜单。打开src/App.vue并将现有代码替换为此代码：

<code class="language-bash">git clone git@github.com:sitepoint-editors/graphcsms-data-migration.git
cd graphcsms-data-migration
npm install</code>

这将在我们网站的顶部添加一个导航栏，其中包含指向我们不同类别的链接。

保存文件并相应地更新以下文件：

src/views/Home.vue

<code>ENDPOINT=<你的API端点>
TOKEN=<你的OPEN权限令牌></code>

src/components/PostList.vue

<code>// Categories.csv
name
Featured
Food
Fashion
Beauty

// Posts.csv
title,slug,content,categories
Food Post 1,food-post-1,Breeze through Thanksgiving by making this Instant Pot orange cranberry sauce,Food|Featured
Food Post 2,food-post-2,This is my second food post,Food
Food Post 3,food-post-3,This is my last and final food post,Food
Fashion Post 1,fashion-post-1,This is truly my very first fashion post,Fashion|Featured
Fashion Post 2,fashion-post-2,This is my second fashion post,Fashion
Fashion Post 3,fashion-post-3,This is my last and final fashion post,Fashion
Beauty Post 1,Beauty-post-1,This is truly my very first Beauty post,Beauty|Featured
Beauty Post 2,Beauty-post-2,This is my second beauty post,Beauty</code>

请注意，在PostList组件中，我们使用自定义观察器来根据当前URL更新我们的category数据属性。

现在我们可以进行快速测试以确认路由是否正常工作。使用命令npm run serve启动Vue.js服务器。在localhost:8080处打开浏览器并测试每个导航链接。category属性应该输出我们在route name属性中定义的相同值。

从GraphCMS提取数据

现在我们的路由代码已经可以工作了，让我们看看如何从我们的GraphCMS后端提取信息。在项目的根目录下，创建一个env.local文件并使用以下字段的值填充它：

<code class="language-bash">npm run categories
npm run posts</code>

请注意，Vue.js单页应用程序仅加载以VUE_APP开头的自定义环境变量。你可以从你的GraphCMS仪表板设置页面找到API端点和令牌。对于令牌，请确保创建一个具有OPEN权限的令牌，因为它将允许读取和写入操作。接下来，创建文件src/graphcms.js并复制以下代码：

<code class="language-bash">npm run reset</code>

我们刚刚创建的这个辅助文件提供了两个主要功能：

• 它创建了一个axios实例，该实例配置为对你的GraphCMS后端执行授权请求。
• 它包含本项目中使用的GraphQL查询和变异。它们负责获取文章（按类别或按slug），以及创建新评论。如果你想了解更多关于GraphQL查询和变异的信息，请查阅GraphQL文档。

你也可以使用项目仪表板中的API资源管理器来测试这些查询和变异。为此，请从上面的代码中复制查询或变异，并将其粘贴到API资源管理器的顶部窗口中。在下面的窗口中输入任何查询变量，然后点击播放按钮。你应该在右侧的新窗格中看到结果。

这是一个查询示例：

这是一个变异示例：

在模板中显示数据

现在，让我们在src/components/PostList.vue中创建HTML模板，它将以简洁的方式显示文章列表。我们还将添加axios代码，该代码将从我们的GraphCMS数据库中提取文章数据：

<code class="language-javascript">const post = Post.query()
  .with('comments')
  .find(1);</code>

让我们快速浏览一下代码的主要功能：

• 加载。发出请求时，将显示加载微调器以向用户指示正在进行某些操作。请求完成后，加载微调器将被文章列表替换。
• 查询。为了按类别获取文章列表，我发现查询类别然后使用类别到文章的关系来访问过滤后的文章更容易。
• 创建。首次加载页面时，将从created生命周期钩子内调用fetchPosts()函数。
• 观察。当路由URL更改时，每次都会调用fetchPosts()函数。

进行这些更改后，你应该现在看到以下视图：

显示单个文章

确保顶部主导航按预期工作。现在让我们处理Post组件。它将有自己的fetchPost()函数，它将按slug进行查询。如果你想知道slug参数来自哪里，让我提醒你我们在router.js中添加的这段代码：

<code class="language-bash">git clone git@github.com:sitepoint-editors/graphcsms-data-migration.git
cd graphcsms-data-migration
npm install</code>

这表示URL中/post/后面的任何内容都可以在组件中作为this.$route.params.slug使用。

post组件是CommentForm和CommentList组件的父组件。评论数据将作为props从文章记录传递到CommentList组件。现在让我们插入src/components/CommentList.vue的代码：

<code>ENDPOINT=<你的API端点>
TOKEN=<你的OPEN权限令牌></code>

除非你已通过GraphCMS仪表板手动输入评论，否则现在不要期望看到任何结果。让我们向src/components/CommentForm.vue添加代码，该代码将使用户能够向博客文章添加评论：

<code>// Categories.csv
name
Featured
Food
Fashion
Beauty

// Posts.csv
title,slug,content,categories
Food Post 1,food-post-1,Breeze through Thanksgiving by making this Instant Pot orange cranberry sauce,Food|Featured
Food Post 2,food-post-2,This is my second food post,Food
Food Post 3,food-post-3,This is my last and final food post,Food
Fashion Post 1,fashion-post-1,This is truly my very first fashion post,Fashion|Featured
Fashion Post 2,fashion-post-2,This is my second fashion post,Fashion
Fashion Post 3,fashion-post-3,This is my last and final fashion post,Fashion
Beauty Post 1,Beauty-post-1,This is truly my very first Beauty post,Beauty|Featured
Beauty Post 2,Beauty-post-2,This is my second beauty post,Beauty</code>

现在我们有一个基本的评论表单，能够将新评论提交到我们的GraphQL后端系统。保存新评论后，我们将获取返回的对象并将其添加到post.comments数组中。这应该触发CommentList组件显示新添加的评论。

现在让我们构建src/components/Post.vue组件：

<code class="language-bash">npm run categories
npm run posts</code>

最后，这是src/views/PostView.vue的代码，用于将所有内容整合在一起：

<code class="language-bash">npm run reset</code>

你应该现在看到文章的视图了。注意URL结尾处的:slug：localhost:8080/post/fashion-post-1：

在上面的示例中，我已经添加了一些评论来测试新功能。确保你也这样做。

总结

我希望你已经看到使用Vue.js和GraphQL构建博客网站是多么容易。如果你一直在使用普通的PHP和MySQL，你将编写更多代码。即使使用PHP框架，你仍然需要为简单的博客应用程序编写更多代码。

为了本教程的目的，我必须尽可能地保持简单。你可能会注意到，这个博客项目甚至还远远达不到最简单的博客设置。我们还没有解决很多问题，例如错误处理、表单验证和缓存。对于最后一部分，我推荐Apollo Client，因为它具有缓存GraphQL查询结果的机制。然后，当然需要一个作者模型和一个支持身份验证和消息批准的适当的评论系统。

如果你愿意，请继续改进这个简单的Vue.js GraphCMS博客。

关于无头CMS和Vue.js的常见问题解答 (FAQ)

使用无头CMS和Vue.js的优势是什么？

使用无头CMS和Vue.js具有多种优势。首先，它提供了一个更灵活、更高效的内容管理系统。它将后端和前端分开，允许开发人员独立处理两端。这种分离还意味着CMS可以向任何平台提供内容，而不仅仅是网站。其次，Vue.js是一个渐进式JavaScript框架，易于理解并与现有项目集成。它提供了一个简单灵活的API，使其成为无头CMS的完美匹配。

如何将无头CMS与Vue.js集成？

将无头CMS与Vue.js集成涉及几个步骤。首先，你需要选择一个支持基于API的通信的无头CMS。接下来，你需要设置你的Vue.js项目并安装必要的依赖项。然后，你可以使用CMS的API来获取内容并在你的Vue.js应用程序中显示它。一些CMS还提供SDK或插件，使这种集成更容易。

我可以将任何无头CMS与Vue.js一起使用吗？

是的，只要无头CMS支持基于API的通信，你就可以将任何无头CMS与Vue.js一起使用。这是因为Vue.js是一个前端框架，它通过API与后端（在本例中为CMS）进行通信。一些你可以与Vue.js一起使用的流行无头CMS包括Strapi、Sanity和ButterCMS。

使用无头CMS和Vue.js的项目示例有哪些？

有很多项目使用无头CMS和Vue.js。这些项目范围从博客和电子商务网站到成熟的Web应用程序。一些示例包括使用VuePress（一个基于Vue的静态网站生成器）的Vue.js文档站点，以及使用Storyblok（一个无头CMS）和Nuxt.js（一个Vue.js框架）的Storyblok网站。

无头CMS如何提高Vue.js应用程序的性能？

无头CMS可以显著提高Vue.js应用程序的性能。通过将后端和前端分开，它允许更有效的内容交付。CMS可以仅交付必要的内容，从而减少需要传输和处理的数据量。这可以导致更快的页面加载时间和更流畅的用户体验。

在Vue.js项目中从传统CMS迁移到无头CMS是否困难？

在Vue.js项目中从传统CMS迁移到无头CMS的难度取决于项目的复杂性和所使用的CMS。但是，大多数无头CMS都提供工具和文档来帮助迁移过程。此外，由于Vue.js是一个灵活且模块化的框架，它通常可以在无需对现有代码进行重大更改的情况下适应这种迁移。

使用Vue.js的无头CMS能否支持多种语言？

是的，使用Vue.js的无头CMS可以支持多种语言。许多无头CMS都提供内置的多语言支持，允许你管理不同语言的内容。在Vue.js方面，你可以使用vue-i18n等库来处理国际化。

使用Vue.js的无头CMS的安全性能如何？

使用Vue.js的无头CMS可以非常安全。后端和前端的分离增加了额外的安全层，因为它减少了攻击面。此外，大多数无头CMS都提供强大的安全功能，例如SSL加密、用户身份验证和访问控制。Vue.js还具有针对常见Web漏洞的内置保护措施。

我可以将无头CMS与Vue.js一起用于移动应用程序开发吗？

是的，你可以将无头CMS与Vue.js一起用于移动应用程序开发。因为无头CMS通过API提供内容，所以它可以向任何平台提供内容，包括移动应用程序。Vue.js可以使用NativeScript或Weex等框架进行移动应用程序开发。

使用无头CMS和Vue.js的未来发展如何？

使用无头CMS和Vue.js的未来发展前景广阔。这两种技术的普及率都在增长，并且它们正在越来越多的项目中使用。这种组合的灵活性和效率以及性能优势使其成为现代Web开发的强大选择。随着越来越多的开发人员熟悉这些技术，我们可以期待看到更多创新用途和集成。

以上是如何为无头CM构建VUE前端的详细内容。更多信息请关注PHP中文网其他相关文章！