前言
随着互联网的快速发展，网站已经成为各个企业和个人展示自己的重要窗口。而前端开发作为网站重要的一环，也在不断发展。为提升网站的可视化程度以及缩短开发周期，前端开发人员们需要跟上步伐，在页面的开发中寻找新的工具和技术。
而 Headless CMS 是一种新兴的互联网技术，它与常规的 CMS 不同的地方在于它只提供内容，而没有界面的界面服务。这种方式可以大大提高内容管理的效率。
在本篇文章中，我们将为大家介绍 Headless CMS 的概念，并通过实际案例，演示如何使用 Headless CMS 实现可视化制作。
Headless CMS 是什么？
所谓 Headless CMS，即“去头”的 CMS。它与传统的 CMS 不同，传统的 CMS 不仅提供内容管理服务，还提供了用于页面展示的模板和布局设计等功能，而 Headless CMS 只提供内容管理的功能。
简单的说，Headless CMS 的核心就是数据管理。它通过提供一套 API 接口，让开发者可以专注于业务的开发，而不必关心后端数据的存储和管理。
如何使用 Headless CMS 实现可视化制作？
使用 Headless CMS 实现可视化制作，我们可以把它理解成是一种前端组件化开发的方式。通过 Headless CMS 提供的 API，我们可以将后端数据与前端组件进行绑定，从而实现可视化的制作。
接下来我们将演示如何使用 Strapi 搭建一个 Headless CMS，并通过 Next.js 框架实现一个简单的博客网站。
部署 Strapi
Strapi 是一个优秀的 Node.js 后端 CMS 框架，它使用最新的技术栈，支持 MongoDB、MySQL、PostgreSQL 等数据库，并且可以通过插件快速地构建出自己的模型。
# 安装 Strapi 的命令行工具 npm install -g strapi
安装完成后，我们可以通过命令来创建新的 Strapi 项目。
# 创建新的 Strapi 项目 strapi new my-project
创建完成后，我们可以进入到项目并启动 Strapi 服务。
# 进入项目 cd my-project # 启动 Strapi 服务 strapi start
构建模型
模型是 Strapi 的核心概念，通过模型，我们可以创建和管理实体的数据结构。在这里，我们需要创建两个模型，一个是 posts，另一个是 categories。其中，posts 是博客的文章模型，categories 是博客的分类模型。
在 Strapi 中，我们可以通过页面可视化的方式来创建模型。按照以下步骤进行操作。
- 登录 Strapi 后台，在左侧栏选择
Settings > Roles > Public，在权限区域找到 Content Types ，勾选find、find one、count、create、update、delete等操作。 - 点击左侧栏的
Collection Types，在页面右上角选择Add new collection type，输入名称posts，点击Create。 - 在
posts集合界面，点击Add a field，添加文章的标题、正文、作者、分类、标签等字段。 - 再次点击
Collection Types，创建名称为categories的分类模型。
添加数据
在模型创建完成后，我们需要添加一些假数据用于测试。在 Strapi 中，也可以通过页面可视化的方式进行数据添加。
- 点击左侧栏的
Entries，进入数据列表页面。 - 点击右上角的
Create new entry按钮，创建文章数据。 - 创建分类数据。
框架 Project
创建 Next.js 项目，然后集成 Apollo Client 开发 GraphQL 组件。
npx create-next-app next-apollo
# 安装所需依赖 npm install --save isomorphic-unfetch apollo-boost react-apollo graphql-tag graphql
在 apollo.js 文件中，创建 Apollo Client 的实例。
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: "http://localhost:1337/graphql"
});
export default client;在 index.js 文件中，创建简单的查询组件。
-- -------------------- ---- -------
------ ------ ---- -----------
------ - -------------- - ---- ---------------
------ --- ---- --------------
----- --------- - ----
-
----- -
--
-----
-------
-
-
--
----- ----- - -- ----- - ----- - -- -- -
-----
------ ----------
--------------- -- -
---- --------------
---------------------
---------------------
------
---
------
--
--------------------- - ----- ---------- -
----- - ---- - - ----- --------------
------ ---------
---
------ -
----
-
-
------ ------- -- -- --------------- ---------------------- -------------------使用 GraphQL 查询数据
在查询文章数据时，我们需要在组件中引入 graphql-tag 包，并通过 graphql() 函数来进行查询。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ --- ---- -------------
----- ----------- - -- ----- - ----- - -- -- -
-----
------ ----------
--------------- -- -
---- --------------
---------------------
---------------------
------
---
------
-
----- ----- - ----
-
----- -
--
-----
-------
-
-
-
------ ------- ---------------------------总结
Headless CMS 是一个全新的 CMS 概念，通过它我们可以更加高效地管理后台数据，并在前端进行视图展示。在本篇文章中，我们演示了如何使用 Strapi 和 Next.js 快速构建一个博客网站，给读者提供了一个思路，希望可以对大家开发实践具有一定的指导作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d4eb12b5eee0b525cc2bff