Strapi入门

往事知多少
1,894 阅读5分钟

介绍

Strapi 是一个免费的开源无界面 CMS。所谓无界面——即 Headless，也叫无头 ——是指这种 CMS 只提供结构化的数据和接口，只关注内容的创建和管理，而不处理呈现内容的前端界面。用户在快速构建自己所需的API并拿到数据后，可以用任何框架或方法将数据渲染成界面，可以轻松集成到任何现代Web或移动应用中，无论你是用React、Vue还是Angular，都能无缝对接。

传统的CMS通常将内容管理和展示耦合在一起，即内容的创建、编辑和展示都依赖于特定的前端界面和模板。而无头CMS则将内容与前端逻辑完全解耦，提供了一种更加灵活的方式来处理内容。

优点：

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

适用场景：

  • 多平台内容分发：将内容分发到不同web、h5等不同平台
  • 定制化 CMS 需求：通过插件等扩展性高度定制
  • 快速开发API：管理界面能够大大加快开发速度，尤其是MVP（最小可行产品）阶段

安装环境

截屏2024-03-29 17.52.18.png

安装&运行

yarn create strapi-app my-strapi --quickstart

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

启动开发模式

yarn develop

生产模式

yarn start

重新构建

yarn build

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

修改 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按钮需要在开发模式下才可见） image.png

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

点击继续后，添加字段： image.png image.png image.png image.png image.png image.png image.png

新增数据

image.png 保存数据并进行发布。

对外暴露接口

无需认证即可请求接口

找到设置->用户及权限插件->角色->Public，点击编辑按钮： image.png

image.png

点击右上角保存按钮，即可通过localhost:1337/api/pages请求已发布的数据，或通过localhost:1337/api/pages/:id请求特定某条数据。get请求可直接在浏览器标签页中请求：

image.png

需要认证才可请求接口

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

找到设置->用户及权限插件->角色->Authenticated，点击编辑按钮，勾选全部接口，保存。 image.png

方式一

1、创建令牌

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

2、接口请求

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

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

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

方式二

1、令牌获取
// 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表中的用户数据。 image.png

因为：auth api only working for normal user, not for users in administrator group(Super admin, editor, author). Strapi have two entirely different user sets for the content API and admin APIs that cannot auth each other.

2、接口请求

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

// 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使开发者能够通过一个易于使用的界面来快速构建一个灵活的、可扩展的API后端，而无需复杂的数据库设计和编码工作。

avatar
文章
阅读
粉丝