前端、後端、運維都能用的動態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，說明見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