基于 Strapi 的数据配置系统（SMR）

1. 1.1 背景

   1.2 整体介绍

1. Strapi 和 MongoDB

   2.1 Strapi 安装与内容类型生成

   2.2 MongoDB 安装

1. 文字链配置系统

   3.1 Strapi 数据配置，接口发布

   3.2 Strapi 关联 MongoDB ，本地 Compass 设置

   3.3 前台页面发起请求，查看数据库更新

1.1 背景

京东 PC 商城影响用户消费决策，影响转化率的由许多频道构成，包含活动页、商品页、场馆等，分析这些页面的数据不难发现，纯数据展示较多，目前当前端要获取一些数据时现状：

1. 运营方向后端提需
2. 后端开发接口、梳理接口文档提供给前端
3. 前端根据接口文档复写前端逻辑
4. 前后端接口联调

数据配置系统（SMR）旨在于为产品运营方提供一个可及时增删改查前台数据的SMR数据配置平台，前端提供接口，解放后端工作的系统来提高产研效率。 利用 SMR，你会发现现在前端要获取一些数据时：

1. 运营方在 SMR 系统按照规则配置数据发布，系统默认生成接口
2. 前端使用固定接口配置字段即可获取数据

1.2 整体介绍

SMR 依赖平台与技术

1. 用于操作存储数据的平台和交付内容的 API，选用 Strapi
2. 数据存储数据库我们选择易上手的 MongDB
3. 前端开发使用 React

SMR 流程如下：

其中运营方在 SMR 数据配置平台调取 Strapi 接口进行增删改查，并实时更新 MongoDB 数据库，前台调取 Strapi 接口获取数据展示。

2 Strapi 和 MongoDB

2.1 Strapi

2.1.1 Strapi 安装

为什么选择 Strapi ？

我们希望有个平台提供API，而无头 CMS 便使用 API​​ 调用将内容呈现到网页中。 从开源的无头CMS中选择

从付费、支持语言、数据库方面还是优先选择了 Strapi，其优势

1. 保持对数据的控制。使用 Strapi，可以知道数据的存储位置，并且始终可以完全控制。
2. 自托管。可以按照自己的方式托管和扩展 Strapi 项目。可以选择所需的任何托管平台：AWS，Netlify，Heroku，VPS 或专用服务器。您可以随增长而扩展，100％独立。
3. 可以选择自己喜欢的数据库。Strapi 适用于 SQL 和 NoSQL 数据库：MongoDB，PostgreSQL，MySQL，MariaDB 和 SQLite。
4. 可定制的。通过完全自定义 API，路由或插件来完全满足需求，从而快速构建逻辑。

使用安装命令

yarn create strapi-app my-project --quickstart

2.1.2 Strapi 内容类型生成

1) 创建内容

【主菜单】插件：内容类型生成器 > 【导航面板】创建一个新的 Content Type

2) 为内容写入数据

【菜单】COLLECTION TYPES > 选中新建的 Content Type，点击右侧数据区右上角""增加新的 XXX（Content Type 名称）"按钮，新增实体的字段，并保存。

3) 为内容配置访问权限

【菜单】常规：设置 > 【角色和权限】 （强烈建议对 Public 角色仅赋予只读类的权限，如 count, findOne, find）

4) 通过 API 访问 Content Type 资源

资源 API 的 Endpoint 格式为：{host}:{port}/{contetTypeName 复数形式}

2.2 MongoDB

由于 Strapi 的选择，适用于 SQL 和 NoSQL 数据库：MongoDB，PostgreSQL，MySQL，MariaDB 和 SQLite。

先进行一顿分析，然后点兵点将选择了 MongoDB（主要是以前用过SQL，就不想用啦，由于当前数据较少，其实哪种数据库影响不大）

2.2.1 介绍

mongod 与 mongo 区别

mongod 是启用 MongoDB 进程，mongod 是处理 MongoDB 系统的主要进程。它处理数据请求，管理数据存储，和执行后台管理操作。当我们运行 mongod 命令意味着正在启动 MongoDB 进程,并且在后台运行。

mongo 是一个命令行工具用于连接一个特定的 mongod 实例。当我们没有带参数运行 mongo 命令它将使用默认的端口号和 localhost 连接是对 MongoDB 进行连接操作。

2.2.2 安装及使用

mongo 启动

compass 数据库可视化工具安装

3 Strapi 和 MongoDB 关联，数据库打通

举例： 当前实现一个目录，由运营在前台配置系统增删改数据，由SMR生成API，前端调用在线上页面展示。

其中目录的线上页面展示结构如下图所示。

如果想要梳理方便运营填写的数据展示结构如下

3.1 Strapi 数据字段配置、接口发布

3.1.1 数据字段配置结构

当前Strapi中应该存储的数据结构应该如下，其中 Categorylist 代表上述数据中在最外层的“礼品卡分类”，Category 代表“按种类选购”等，依次类推。

3.1.2 内容类型生成器配置

启动 Strapi，根据数据字段配置结构表配置类型和字段。

1） 通过【菜单】内容类型生成器 > 创建一个新的集合类型。其中 Categorylist、Category、Title、Subtitle 为内容类型生成器，要分别创建。

创建成功后内容类型生成器中展示如下类型。

2） 通过【菜单】内容类型生成器 > 选中已有的集合 > 点击“添加一个新字段”为当前集合类型添加属性

3） 将 Categorylist、Category、Title、Subtitle 利用引用属性关联起来，整体如下

3.1.3 测试接口

根据2.1.3 第三步位接口配置权限后，利用{host}:{port}/{contetTypeName 复数形式}，查看接口是否可以调用。 其中Subtitle接口使用 http://localhost:1337/Subtitles 访问，可以看到可以访问成功，由于没有配置数据，接口下发空。

3.2 Strapi 关联 MongoDB 数据库，本地 Compass 设置

3.2.1 线上集群申请

3.2.2 Strapi 本地关联 MongoDB 集群、看线上集群是否更新

Strapi 本地关联 MongoDB 集群，代码如下

查看线上集群，可以看到新建的相关类型集合

3.2.3 本地可视化 Compass 关联线上集群

可以看到和线上一样的类型集合

3.3 前台页面发起请求，查看数据库更新

前台数据配置页面实现增删改查，如下所示

其中操作【增】目录-当前目录右键添加子目录、【删】目录-当前目录右键删除、【改】目录-子目录-修改保存、【查】目录-子目录

通过保存按钮来调用{host}:{port}/{contetTypeName 复数形式} 接口为当前数据新增各种类型。观察到Strapi平台、线上MongDB集群、Compass数据库都在相应更新。

基于以上实现运营方在 SMR 数据配置平台调取 Strapi 接口进行增删改查，并实时更新 MongoDB 数据库，前台调取 Strapi 接口获取数据进行线上展示。 通过SMR系统节省的过程：

1. 后端开发接口、梳理接口文档提供给前端
2. 前端依据接口文档重写接口
3. 前后端联调

运营数据也通过目录列表的形式更加清晰好操作，提升了前后端的效率。

https://getstrapi.cn/developer-docs/latest/getting-started/quick-start.html

https://strapi.io/

https://www.mongodb.com/