基于 Json Schema 的动态数据管理神器 -DMS
介绍
什么是 DMS？
DMS Github：基于 Json Schema/UI Schema 模块化的 Json 动态数据管理平台。
什么是 Json Schema/UI Schema？
用于动态生成表单的 Schema，参考 Json Schema 使用案例
官方文档
使用场景有哪些？
无论前端、后端、移动端、运维，理论上所有需要动态配置数据的场景都可以使用。
针对前端、移动端：可以配置页面每个模块展示型数据，也可以配置各种版本号用于动态更新，各种功能开关、页面主题等。
针对后端：可以配置业务相关的 ID，配置类目，城市列表，热门等。
针对运维：可以作为区分环境的配置中心等。
当然使用场景远不止这些 ……
可以运用到生产环境吗？
当然可以，DMS 存储的数据读写是完全分开的，目前支持通过 Redis、CDN(推荐) 两种获取数据方式。即使 DMS 自身服务器挂掉，也不会影响数据的读取。强烈推荐使用 CDN 的方式，这样稳定性和使用的 CDN 是一样的。
DMS 应用、模块、参数介绍
应用：包含一个或多个模块，包含一个或多个参数
模块：配置数据的最小单位
参数：使模块根据不同参数配置不同数据（如：每个城市展示的频道页不一样）
DMS 特性
实时表单预览；
模块化（组件化）数据管理；
支持表单数据逻辑判断、数据验证；
Schema 数据自动保存，防止误操作及未知异常；
支持动态增加参数，参数本身也可以为 DMS 生成的配置数据；
配合 dms-upload 可以快速将通过表单上传的文件传入 CDN/ 云存储
符合实际场景的权限控制：开发只负责 schema 编写，需求方配置所有数据；
支持 Schema 生成所有基本表单类型及高级控件，如：日期选择器、进度条、密码框、颜色选择器等；
实时数据预览 / 审核（配合 dms-fetch，同时支持服务端代理请求，及浏览器端请求的数据预览与审核）
快速开始
请先确保已经安装好：nodejs8+、mysql、redis，并已开启相关服务
安装 DMS
> git clone https://github.com/win-winFE/dms.git
> yarn # 若没有 yarn，请使用 npm install
创建日志目录
> mkdir /opt/logs/nodejs -p
执行初始化 sql
使用 mysql 执行 dms/database/dms.sql
修改项目中 mysql/redis 相关配置 dms/config/config.default.js（mysql 默认密码为：root1234）
启动 / 停止 / 调试
启动端口默认为：7101，需要修改请修改 dms/package.json 文件 start 部分的 7101
> yarn start # 启动，若没有 yarn，请使用 npm run start
> yarn stop # 停止，npm run stop
> yarn dev # 调试，npm run dev
注册
进入：http://localhost:7101，将自动跳转到登录页，选择【注册】，按要求填写相关数据，注册成功将自动跳转到【应用管理】页面
新建示例应用
点击【新建应用】，新建如下应用
新建示例模块
点击“淘宝首页”的【模块列表】，点击【新建模块】
编写该模块 Schema
点击“首页 banner”的【编辑 Schema 定义】，复制如下 Schema 到【Schema 定义】中并【保存 Schema】
{
“title”: “ 示例 ”,
“description”: “ 视频 / 图片展示配置示例 ”,
“type”: “array”,
“minItems”: 3,
“items”: {
“type”: “object”,
“properties”: {
“url”: {
“title”: “ 跳转链接 ”,
“type”: “string”
},
“imgs”: {
“title”: “ 轮播图片 ”,
“type”: “string”,
“format”: “file”
}
}
}
}
添加一个参数
进入【参数列表】，添加如下参数
【编辑参数】，【提交】如下参数
编辑数据
点击左侧菜单，进入【数据管理】，进入“淘宝首页”应用的【模块列表】，选择城市后点击【进入】，再选择“首页 banner”的【编辑模块数据】，此时还不能上传图片、保存数据，需要启用 dms-upload
启动 dms-upload
> git clone https://github.com/win-winFE/dms-upload.git
> yarn # npm install
执行初始化 sql
使用 mysql 执行 dms-upload/database/dms-upload.sql
使用 mysql 执行 dms-upload/database/init.sql（用于上传时的权限验证，默认：root root1234）
修改项目中 mysql/redis 相关配置 dms/config/config.default.js（mysql 默认密码为：root1234）
配置 dms-upload
启动端口（默认 7100）：dms-upload/package.json start 部分，若修改端口。请修改 dms/app/util/constants.js dmsUploadAPI 中的请求地址前缀
数据库配置：dms-upload/config/config.defult.js
CDN 文件保存目录（默认 /usr/local/services/cdn/dms）：dms-upload/config/config.defult.js cdnDir
CDN 文件访问地址前缀（默认 //127.0.0.1:5000/dms）：dms-upload/config/config.defult.js cdnPrefix
新建 CDN 文件（图片、json 数据）保存目录
> mkdir /usr/local/services/cdn/dms/data -p # 若未使用默认 cdnDir，请修改 data 前面部分
> mkdir /usr/local/services/cdn/dms/res -p # 若未使用默认 cdnDir，请修改 res 前面部分
启动 dms-upload
> yarn start # npm run start
本地调试上传图片回显
> cd /usr/local/services/cdn
> python -m SimpleHTTPServer 5000 # python3 请使用：python3 -m http.server 5000
继续回到 DMS 平台编辑数据
提交下列数据
直接访问数据（用于非 js 使用场景）
临时数据：提交后复制成功 Toast 中的链接，可以直接访问临时数据数据
正式数据：将临时数据审核为正式数据，也可以通过 Toast 中的链接直接访问正式数据
使用 dms-fetch 访问数据（用于 js 使用场景）
1. 项目中安装 dms-fetch（不建议，强依赖 axios，说明见 Github）
> yarn add dms-fetch # npm install dms-fetch –save
2. 带参数使用示例（伪代码）
import {getDMSDataByCDN} from ‘dms-fetch’;
import …
// 复制编辑数据页面的唯一标示，下面是 React 应用配合使用 DMS 参数的示例
export default class extends React.Component {
…
fetchData = async () => {
const {city} = getParams(this.props.location.search);
const dmsData = await getDMSDataByCDN(`/7/10/city/${city}`, this.props.location.search);
this.setState({
dmsData,
});
};
…
render() {
…
}
}
更多高级用法请参考 DMS Github