Strapi调研，从零基础到精通，收藏这篇就够了！-优快云博客

.markdown-body pre,.markdown-body pre>code.hljs{color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:700}.hljs-literal,.hljs-number,.hljs-tag .hljs-attr,.hljs-template-variable,.hljs-variable{color:teal}.hljs-doctag,.hljs-string{color:#d14}.hljs-section,.hljs-selector-id,.hljs-title{color:#900;font-weight:700}.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type{color:#458;font-weight:700}.hljs-attribute,.hljs-name,.hljs-tag{color:navy;font-weight:400}.hljs-link,.hljs-regexp{color:#009926}.hljs-bullet,.hljs-symbol{color:#990073}.hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:700}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

CMS，全称Content Management System（内容管理系统）。

传统CMS，比如WordPress、DEDE（织梦CMS）、Joomla、Drupal等，多应用于企业网站、新闻门户、博客平台、电子商务等业务场景，帮助组织和个人管理和发布内容，发布的内容通常都具有特定的展示样式（比如博客、新闻页面、商详页面），用户只需要专注在内容的组织上即可。

无头CMS（Headless-CMS），与传统CMS对比，它只提供结构化的数据和接口，只关注内容的创建和管理，而不处理呈现内容的前端界面，给了前端页面展示更多的灵活性。可以轻松集成到任何现代Web或移动应用中，无论你是用React、Vue还是Angular，都能无缝对接。

好处是内容和展示完全分离，不依赖或不需要特定的前端框架，可以根据自己擅长的技术栈选择前端框架、接入 APP等，创建丰富的展示体验。

缺点是需要开发人员。

一般来说，开源的CMS是支持自行部署的，自行部署的系统没有API请求数和带宽的限制，而非开源的CMS一般是云托管的，免费版一般会受到API请求数和带宽以及一些其他的限制。

因而本文将对非开源的CMS和开源的CMS分开对比。

非开源CMS对比

	Contentful	Prismic	storyblok	Hygraph(原名GraphCMS)
官网	www.contentful.com/	prismic.io/	www.storyblok.com/	hygraph.com/
介绍	Contentful 是一家总部位于德国柏林的公司，成立于2013年，在14年推出它的首个版本	Prismic 是一家成立于法国的公司，与contentful同一年成立（2013年），在无头内容管理领域占据了自己的一席之地。	Storyblok 是一家总部位于奥地利的头部 CMS 公司，成立于2017年。	GraphCMS 成立于2017年，总部位于德国柏林。是一个基于 GraphQL 的头部 CMS 平台。
应用	KFC、vodafone、KraftHeinz、BMW、BMI、wework	deliveroo、google、rakuten、texthelp、yousign、360Learning	TESLA、Adidas、PizzaHut、NETFLIX、OATLY、AUTODESK	SAMSUNG、gamescom、telenor、Statistics Finland
文档	www.contentful.com/developers/…
training.contentful.com/student/cat…
（有入门模板、开发者文档、学习中心等）	prismic.io/docs	www.storyblok.com/docs/
www.storyblok.com/tutorials	hygraph.com/docs
GitHub	github.com/contentful
（contentful的开发工具包）	github.com/prismicio	github.com/storyblok	github.com/hygraph
星数	/	/	/	/
托管	云托管	云托管	云托管	云托管
社区	❌️	❌️	❌️	❌️
插件安装	✔️	❌️
没有插件市场。但有Integration Fields 允许用户将外部内容集成到 Prismic 中，从而扩展内容的来源和功能。	❌️
没有插件市场，但支持自定义插件开发来扩展功能。	❌️
构建语言	/	Javascript、React	Java	基于GraphQL
优点	1.支持AI组合内容
2.支持团队协作编辑	1.独有的切片工具（内容片段化管理），支持页面组件的高度自定义&高可复用
2.专注在网站创建方面的专业知识，更适用于个人网站或官方网站或是营销人员做内容管理使用	1.提供实时预览功能	1.基于GraphQL，这意味着您可以使用GraphQL查询语言来定义和获取您需要的数据。GraphQL提供了强大的灵活性和效率，允许您精确地请求所需的数据，避免了过度获取或不必要的数据传输。
2.支持Webhooks、自定义解析器和插件来扩展GraphCMS的功能
3.支持团队协作，多个用户可以同时编辑内容，并实时观察到其他用户的更改。
4.此外，还提供版本控制功能，您可以查看和还原先前的版本，以便在需要时进行回滚或恢复。
5.图像和文件管理：GraphCMS提供了强大的图像和文件管理功能。您可以上传、管理和优化图像和文件，并在需要时使用它们。GraphCMS还提供了各种图像转换选项，使您能够轻松地调整大小、裁剪和优化图像。
缺点	1.免费版本只支持5个会员、2个语言环境、1M API calls/month
2.受限于中国大陆地区特殊的网络环境和内容控制的法例，要从位于境外的 Contentful 服务器上拉取相关内容（contentful没有中国大陆地区的 CDN 节点），我们没办法正规和流畅地进行使用。	1.免费版本支持1位用户、400万次api调用/月、100GB内置CDN带宽/月、2个语言环境，不支持角色	1.免费版本只支持1个用户，100万次API调用/月	1.免费版：3个用户2个角色、2个区域设置、100w次api调用/月、100GB流量/月
2.在中国可使用，但由于中国的网络环境，访问国外云服务可能会受到一些限制，导致访问速度较慢或不稳定。在将数据存储在国外云服务上时，用户需要考虑数据隐私和安全性的问题。确保遵守相关的数据隐私法规，并采取适当的安全措施来保护数据。

开源CMS对比

	Strapi	Sanity	Directus
官网	strapi.io/	www.sanity.io/	directus.io/
介绍	由一个团队在2015年创建，最初是一个开源的 Node.js CMS 框架。	Sanity 是一家总部位于挪威的公司，成立于2015年。	Directus 由 Ben Haynes 创立于 2014 年。
应用	IBM、TOYOTA、Walmart、NASA、TATA、 Discovery Inc	CLOUDFLARE、Figma、PUMA、Shopify、netlify、Linear	Walmart、BOSE、algolia、tripadvisor、Mercedes-Benz
文档	docs.strapi.io/	www.sanity.io/docs	docs.directus.io/
GitHub	github.com/strapi/stra…	github.com/sanity-io/s…	github.com/directus/di…
星数	59.9k	4.9k	25.4k
托管	自托管	自托管（MIT license）/云托管	自托管（总财务超过 500 万美元的实体需要商业许可证）
社区	✔️	✔️	✔️
插件安装	✔️	❌️
没有插件市场。但提供了Sanity Plugins允许用户开发和集成自定义插件来扩展功能。	✔️
构建语言	JavaScript	node.js+react+JavaScript+GraphQL+Portable Text	Typescript+Vue
优点	1.自托管，带宽和api请求数无限制
2.不限制表数量、角色数量、区域设置数量
3.数据库支持：Postgres, MySQL, MariaDB
4.免费版和付费版对比，主要是没有云托管服务和客户支持服务等功能	实时预览、协同编辑	1.RESTful API + GraphQL或其他数据库
2.支持团队协作
3.支持设置基于角色的权限
4.支持裁剪、压缩和其他高级图像编辑
缺点	1.免费版不支持CMS单点登录
2.免费版不支持审批流程	云托管免费版有用户数和数据集数的限制、有api请求数和带宽的限制	1.相比一些其他流行的 CMS 平台，其社区规模可能相对较小，导致一些问题可能需要更长的时间来得到解决。

Why Strapi

综上所述，结合实际情况，由于非开源CMS受到api请求、带宽以及其他限制，支持自行部署的开源CMS是一个比较好的选择。而几大开源CMS中，Strapi支持：

多种数据库
有活跃的社区和丰富的文档
支持插件安装扩展功能
在Github上是星数最多的开源CMS

另外，对于前端开发团队来说，由于Strapi的构建语言是JavaScript，二次开发也会更易上手，所以，Strapi是更适合的选择。

Strapi 介绍

Strapi是一个免费的开源无头CMS，在Github上星数达到59.9k，作为 GitHub 上 Star 数最多的开源内容管理系统，目前已成为多家世界 500 强公司的首选 CMS。

优点：

自托管，保持对数据的控制：使用Strapi，可以按照自己的方式托管和扩展Strapi项目。可以选择所需的任何托管平台，可以知道数据的存储位置，并且始终可以完全控制。
支持多种数据库：Strapi适用于SQL和NoSQL数据库：MongoDB，PostgreSQL，MySQL，MariaDB和SQLite。
可定制的：通过完全自定义API，路由或插件来完全满足需求，从而快速构建逻辑。
内容管理界面：Strapi 提供了一个易于使用的管理界面，使得用户可以轻松地创建、编辑和发布内容。
可扩展性：Strapi 具有高度的可扩展性，可以通过插件和自定义模块、插件来扩展其功能。

适用场景：

多终端内容分发：将内容分发到web、app等不同终端。
定制化 CMS 需求：通过插件等扩展性功能进行高度定制。
快速开发API：能够大大加快开发速度，尤其是MVP（最小可行产品）阶段。

安装环境

node version: v18及以上（不支持 Node 的奇数版本，比如v19，v21）
npm version: v6及以上

安装&运行

命令行运行yarn create strapi-app my-strapi --quickstart进行安装。

Strapi默认使用一个SQLite数据库。要使用其他数据库来设置Strapi，例如MongoDB或PostgreSQL，请从上述命令中删除--quickstart 标志。

安装完成后会马上运行并自动在浏览器中打开网站。

也可以在命令行中运行：

// 开发模式
`yarn develop`

// 生产模式
`yarn start`

// 重新构建
`yarn build`

可以打开config/server.js文件，修改启动端口号。

运行起来后，即可通过在浏览器访问：http://localhost:1337/admin/ 打开strapi管理后台了。如图： Pasted image 20240426152639.png

修改 strapi 管理界面为中文

step1

在项目的./src/admin/目录下拷贝app.example.js文件并重命名为app.js，并对这两行代码

'zh-Hans',
'zh',

取消注释，保存。

step2

运行yarn build && yarn start

step3

在管理界面中点击：左下角的用户名 -> Profile -> Experience -> Interface language里可进行当前账号的界面语言设置，保存即可。如图：截屏2024-04-09 16.59.06.png

快速开发一套CRUD接口

🍓建表&插入数据

在管理界面中点击Content-Type Builder，可以看到已经有一个User的集合类型，这个是strapi自己提供的。

让我们建一个Pages集合，包含一个名称和描述字段。

点击创建一个新的Content Type按钮（注意：创建一个新的Content Type按钮需要在开发模式下才可见）。
显示名称输入：Pages，API ID的单数形式和复数形式会自动生成，注意这两者不能一样，可以把单数形式的s去掉。如下图：

【注意】高级设置中的草稿&发布根据实际需要进行勾选，勾选之后新增加的数据需要手动进行发布才能生效。

点击继续后，添加名称字段，这个字段选择文本类型，如下图：

字段名称输入name，选择较短的文字：

高级设置中勾选必须的和唯一的，这里可以根据实际情况进行勾选：

名称字段配置好后，点击添加另一个字段继续添加描述字段：

选择富文本编辑器类型：

字段名称输入description，点击完成：

表结构配置好后，点击保存按钮进行保存：

如此，表就建好了，点击创建新条目插入数据：

按照提示插入数据，保存数据并进行发布即可。

🍓对外暴露接口

对外暴露的接口按照无需认证即可请求和需要认证才可请求分为两类，接下来分别介绍这两类接口如何配置和请求。

🎃无需认证即可请求接口

找到设置->用户及权限插件->角色->Public，点击右侧的 🖊️ 小图标：

如下图勾选你要对外暴露的接口，这里无需认证的接口只勾选find和findOne，点击设置小图标可以在右侧看到对应接口的请求路由：

点击右上角保存按钮后，即可通过localhost:1337/api/pages请求已发布的数据，或通过localhost:1337/api/pages/:id请求特定某条数据。

get请求可直接在浏览器标签页中请求，如下图：

🎃需要认证才可请求接口

首先设置哪些接口需要认证才可请求。

找到设置->用户及权限插件->角色->Authenticated，点击右侧的 🖊️ 小图标，进入编辑界面。然后找到如下图的全选进行勾选，保存：（这里配置了通过认证的用户可以请求所有接口，也可按需要勾选特定几个接口）

配置好后则可以进行接口请求了。

如果只是测试接口，可以使用方式一进行测试：

🎈请求方式一

step1. 创建令牌

找到设置->全局设置->API令牌->创建新的API令牌，按照指示创建一个API令牌，这里创建了一个无限期的完全访问的令牌（测试用，实际生产环境不推荐）：保存后会生成一个令牌，复制令牌保存下来，接下来的请求会需要用到。下面会用TOKEN指代令牌内容。

step2. 接口请求

这里是使用浏览器插件Talend API Tester来测试的，也可以选择用postman等其他工具来测试。

POST请求http://localhost:1337/api/pages，向Pages表插入新数据，请求体按照表结构，需要有 name 和 description 字段，代码如下：

{
	"data": {
		"name": "Added from api",
		"description": "Added from api test"
	}
}

请求头中需要增加Authorization，值为Bearer TOKEN，其中TOKEN就是你创建API令牌后复制的令牌内容。

如下图：

发送请求后，返回如下图：

通常情况下我们的令牌都是通过接口请求的，见方式二。

🎈请求方式二

step1. 令牌获取

POST请求http://host:port/api/auth/local，请求参数为：

{
	"identifier": "lin.q@ve.com",
	"password": "123456"
}

如图：返回如图：

也可使用命令行方式，比如：

// Request
curl --request POST 'localhost:1337/api/auth/local' \\
--form 'identifier="test@test.com"' \\
--form 'password="test@123"'

// Response
{
    "jwt": TOKEN,
    "user": {
        "id": 3,
        "username": "test",
        "email": "test@test.com",
        ...
    }
}

返回数据中的jwt就是令牌，可用于请求体中的Authorization。

【注意】请求数据中的identifier和password是内容管理器中User表中的用户数据。

因为：auth api 仅适用于普通用户，不适用于管理员组中的用户（Super admin, editor, author）。 Strapi 对于内容 API 和管理 API 有两个完全不同的用户集，无法相互验证。

step2. 接口请求

同方式一中的接口请求。或者：

// Request
curl --request POST 'localhost:1337/api/pages' \\
--header 'Authorization: Bearer TOKEN' \\
--form 'data={"name": "added from terminal", "description": "terminal"}'

// Response
{"data":{"id":6,"attributes":{"name":"added from terminal","description":"terminal","createdAt":"2024-04-12T12:30:38.530Z","updatedAt":"2024-04-12T12:30:38.530Z","publishedAt":"2024-04-12T12:30:38.528Z"}},"meta":{}}

总结

上面我们了解到，Strapi 作为全球领先的开源无头 CMS，是一款完全免费、采用 JavaScript 开发的无头内容管理系统，它拥有开箱即用的 API 和友好的管理面板，自带权限管理、默认安全、SEO 友好等特点，已经成为多家世界 500 强公司的首选 CMS。

我们还学习了Strapi的安装和启动、crud操作、数据发布等，可以看到，我们无需基于ORM框架去搭建数据模型，也无需使用python、nestjs等后台框架去创建后台服务。通过使用 Strapi，开发人员可以通过一个易于使用的界面来快速构建一套灵活的、可扩展的API，而无需从头开始开发后端逻辑，Strapi 提供了一个现成的后端解决方案，使开发过程更加高效。