基于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.jsCDN文件保存目录(默认/usr/local/services/cdn/dms):dms-upload/config/config.defult.js cdnDirCDN文件访问地址前缀(默认//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 –save2.带参数使用示例(伪代码)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