From 1f29f7737065a2826a54d0c0e04a94da92bd59a8 Mon Sep 17 00:00:00 2001 From: qitmac000249 Date: Mon, 7 Aug 2017 16:50:47 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0MockDoc=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E3=80=81parseMock=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/common.js | 33 +-- client/components/MockDoc/MockDoc.js | 244 ++++++++++++++++++ client/components/MockDoc/MockDoc.scss | 31 +++ .../containers/AddInterface/Result/Result.js | 5 +- client/containers/News/News.js | 2 + client/parseCommon.js | 113 ++++++++ 6 files changed, 397 insertions(+), 31 deletions(-) create mode 100644 client/components/MockDoc/MockDoc.js create mode 100644 client/components/MockDoc/MockDoc.scss create mode 100644 client/parseCommon.js diff --git a/client/common.js b/client/common.js index f2df0994..ae298bdc 100644 --- a/client/common.js +++ b/client/common.js @@ -1,34 +1,11 @@ import moment from 'moment' +import regex_parse from './parseCommon.js'; + exports.formatTime = (timestamp) => { return moment.unix(timestamp).format("YYYY-MM-DD HH:mm:ss") } -exports.regexp_parse = regexp_parse; -function regexp_parse(p,c) {//遍历json中的regexp字符串，并将其转为RegExp对象。其中p为被转换的json，c为存储对象。 - c = c || {}; - for (var i in p) { - if(! p.hasOwnProperty(i)){ - continue; - } - if (typeof p[i] === 'object') { - c[i] = (p[i].constructor === Array) ? [] : {}; - regexp_parse(p[i], c[i]); - } else { - if(/^\/.+\/$/.test(p[i])){ - var regexpStr = p[i].substring(1,p[i].length-1); - try{ - c[i] = new RegExp(regexpStr); - } - catch(e) - { - c[i] = p[i]; - } - }else{ - c[i] = p[i]; - } - - } - } - return c; -} +console.log(regex_parse) + + diff --git a/client/components/MockDoc/MockDoc.js b/client/components/MockDoc/MockDoc.js new file mode 100644 index 00000000..48542e9e --- /dev/null +++ b/client/components/MockDoc/MockDoc.js @@ -0,0 +1,244 @@ +import './MockDoc.scss' +import React, { Component } from 'react' +import PropTypes from 'prop-types' + + +// 组件用法 +// mockData: mock数据 格式为json +// docData：docData数据 格式为array + +class MockDoc extends Component { + constructor(props) { + super(props); + this.state = { + release: [] + }; + } + + static propTypes = { + mock: PropTypes.object, + doc: PropTypes.array + } + // btnCol(start,col){ + // return function(){ + // console.log(start,col); + // } + // } + render() { + let htmlData = mockToArr(this.props.mock); + htmlData = arrToHtml(htmlData,this.props.doc); + return ( +
+ { + htmlData.map(function(item,i){ + {/*//类型：Object 必有字段 备注：qwqwqw*/} + if(item.mes){ + var mes = []; + item.mes.type?mes.push( / /类型：{item.mes.type}):""; + item.mes.required?mes.push(必有字段):""; + item.mes.desc?mes.push(备注：{item.mes.desc}):""; + } + return ( +
+ {{i+1}.}{ + produceSpace(item.space) + }{setStrToHtml(item.str)} + {mes} +
+ ) + }) + } +
+ ) + } +} + +MockDoc.defaultProps = { + mock: { + "ersrcode": "@integer", + "data|9-19": [ + "123", + { + "name": "@name", + "name1": [{ + "name3":"1" + }] + }], + "data1": "123", + "data3": { + "err": "errCode", + "arr": [1,2] + } + }, + doc: [ + { type: "strisng", key: "ersrcode", required: true, desc: "错误编码" }, + { type: "number", key: "data[]", required: true, desc: "返回数据" }, + { type: "object", key: "data[].name", required: true, desc: "数据名" }, + { type: "object", key: "data[].name1[].name3", required: true, desc: "数据名1" }, + { type: "object", key: "data1", required: true, desc: "数据名1" }, + { type: "object", key: "data3.err", required: true, desc: "数据名1" }, + { type: "object", key: "data3", required: true, desc: "数据名1" }, + { type: "object", key: "data3.arr[]", required: true, desc: "数据名1" } + ] +} +function produceSpace(count){ + var space = []; + for(var i = 0; i< count; i++){ + space.push(); + } + return space; +} + +function setStrToHtml(str){ + return +} +function arrToHtml(mockArr,mock){ + + for(var i in mockArr){ + for(var item in mock){ + // if(mockArr[i].key){ + // console.log(mockArr[i].key,mock[item].key) + // } + + if(mockArr[i].key && mockArr[i].key === mock[item].key){ + mockArr[i].mes = mock[item]; + + } + } + } + return mockArr; +} + + +function mockToArr(mock,html,space,key) { + html = html || []; + space = space || 0; + key = key || []; + if(typeof mock === 'object' && space===0){ + if (mock.constructor === Array) { + html.push({ + space: space, + str: "[" + }) + space++; + }else{ + html.push({ + space: space, + str: "{" + }) + space++; + } + } + for (var i in mock) { + if (!mock.hasOwnProperty(i)) { + continue; + } + var index = i; + if(/^\w+(\|\w+)?/.test(i)){ + index = i.split("|")[0]; + } + if (typeof mock[i] === 'object') { + if(mock[i].constructor === Array){ + // shuzu + if(mock.constructor != Array){ + if(key.length){ + key.push("."+ index + "[]"); + }else{ + key.push(index + "[]"); + } + + }else{ + key.push("[]"); + } + html.push({ + space: space, + str: index + " : [", + key: key.join("") + }) + }else{ + // object + if(mock.constructor != Array){ + if(key.length){ + key.push('.'+index); + }else{ + key.push(index); + } + html.push({ + space: space, + str: index + " : {" + }) + }else{ + html.push({ + space: space, + str: "{" + }) + } + + } + space++; + mockToArr(mock[i],html,space,key); + key.pop(); + space--; + } else { + if(mock.constructor === Array){ + // html.push(produceSpace(space) + mock[i]+ ","); + html.push({ + space: space, + str: `${mock[i]}`+ "," + }) + }else{ + // html.push(produceSpace(space) + index + ":" + mock[i] + ","); + if(mock.constructor != Array){ + if(key.length){ + // doc.push(key+"."+index); + html.push({ + space: space, + str: index + " : " + `${mock[i]}` + ",", + key: key.join("")+"."+index + }) + }else{ + // doc.push(key + index); + html.push({ + space: space, + str: index + " : " + `${mock[i]}` + ",", + key: key.join("") + index + }) + } + }else{ + html.push({ + space: space, + str: index + " : " + `${mock[i]}` + ",", + key: key.join("") + }) + } + + } + + } + + } + if(typeof mock === 'object'){ + html[html.length-1].str = html[html.length-1].str.substr(0,html[html.length-1].str.length-1); + if (mock.constructor === Array) { + space--; + // html.push(produceSpace(space)+"]"); + html.push({ + space: space, + str: "]" + }) + }else{ + space--; + // html.push(produceSpace(space)+"}"); + html.push({ + space: space, + str: "}" + }) + } + } + if(space != 0){ + html[html.length-1].str = html[html.length-1].str + ","; + } + return html; +} + +export default MockDoc; diff --git a/client/components/MockDoc/MockDoc.scss b/client/components/MockDoc/MockDoc.scss new file mode 100644 index 00000000..0ce2fced --- /dev/null +++ b/client/components/MockDoc/MockDoc.scss @@ -0,0 +1,31 @@ +.MockDoc{ + background-color: #F6F6F6; + // padding: 16px; + border:16px solid #F6F6F6; + overflow: auto; + width: 500px; + height: 500px; + word-break:keep-all; /* 不换行 */ + white-space:nowrap; + .jsonItem{ + font-size: 14px; + width: auto; + + } + .jsonitemNum{ + margin-right: 16px; + display: inline-block; + width: 25px; + border-right: 1px solid gray; + } + .valueLight{ + color: #108ee9; + } +} +.spaces{ + display: inline-block; + width: 30px; +} +.keymes{ + margin-left: 20px; +} \ No newline at end of file diff --git a/client/containers/AddInterface/Result/Result.js b/client/containers/AddInterface/Result/Result.js index 403cdf98..759983d5 100644 --- a/client/containers/AddInterface/Result/Result.js +++ b/client/containers/AddInterface/Result/Result.js @@ -3,8 +3,7 @@ import { Card } from 'antd' import { connect } from 'react-redux' import PropTypes from 'prop-types' import Mock from 'mockjs' -import common from '../../../common'; - +import parseCommon from '../../../parseCommon'; @connect( state => { return { @@ -30,7 +29,7 @@ class Result extends Component { let json, j; try{ json = JSON.parse(resParams); - json = common.regexp_parse(json); + json = parseCommon.regexp_parse(json); }catch(e){ json = false; } diff --git a/client/containers/News/News.js b/client/containers/News/News.js index 540324ae..36260afa 100644 --- a/client/containers/News/News.js +++ b/client/containers/News/News.js @@ -4,6 +4,7 @@ import NewsTimeline from './NewsTimeline/NewsTimeline' import { connect } from 'react-redux' import PropTypes from 'prop-types' import NewsList from './NewsList/NewsList.js' +// import MockDoc from '../../components/MockDoc/MockDoc.js' import { fetchNewsData } from '../../actions/news.js' @@ -46,6 +47,7 @@ class News extends Component { const data = this.props.newsData return (
+ {/**/}
diff --git a/client/parseCommon.js b/client/parseCommon.js new file mode 100644 index 00000000..272d596a --- /dev/null +++ b/client/parseCommon.js @@ -0,0 +1,113 @@ + +function regexp_parse(p, c) {//遍历json中的regexp字符串，并将其转为RegExp对象。其中p为被转换的json，c为存储对象。 "kry|regexp/i|":"<(.*)>(.*)<\/(.*)>|<(.*)\/>" + c = c || {}; + for (var i in p) { + if (!p.hasOwnProperty(i)) { + continue; + } + if (typeof p[i] === 'object') { + c[i] = (p[i].constructor === Array) ? [] : {}; + regexp_parse(p[i], c[i]); + } else { + + if (/^\w+\s*\|\s*(regexp){1}\s*(\/\s*[img])?/.test(i)) { + var regexpStr = i.split("|"); + var regex = regexpStr[1].split("/"); + if (regex[0]) { + try { + if (regex[1]) { + c[i.replace(/\|regexp\s*(\/[img]*)?\s*/, "")] = new RegExp(p[i], regex[1]); + } else { + c[i.replace(/\|regexp\s*(\/[img]*)?\s*/, "")] = new RegExp(p[i]); + } + } + catch (e) { + c[i] = p[i]; + } + } + + } else { + c[i] = p[i]; + } + + } + } + return c; +} + + + + +function mockToDocModel(mock,doc,key) { + doc = doc || []; + key = key || []; + for (var i in mock) { + if (!mock.hasOwnProperty(i)) { + continue; + } + var index = i; + if(/^\w+(\|\w+)?/.test(i)){ + index = i.split("|")[0]; + } + if (typeof mock[i] === 'object') { + if (mock[i].constructor === Array) { + //为数组时 + if(mock.constructor != Array){ + if(key.length){ + key.push("."+ index + "[]"); + }else{ + key.push(index + "[]"); + } + + }else{ + key.push("[]"); + } + doc.push(key.join("")); + + } else { + // 为object时 + if(mock.constructor != Array){ + if(key.length){ + key.push('.'+index); + }else{ + key.push(index); + } + + doc.push(key.join()); + } + } + mockToDocModel(mock[i],doc,key); + key.pop(); + } else { + if(mock.constructor != Array){ + if(key.length){ + doc.push(key.join("")+"."+index); + }else{ + doc.push(index); + } + } + } + } + return doc; +} +mockToDocModel({ + "errcode": "@integer", + "data|9-19": [ + "123", + { + "name": "@name", + "name1": [{ + "name3":"1" + }] + }], + "data4": [1,2], + "data1": "123", + "data3": { + "err": "errCode", + "arr": [1,2] + } +}) +module.exports = { + mockToDocModel: mockToDocModel, + regexp_parse: regexp_parse +};