前端、后端、运维都能用的动态 json 数据管理神器，节省你大量的开发、设计数据库、运维的时间...

基于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，说明见QA）

> 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() {...}
}
复制代码