Strapi入门

介绍

Strapi 是一个免费的开源无界面 CMS。所谓无界面------即 Headless ------是指这种 CMS 只提供结构化的数据和接口,而不提供界面,快速构建自己所需的API。在拿到数据后你需要用任何框架或方法将数据渲染成界面。

优点:

  • 保持对数据的控制。使用Strapi,可以知道数据的存储位置,并且始终可以完全控制。
  • 自托管。可以按照自己的方式托管和扩展Strapi项目。可以选择所需的任何托管平台:AWS,Netlify,Heroku,VPS或专用服务器。您可以随增长而扩展,100%独立。
  • 可以选择自己喜欢的数据库。Strapi适用于SQL和NoSQL数据库:MongoDB,PostgreSQL,MySQL,MariaDB和SQLite。
  • 可定制的。通过完全自定义API,路由或插件来完全满足需求,从而快速构建逻辑。

安装环境

安装&运行

yarn create strapi-app my-strapi --quickstart

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

启动开发模式

yarn dev

生产模式

yarn start

重新构建

yarn build

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

修改 strapi 管理界面为中文

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

arduino 复制代码
'zh-Hans',
'zh',

取消注释,保存。

step2. 运行yarn build && yarn start

step3. 在管理界面中点击:左下角的用户名 -> Profile -> Experience -> Interface language里可进行当前账号的界面语言设置,保存即可。

快速开发一套CRUD接口

建表

点击Content-Type Builder,可以看到已经有一个User的集合类型,这个是strapi自己提供的,我们当前登录的用户的数据就存储在这个模型当中。

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

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

点击继续后,

新增数据

保存数据并进行发布。

对外暴露接口

无需认证即可请求接口

找到设置->用户及权限插件->角色->Public,点击编辑按钮:

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

需要认证才可请求接口

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

创建令牌

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

接口请求

我是使用浏览器插件Talend API Tester来测试的,诸位看官也可以选择用postman等其他工具来测试。

请求头中增加Authorization,值为Bearer TOKEN,其中TOKEN可以是你创建API令牌后复制的令牌串。但通常情况下我们的令牌都是通过接口请求的,如下。

令牌获取

POST请求:http://host:port/api/auth/local

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

【注意】请求数据中的用户名和密码是内容管理器User表中的用户

总结

Strapi使开发者能够使用一个易于使用的界面建立一个强大的后端。

相关推荐
小桥风满袖1 分钟前
极简三分钟ES6 - ES9中对象扩展
前端·javascript
云舟吖9 分钟前
基于 electron-vite 实现一个 RPA 网页自动化工具
前端·架构
用户94818176754412 分钟前
超越NAT:如何构建高效、安全的内网穿透隧道
前端
明天的明15 分钟前
vue双向数据绑定失效
前端
bug_kada18 分钟前
前端路由:深入理解History模式
前端·面试
LIUENG19 分钟前
快速开发一个 VSCode 插件
前端·visual studio code
bug_kada19 分钟前
前端路由:Hash vs History,一篇讲明白!
前端·面试
城中的雾20 分钟前
HarmonyOS应用拉起系列(三):如何直接拉起腾讯/百度/高德地图进行导航
前端·javascript·harmonyos
李明卫杭州22 分钟前
CSS 中 nth-child 选择器的详细用法和示例
前端
会豪22 分钟前
CSS 动画属性精讲:从基础到实战
前端·css