Headless CMS 之 Strapi 使用指南

1. 简介

Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable and developer-first.

官网：https://strapi.io/

Strapi 是 Headless CMS 的一个实现，其他类似实现可以参考 GitHub Topic：https://github.com/topics/hea...

可以用于快速实现 CMS 风格应用的后端功能（后台管理 + 接口），非常适用于快速原型呈现、为小型 CMS 风格应用提供后台数据。

2. 安装 Strapi

2.1. 准备运行环境

Make sure requirements are met

Node.js

Software	Minimum version	Recommended version
Node.js	12.x	14.x
npm	6.x	6.x

Yarn (optional)
You can also use yarn if you want here (opens new window)are the instructions to get started with it.

Databases
Strapi currently support the following databases.

Database	Minimum version
SQLite	3
PostgreSQL	10
MySQL	5.6
MariaDB	10.1
MongoDB	3.6

2.2. 创建工程

Step 2: Create a new project

支持 yarn 或 npx 方式构建，本文使用 npx 为例。

To quickly create a blank project from scratch, run this command:

npx create-strapi-app my-project --quickstart

Alternatively, to use one of our starters (opens new window), run this command instead:

npx create-strapi-starter my-project <starter-url>

TIP

• If you want to use specific database, you don't have to use the --quickstart flag. The CLI will let you choose the database of your choice. The --quickstart flag sets the database to SQLite.
• By default, create-strapi-app will generate an empty Strapi project. If you want an application that is pre-configured for a specific use case, see the Templates section.
• When using a starter, the project can be created from a specific branch, for example with a url like this: https://github.com/strapi/strapi-starter-gatsby-blog/tree/<my-branch>.

WARNING
To start your Strapi application you will have to run the following command in your application folder.

2.3. 启动工程

Start the project
To start your Strapi application you will have to run the following command in your application folder.

npm run develop

TIP

If you created your application using --quickstart flag, it will automatically run your application.

3. 使用 Strapi

3.1. 访问 Strapi web 后台

浏览器访问：http://localhost:1337/admin

首次访问注册

Email：
[e-mail]
PWD：
Qwer1234

3.2. 创建内容

提示：Content Type 对应数据实体的概念（数据库中的表）

3.2.1. 创建 Content Type

后台主页 > 【主菜单】插件：内容类型生成器 > 【导航面板】创建一个新的 Content Type

3.2.2. 为 Content Type 写入数据

1. 后台主页 > 【主菜单】COLLECTION TYPES > 选中新建的 Content Type
2. 点击右侧数据区右上角""增加新的 XXX（Content Type 名称）"按钮
3. 新增实体的字段，并保存。

3.2.3. 为 Content Type 数据配置访问权限

后台主页 > 【主菜单】常规：设置 > 【角色和权限】

对 Public 编辑

对 Public 角色的各 Content Type 资源访问权限进行勾选，并保存

==Waring：强烈建议对 Public 角色仅赋予只读类的权限，如count, findOne, find==

3.2.4. 安装 API 文档插件 documentation （可选的）

documentation 介绍：Create an OpenAPI Document and visualize your API with SWAGGER UI.

后台主页 > 【主菜单】常规：市场 > 浏览插件列表找到 DOCUMENTTATION 插件，点击“下载”自动安装。安装完毕后主菜单“插件”项下回增加“文档”子项，点击，右侧面板“打开文档”即可访问内容的 API 文档。

3.2.5. 通过 API 访问 Content Type 资源

资源 API 的 Endpoint 格式为：{host}:{port}/{contetTypeName 复数形式}

Strapi 自动生成的资源 API 端点示例：

端点示例	描述
GET /categories	获取列表
POST /categories	新增
GET /categories/count	获取计数
GET /categories/{id}	获取一个
PUT /categories	更新
DELETE /categories	删除

API 文档界面：

以 curl 为客户端访问实例：

#请求
curl --location --request GET 'http://localhost:1337/products'

#响应
[
    {
        "id": 1,
        "title": "iPhone 12 Pro Max",
        "price": 8848,
        "stock_count": 99,
        "category": {
            "id": 1,
            "name": "智能手机",
            "recommended": true,
            "sort_weight": 0,
            "created_at": "2021-04-22T06:58:20.058Z",
            "updated_at": "2021-04-22T06:58:20.066Z"
        },
        "published_at": "2021-04-17T07:23:10.235Z",
        "created_at": "2021-04-17T07:22:29.600Z",
        "updated_at": "2021-04-22T07:04:37.817Z"
    }
]

4. 总结

Strapi 为应用后端开发提供了一个选项，其最大的优势在于快速。本文是一篇快速上手体验 Strapi 的入门级指南，不对 Strapi 本身的稳定性、可用性、商用性等方面作进一步探讨。

5. 参考

• Offical: Strapi developer Docs
• Offical: Strapi user Docs
• 哔哩哔哩视频：strapi Headless CMS api创建框架入门到放弃
• Youtube: Strapi.js Crash Course | Headless CMS