前端、后端、運(yùn)維都能用的動態(tài)json數(shù)據(jù)管理神器，節(jié)省你大量的開發(fā)、設(shè)計(jì)數(shù)據(jù)庫、運(yùn)維的時間

canopus4u 發(fā)布于2019-08-23 16:32 / 866人閱讀

摘要：基于的動態(tài)數(shù)據(jù)管理神器介紹什么是基于模塊化的動態(tài)數(shù)據(jù)管理平臺。什么是用于動態(tài)生成表單的，參考使用案例官方文檔使用場景有哪些無論前端后端移動端運(yùn)維，理論上所有需要動態(tài)配置數(shù)據(jù)的場景都可以使用。針對運(yùn)維可以作為區(qū)分環(huán)境的配置中心等。

基于Json Schema的動態(tài)數(shù)據(jù)管理神器-DMS 介紹 什么是DMS？

DMS Github：基于Json Schema/UI Schema模塊化的Json動態(tài)數(shù)據(jù)管理平臺。

什么是Json Schema/UI Schema？

用于動態(tài)生成表單的Schema，參考 Json Schema使用案例

官方文檔

使用場景有哪些？

無論前端、后端、移動端、運(yùn)維，理論上所有需要動態(tài)配置數(shù)據(jù)的場景都可以使用。

針對前端、移動端：可以配置頁面每個模塊展示型數(shù)據(jù)，也可以配置各種版本號用于動態(tài)更新，各種功能開關(guān)、頁面主題等。

針對后端：可以配置業(yè)務(wù)相關(guān)的ID，配置類目，城市列表，熱門等。

針對運(yùn)維：可以作為區(qū)分環(huán)境的配置中心等。

當(dāng)然使用場景遠(yuǎn)不止這些......

可以運(yùn)用到生產(chǎn)環(huán)境嗎？

當(dāng)然可以，DMS存儲的數(shù)據(jù)讀寫是完全分開的，目前支持通過Redis、CDN(推薦)兩種獲取數(shù)據(jù)方式。即使DMS自身服務(wù)器掛掉，也不會影響數(shù)據(jù)的讀取。強(qiáng)烈推薦使用CDN的方式，這樣穩(wěn)定性和使用的CDN是一樣的。

DMS應(yīng)用、模塊、參數(shù)介紹

應(yīng)用：包含一個或多個模塊，包含一個或多個參數(shù)

模塊：配置數(shù)據(jù)的最小單位

參數(shù)：使模塊根據(jù)不同參數(shù)配置不同數(shù)據(jù)（如：每個城市展示的頻道頁不一樣）

DMS特性

實(shí)時表單預(yù)覽；

模塊化（組件化）數(shù)據(jù)管理；

支持表單數(shù)據(jù)邏輯判斷、數(shù)據(jù)驗(yàn)證；

Schema數(shù)據(jù)自動保存，防止誤操作及未知異常；

支持動態(tài)增加參數(shù)，參數(shù)本身也可以為DMS生成的配置數(shù)據(jù)；

配合dms-upload可以快速將通過表單上傳的文件傳入CDN/云存儲

符合實(shí)際場景的權(quán)限控制：開發(fā)只負(fù)責(zé)schema編寫，需求方配置所有數(shù)據(jù)；

支持Schema生成所有基本表單類型及高級控件，如：日期選擇器、進(jìn)度條、密碼框、顏色選擇器等；

實(shí)時數(shù)據(jù)預(yù)覽/審核（配合dms-fetch，同時支持服務(wù)端代理請求，及瀏覽器端請求的數(shù)據(jù)預(yù)覽與審核）

快速開始

請先確保已經(jīng)安裝好：nodejs8+、mysql、redis，并已開啟相關(guān)服務(wù)

安裝DMS

> git clone https://github.com/win-winFE/dms.git
> yarn # 若沒有yarn，請使用 npm install

創(chuàng)建日志目錄

> mkdir /opt/logs/nodejs -p

執(zhí)行初始化sql

使用mysql執(zhí)行 dms/database/dms.sql

修改項(xiàng)目中mysql/redis相關(guān)配置dms/config/config.default.js（mysql默認(rèn)密碼為：root1234）

啟動/停止/調(diào)試

啟動端口默認(rèn)為：7101，需要修改請修改dms/package.json文件start部分的7101

> yarn start # 啟動，若沒有yarn，請使用 npm run start
> yarn stop # 停止， npm run stop
> yarn dev # 調(diào)試，npm run dev

