什么是 Headless CMS？
传统的 CMS（内容管理系统）一般包括两部分：前端展示系统和后端管理系统。前端展示系统负责展示网站的内容，而后端管理系统则负责管理这些内容。例如，WordPress、Drupal 和 Joomla 都是传统的 CMS。
而 Headless CMS 是一种新型的 CMS，它将前端展示系统和后端管理系统进行了分离，完全不涉及前端展示的部分。这意味着在使用 Headless CMS 时，你需要自己开发前端展示系统，并使用 API 接口来获取和展示内容。
Headless CMS 的优势
灵活性
使用 Headless CMS 的最大优势在于灵活性。它不仅可以实现更自由的前端展示方式，还可以通过 API 接口与各种系统和设备进行互联，如手机应用程序、电子商务网站和数字屏幕等。
扩展性
Headless CMS 允许你用任何你喜欢的技术来开发前端展示系统，这使得扩展性变得很容易。你可以添加自己的功能、自定义样式和构建一些特殊的应用程序。
可维护性
因为前端展示系统和后端管理系统进行了分离，因此可以独立地维护和升级。这不仅可以提高网站的性能，而且也可以增加开发自由度。
安全性
使用 Headless CMS 可以大大提高网站的安全性。因为前端展示系统不需要与后端管理系统直接交互，所以不容易受到各种安全漏洞的攻击。
Headless CMS 的实现
为了说明 Headless CMS 的实现方式，我们将使用 Strapi 和 React 来展示一个基本的示例。
Step 1 — 安装 Strapi
在命令行终端中输入以下命令，安装 Strapi：
npm install strapi@alpha -g
Step 2 — 创建项目
在命令行终端中输入以下命令，创建一个 Strapi 项目：
strapi new my-project
Step 3 — 配置 Strapi
在命令行终端中输入以下命令，配置 Strapi：
cd my-project
打开 extensions/users-permissions/config/jwt.js 文件，并将以下配置项添加到文件末尾：
module.exports = {
jwtSecret: process.env.JWT_SECRET || 'secret'
};Step 4 — 启动 Strapi
在命令行终端中输入以下命令，启动 Strapi：
strapi start
Step 5 — 创建数据类型
在浏览器中打开 http://localhost:1337/admin，使用用户名 admin 密码 strapi 登录 Strapi 后台管理系统。
在管理系统左侧菜单栏中，选择 Plugins > Users & Permissions，然后在左侧菜单栏中选择 Roles > Public，在 Permissions 标签页中勾选 find 和 findOne 等权限。
然后在管理系统左侧菜单栏中，选择 Content-Types Builder，在 Content-Types 标签页中创建一个新的数据类型。在这个例子中，我们创建一个数据类型叫做 article，包含两个字段：title 和 content。
Step 6 — 请求数据
现在我们已经在 Strapi 中创建了一个数据类型，现在我们需要请求这些数据，这里我们使用 React 来展示这些数据。
首先在命令行终端中，创建一个 React 应用程序：
npx create-react-app my-app cd my-app npm start
然后打开 src/App.js 文件，并将以下代码添加到文件头部：
import React, { useState, useEffect } from "react";接下来，在 App 函数中添加以下代码：
// javascriptcn.com 代码示例
function App() {
const [articles, setArticles] = useState([]);
useEffect(() => {
async function fetchData() {
const response = await fetch("http://localhost:1337/articles");
const result = await response.json();
setArticles(result);
}
fetchData();
}, []);
if (!articles.length) {
return <div>Loading...</div>;
}
return (
<div>
<h2>Articles</h2>
{articles.map((article) => (
<div key={article.id}>
<h3>{article.title}</h3>
<p>{article.content}</p>
</div>
))}
</div>
);
}这里我们使用了 useState 和 useEffect 两个 React 钩子来请求数据，并展示这些数据。如果没有请求到数据，我们将页面展示 Loading... 。如果请求到了数据，我们将所有文章展示在页面上。
Step 7 — 运行应用程序
在命令行终端中输入以下命令，运行应用程序：
npm start
总结
Headless CMS 提供了更灵活、更自由、更安全、更易于扩展的方式来构建网站。使用 Strapi 和 React 可以帮助我们更好地理解它的用法，我们可以自己动手试着构建一个自定义的 Headless CMS 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6583ac1ed2f5e1655de81fdf