Question

这里推荐使用 Strapi，这是一个开源无头的 CMS 配置 Api。基于 Strapi ，可以快速针对业务场景搭建一套对应的 CMS，包括增删改查和联表等较复杂场景，都可以通过可视化的配置实现。

对于自定义较高的场景，它也暴露了相关的参数进行自定义，可以使用较少的开发量去实现特殊场景。

项目初始化

执行 Strapi 提供的脚手架命令来初始化项目:

npx create-strapi-app server --quickstart

它会在当前目录生成名为 server 的项目，并且会自动运行并打开一个登录页，按照指示配置一下账号密码，然后登录。

数据可视化配置

结构体定义

完成登录后，进入到 Strapi 的管理页面。

• content manager 是 Api 的数据
• content-type builder 是 Api 的结构体

以上一章节 layout 下的静态数据举例：

footerData: {
  title: "Demo",
  linkList: [
    {
      title: "技术栈",
      list: [
        {
          label: "react",
        },
        {
          label: "typescript",
        },
        {
          label: "ssr",
        },
        {
          label: "nodejs",
        },
      ],
    },
    {
      title: "了解更多",
      list: [
        {
          label: "掘金",
          link: "https://juejin.cn",
        },
        {
          label: "知乎",
          link: "https://www.zhihu.com",
        },
        {
          label: "csdn",
        },
      ],
    },
    {
      title: "联系我",
      list: [{ label: "微信" }, { label: "QQ" }],
    },
  ], 
  qrCode: {
    image: Code, 
    text: "王小白学前端",
  },
  copyRight: "Copyright © 2023 xxx. 保留所有权利", 
  siteNumber: "冀 ICP 备 XXXXXXXX 号-X",
  publicNumber: "冀公网安备 xxxxxxxxxxxxxx 号",
}

针对这样一个结构体，应该如何去定义 Api 呢？

切到 content-type builder，点击 create new collection type，创建一个新的结构体：

填完 display name 后，对应的单数和复数 id 会自动生成，就是右边的两项，name 填需要的结构体就可以。

然后为结构体创建一些字段，常见的类型包括文本、boolean 值、富文本，这些这里都有，以 title 举例，因为是一个字符串，所以点 text。

直接用短文本就好，然后高级配置选必填和唯一。

对应的字段就加好了，对于别的部分，用相同的方式加进来就可以。

稍微特殊一些的字段是 linkList，可以看到它其实是一个对象数组，先把 footData 的关系按照思维导图梳理一下。

按照数据结构发现，footerData 和 linkList 是一对多的关系，而 linklist 中又包含多个 link，也是一对多的关系。

所以要描述这部分字段，只有 layout 一个结构体是不够的，需要创建 linkList 和 link，然后给它们之间来建立对应的关系。

确定了思路，按照上面的方法来创建 linklist 和 link 的结构体。

linklist 和 link 的关系应该怎么建立呢？在 linklist 结构体中，点新建字段。

点击 relation 属性，这个属性用来联立结构体之间的数据库关系。

点完成，可以发现加上了。

接下来，按照上面的原理配置完所有的结构体即可。

结构体数据写入

定义完结构体后，需要为结构体加入一些数据，通常在开发完后，运营相关的同学配置，就只要进行这一步就可以了，别的部分就不需要再调整了，点击 content manager。

数据的配置需要按照从子到父的原则，因为 layout 有相关的字段依赖于 linklist，linklist 又依赖于 link，所以只有 link 配置完以后，才可以进行 linklist 和 layout 的配置，这里以 link 和 linklist 举例。

切到 link 的部分，点击 create new entry，可以进到下面的页面，输入完内容以后，进行保存，这里保存有两个按钮，一个是 save，一个是 publish，如果点击 publish 会生效到实际 cdn，这里先点击 publish，实际场景下运营配置的时候可以点 save，在 review 没问题后再发布即可。

配置完大致是这样的：

然后配置 linklist 的部分，同样是点 create new entry。

除了基本的字段，右侧还会有对应关联的字段，勾选需要的就可以关联上了。

最后配置 layout 的部分。

权限配置及上线

点击 settings -> Roles，这里是权限配置的部分，包含作者权限和公共权限，因为需要所有的人可以看到接口，所以点 public 右侧的