注冊

進(jìn)入：http://localhost:7101，將自動跳轉(zhuǎn)到登錄頁，選擇【注冊】，按要求填寫相關(guān)數(shù)據(jù)，注冊成功將自動跳轉(zhuǎn)到【應(yīng)用管理】頁面

新建示例應(yīng)用

點(diǎn)擊【新建應(yīng)用】，新建如下應(yīng)用

新建示例模塊

點(diǎn)擊“淘寶首頁”的【模塊列表】，點(diǎn)擊【新建模塊】

編寫該模塊Schema

點(diǎn)擊“首頁banner”的【編輯Schema定義】，復(fù)制如下Schema到【Schema定義】中并【保存Schema】

{
  "title": "示例",
  "description": "視頻/圖片展示配置示例",
  "type": "array",
  "minItems": 3,
  "items": {
    "type": "object",
    "properties": {
      "url": {
        "title": "跳轉(zhuǎn)鏈接",
        "type": "string"
      },
      "imgs": {
        "title": "輪播圖片",
        "type": "string",
        "format": "file"
      }
    } 
  }
}

添加一個參數(shù)

進(jìn)入【參數(shù)列表】，添加如下參數(shù)

【編輯參數(shù)】，【提交】如下參數(shù)

編輯數(shù)據(jù)

點(diǎn)擊左側(cè)菜單，進(jìn)入【數(shù)據(jù)管理】，進(jìn)入“淘寶首頁”應(yīng)用的【模塊列表】，選擇城市后點(diǎn)擊【進(jìn)入】，再選擇“首頁banner”的【編輯模塊數(shù)據(jù)】，此時還不能上傳圖片、保存數(shù)據(jù)，需要啟用dms-upload

啟動dms-upload

> git clone https://github.com/win-winFE/dms-upload.git
> yarn # npm install

執(zhí)行初始化sql

使用mysql執(zhí)行 dms-upload/database/dms-upload.sql

使用mysql執(zhí)行 dms-upload/database/init.sql（用于上傳時的權(quán)限驗(yàn)證，默認(rèn)：root root1234）

修改項(xiàng)目中mysql/redis相關(guān)配置dms/config/config.default.js（mysql默認(rèn)密碼為：root1234）

配置dms-upload

啟動端口（默認(rèn)7100）：dms-upload/package.json start部分，若修改端口。請修改 dms/app/util/constants.js dmsUploadAPI 中的請求地址前綴

數(shù)據(jù)庫配置：dms-upload/config/config.defult.js

CDN文件保存目錄（默認(rèn)/usr/local/services/cdn/dms）：dms-upload/config/config.defult.js cdnDir

CDN文件訪問地址前綴（默認(rèn)//127.0.0.1:5000/dms）：dms-upload/config/config.defult.js cdnPrefix

新建CDN文件（圖片、json數(shù)據(jù)）保存目錄

> mkdir /usr/local/services/cdn/dms/data -p # 若未使用默認(rèn)cdnDir，請修改data前面部分
> mkdir /usr/local/services/cdn/dms/res -p # 若未使用默認(rèn)cdnDir，請修改res前面部分

啟動dms-upload

> yarn start # npm run start

本地調(diào)試上傳圖片回顯

> cd /usr/local/services/cdn
> python -m SimpleHTTPServer 5000 # python3 請使用： python3 -m http.server 5000

繼續(xù)回到DMS平臺編輯數(shù)據(jù)

提交下列數(shù)據(jù)

直接訪問數(shù)據(jù)（用于非js使用場景）

臨時數(shù)據(jù)：提交后復(fù)制成功Toast中的鏈接，可以直接訪問臨時數(shù)據(jù)數(shù)據(jù)

正式數(shù)據(jù)：將臨時數(shù)據(jù)審核為正式數(shù)據(jù)，也可以通過Toast中的鏈接直接訪問正式數(shù)據(jù)

使用dms-fetch訪問數(shù)據(jù)（用于js使用場景）

1.項(xiàng)目中安裝dms-fetch（不建議，強(qiáng)依賴axios，說明見Github）

> yarn add dms-fetch # npm install dms-fetch --save

2.帶參數(shù)使用示例（偽代碼）

import { getDMSDataByCDN } from "dms-fetch";
import ...

// 復(fù)制編輯數(shù)據(jù)頁面的唯一標(biāo)示，下面是React應(yīng)用配合使用DMS參數(shù)的示例
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