什么是 Headless CMS？
Headless CMS 是一种内容管理系统，它与传统的 CMS 相比，去掉了页面渲染的功能，只提供了内容管理的 API 接口，这意味着我们可以使用任意前端框架来渲染页面，而不受 CMS 限制。
为什么要使用 Headless CMS？
使用 Headless CMS 可以提高开发效率，抽象出数据管理和页面渲染两者之间的耦合关系，使得前后端可以独立工作，前端开发可以专注于页面渲染，后端则可以专注于数据管理和 API 接口的开发。
同时，Headless CMS 还可以提供多端输出，无论是桌面端还是移动端，只需要调用 API 接口就可以获取数据，不需要重复编写页面渲染逻辑。
安装 Headless CMS
在这里我们以 Strapi 为例，介绍如何安装并配置 Strapi。
下载 Strapi
通过 npm 下载 Strapi：
--- ------- ----------- --
创建 Strapi 项目
创建一个新的 Strapi 项目：
------ --- ----------
启动 Strapi 项目
进入 Strapi 项目文件夹，并启动 Strapi：
-- ---------- ------ -----
配置数据库
默认情况下，Strapi 使用 SQLite 作为数据库，如果需要更换为其他数据库，可以在 Strapi 项目根目录中，创建 .env 文件并设置相应的数据库连接字符串：
------------------------------------------------------
创建 Strapi 模型
Strapi 中的数据部分是由模型来定义的，一个模型描述了数据的结构和关系。
创建第一个模型
假设我们需要存储文章信息，可以通过以下命令创建一个名为 article 的模型：
------ -------------- ------- ------------ ------------
这会在项目根目录中创建一个 api/article 目录，并自动生成 Article.js 文件，其中定义了文章的结构和关系。
配置 Strapi 访问权限
安装完成 Strapi 后，我们需要配置访问权限来指定哪些 API 可以被访问。
打开 config/policies.js 文件，可以看到 Strapi 预先定义了一些默认访问规则。我们可以在该文件中自定义规则，例如设置任何人都可以访问文章的 API：
-------------- - - -- ------- ------- --- --------------- ----- -- ----- ------------------ ----- -- ----- ---------------- ----- -- ----- ----------------- ----- -- ----- ----------------- ----- -- ----- ----------------- ----- -- ----- --
使用 Strapi API
当 Strapi 启动时，API 就会自动创建，可以通过以下 URL 访问文章 API：
-----------------------------
通过以下 URL 创建一篇新文章：
---- ----------------------------- ------------- ---------------- - -------- ------ ------- ---------- ------ ----- ----- --- ----- ----------- ---------- ------ -
通过以下 URL 获取所有文章的列表：
--- -----------------------------
使用 Strapi API 客户端
在应用程序的前端部分，我们可以使用任何 Http 请求库来调用 Strapi API，例如使用 Axios 库发送 Http 请求：
------ ----- ---- -------- -- ------ ---------------------------------------------------------- -- - --------------------------- --- -- ----- ------------------------------------------- - ------ ------ ------- -------- ------ ----- ----- --- ----- ----------- ---------- ------- ---
除了 Axios，还有许多其他的 Http 请求库，你可以根据自己的需要选择适合自己的库。
总结
Headless CMS 提供了前后端分离的解决方案，可以提高开发效率，并且非常适合多端输出的需求。我们介绍了如何使用 Strapi 安装并配置 Headless CMS，以及如何使用 Strapi API 和 API 客户端调用数据。希望本篇文章能够帮助您快速入门 Headless CMS。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6480507648841e9894fcc0e9