三大无头CMS，Strapi，Directus ，Payload学习总结

人们不会记得跋山涉水来见自己的人他们只会记得自己跋山涉水去见的人

缘由

若nodejs是对前端上手最快的一个后端框架，他是我想学习的出发点。找造轮子嘛无非就是自己和使用开源。接触express，egg，koa2之后我们无非就是做几件事情：数据模型，路由接口，后台前端。本以为在打鸡血之后会手撸一个后台

转折点在于大佬一句话：“如果有一款快速成型的产品就好了”，也是因为这句话我才发现对于一个热爱前端且不是很有天赋的三无青年来说无头CMS，未必不是一种选择

无头CMS

他的定义是快速成型API自带Admin ui。微信小程序云开发同定类型，后台自定义内容模型后会有对应的API结构

我们需要的内容不多有一个规范的API接口，媒体库，富文本框......；接触Strapi，Directus ，Payload发现框架个个优缺点

API接口/字段

Strapi：在接口方便API是真正的对开发者无保留，你可以在自己撸代码定义API接口和数据结构

Directus：自定义的成分太少

Payload：它还是需要自己写一丢丢的代码，更具字段写ts控制器后面会生产对应的内容

媒体库

Strapi：在V4版本之后strapi默认在设置媒体库后是无法通过api正常返回，需要在接口添加关系参数populate，但是返回的结构偏多（例如：）

{
  "data": [
    {
      "id": 1,
        "imgs": {
          "data": [
            {
              "id": 18,
              "attributes": {
                "name": "65535_52313096502_5374800f04_z_640_480_nofilter.jpg",
                "alternativeText": null,
                "caption": null,
                "width": 640,
                "height": 480,
                "formats": {
                  "thumbnail": {
                    "name": "thumbnail_65535_52313096502_5374800f04_z_640_480_nofilter.jpg",
                    "hash": "thumbnail_65535_52313096502_5374800f04_z_640_480_nofilter_6af74779f7",
                    "ext": ".jpg",
                    "mime": "image/jpeg",
                    "path": "uploads",
                    "width": 208,
                    "height": 156,
                    "size": 9.89,
                    "url": "/uploads/thumbnail_65535_52313096502_5374800f04_z_640_480_nofilter_6af74779f7.jpg"
                  },
                },
                "hash": "65535_52313096502_5374800f04_z_640_480_nofilter_6af74779f7",
                "ext": ".jpg",
                "mime": "image/jpeg",
                "size": 65.15,
                "url": "/uploads/65535_52313096502_5374800f04_z_640_480_nofilter_6af74779f7.jpg",
                "previewUrl": null,
                "provider": "local",
                "provider_metadata": null,
                "createdAt": "2023-02-02T12:38:46.947Z",
                "updatedAt": "2023-02-02T12:39:10.733Z"
              }
            }
          ]
        }
      }
    }
  ],
}

因此在媒体库上比较讨厌，过来的东西多了看的眼花缭乱。或者我们在请求时做一些筛选工作

Directus ：和上一个框架基本一致，好处在于在API的结构上不需要添加关系参数，默认直接返回媒体库的ID，但没有媒体域名url

{
  "data": [
    {
      "id": 1,
      "attributes": {
        "title": "Test Article",
        "slug": "test-article",
        "body": "Test 1",
        "headerImage":"Kxs56jKXosq2"
        },
      }
    }
  ],
}

Payload：三个框架中唯一一个媒体库返回是带URL地址，但是需要撸一部分代码去配置媒体库的缺点


{
  "data": [
    {
      "id": 1,
      "attributes": {
        "title": "Test Article",
        "slug": "test-article",
        "body": "Test 1",
        "headerImage":"https://img.frbkw.com/img/456.hpg"
        },
      }
    }
  ],
}

富文本框

Strapi和Directus对富文本框是常规化，前者使用MD编辑器也是大受好评

{
  "data": {
    "id": 1,
    "attributes": {
      "title": "77",
      "desrc": "99",
      "md": "##  我是标题\n### md文档编辑器"
    }
  },
  "meta": {

  }
}

Payload：基于eslatejs做的富文本框，是有一点反人类。每次回车作为一个断点，小程序的解析组件无法无法直接使用