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 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇4 小时前
手写 zustand
前端
Hamm4 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇5 小时前
前端国际化看这一篇就够了
前端
大G哥5 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext5 小时前
html初识
前端·html
小小小小宇5 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827525 小时前
vue中 vue.config.js反向代理
前端
Java&Develop5 小时前
onloyoffice历史版本功能实现,版本恢复功能,编辑器功能实现 springboot+vue2
前端·spring boot·编辑器
白泽talk6 小时前
2个小时1w字| React & Golang 全栈微服务实战
前端·后端·微服务