Skip to content

Headless CMS(strapi)

玩了玩微信小程序的cms,感觉还挺好的,不过目前处于公测阶段,后续应该还是要收费的,不过这个操作还挺好的。文档地址 不过其获取图片的时候默认用到的是小城云开发环境的链接样式,如果用在公开网站上的话,需要中间有一步换取临时链接的步骤。文档地址。 总体来说目前这个功能还是很好的,可以减少了很大的开发工作。

然后发现了个关键词,这个叫做 headless cms,嗯,那是不是也有类似开源的cms。然后发现了这个strapi

操作界面基本上是一致的,纯js/ts开发的。使用上也是通过api访问的,感觉还是非常方便的。 下面介绍一下安装及简单使用。

安装方法

使用一下命令部署,稍微等一下安装完成。

bash
npx create-strapi-app my-project --quickstart

安装完之后会弹出来一个界面,随便填填进入到项目当中。

操作流程大体如下

大体上就是新建一个collection,然后添加字段并确认属性,添加完之后。

  1. 新建一个 Create new collection type
  2. 添加数据项
  3. 发布数据项
  4. 创建API token
  5. 请求数据

创建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 这个需要加上以显示图片内容,要不然无法获取媒体内容,她这个还挺好的,图片还有多种尺寸的,太方便了。 更多的配置根据需要查看官方文档即可。文档地址