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使开发者能够使用一个易于使用的界面建立一个强大的后端。

相关推荐
fishmemory7sec2 分钟前
Electron 使⽤ electron-builder 打包应用
前端·javascript·electron
豆豆1 小时前
为什么用PageAdmin CMS建设网站?
服务器·开发语言·前端·php·软件构建
twins35202 小时前
解决Vue应用中遇到路由刷新后出现 404 错误
前端·javascript·vue.js
qiyi.sky2 小时前
JavaWeb——Vue组件库Element(3/6):常见组件:Dialog对话框、Form表单(介绍、使用、实际效果)
前端·javascript·vue.js
煸橙干儿~~2 小时前
分析JS Crash(进程崩溃)
java·前端·javascript
安冬的码畜日常2 小时前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕(下)—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
l1x1n03 小时前
No.3 笔记 | Web安全基础:Web1.0 - 3.0 发展史
前端·http·html
昨天;明天。今天。3 小时前
案例-任务清单
前端·javascript·css
zqx_74 小时前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己4 小时前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5