Appearance
Headless CMS(strapi)
玩了玩微信小程序的cms,感觉还挺好的,不过目前处于公测阶段,后续应该还是要收费的,不过这个操作还挺好的。文档地址 不过其获取图片的时候默认用到的是小城云开发环境的链接样式,如果用在公开网站上的话,需要中间有一步换取临时链接的步骤。文档地址。 总体来说目前这个功能还是很好的,可以减少了很大的开发工作。
然后发现了个关键词,这个叫做 headless cms,嗯,那是不是也有类似开源的cms。然后发现了这个strapi。
操作界面基本上是一致的,纯js/ts开发的。使用上也是通过api访问的,感觉还是非常方便的。 下面介绍一下安装及简单使用。
安装方法
使用一下命令部署,稍微等一下安装完成。
bash
npx create-strapi-app my-project --quickstart
安装完之后会弹出来一个界面,随便填填进入到项目当中。
操作流程大体如下
大体上就是新建一个collection,然后添加字段并确认属性,添加完之后。
- 新建一个 Create new collection type
- 添加数据项
- 发布数据项
- 创建API token
- 请求数据
创建collection type
这个地方创建时用到的复数路径要记下来,后续的API路径使用的是这个ID
添加数据项
增加媒体资源
增加数据内容
发布数据
创建API token
在 setting -> global setting -> api tokens里边创建一个token,并且配置好token的权限范围
API请求
bash
curl --location 'http://localhost:1337/api/xiaomubiaos?populate=*' \
--header 'Authorization: bearer 6aa3a69e3582eb9d12cab3db92cb1d70125d52b6813cfb2efbe5fe20db6d964bec0b4f656b5d741cc4d956d0704cd5e2740c4e1037585ff97f34da16bd1b0660aa8129838dc10aff683e66dcfbdcee42c28ffb5761a2c72aca6ed0e2562871f2c7f81be63e5c48c38952e86573fcf90d2d09340d7d5f7e65ba7ec4d860b7c8b2'
请求结果如下:
json
{
"data":[
{
"id":1,
"attributes":{
"target":"1亿",
"createdAt":"2023-10-08T06:10:49.580Z",
"updatedAt":"2023-10-08T06:12:48.121Z",
"publishedAt":"2023-10-08T06:12:48.119Z",
"pic":{
"data":{
"id":1,
"attributes":{
"name":"今天也要开开心心哒.png",
"alternativeText":null,
"caption":null,
"width":672,
"height":551,
"formats":{
"thumbnail":{
"name":"thumbnail_今天也要开开心心哒.png",
"hash":"thumbnail__2331b2e1bd",
"ext":".png",
"mime":"image/png",
"path":null,
"width":190,
"height":156,
"size":62.29,
"url":"/uploads/thumbnail__2331b2e1bd.png"
},
"small":{
"name":"small_今天也要开开心心哒.png",
"hash":"small__2331b2e1bd",
"ext":".png",
"mime":"image/png",
"path":null,
"width":500,
"height":410,
"size":336,
"url":"/uploads/small__2331b2e1bd.png"
}
},
"hash":"_2331b2e1bd",
"ext":".png",
"mime":"image/png",
"size":120.31,
"url":"/uploads/_2331b2e1bd.png",
"previewUrl":null,
"provider":"local",
"provider_metadata":null,
"createdAt":"2023-10-08T06:10:26.364Z",
"updatedAt":"2023-10-08T06:10:26.364Z"
}
}
}
}
}
],
"meta":{
"pagination":{
"page":1,
"pageSize":25,
"pageCount":1,
"total":1
}
}
}
其中 header 里边需要添加的头是 Authorization: bearer token
populate 这个需要加上以显示图片内容,要不然无法获取媒体内容,她这个还挺好的,图片还有多种尺寸的,太方便了。 更多的配置根据需要查看官方文档即可。文档地址