From 25bb330afeb694083fe1f54f867de49c8271a605 Mon Sep 17 00:00:00 2001 From: Aaron <427787340@qq.com> Date: Thu, 29 Aug 2019 16:49:52 +0800 Subject: [PATCH] 增加mockjs，更新Scheme文档，优化Scheme静态数据处理逻辑 --- examples/api-mock/index.js | 102 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ examples/api-mock/module/index.js | 25 +++++++++++++++++++++++++ examples/api-mock/util.js | 32 ++++++++++++++++++++++++++++++++ examples/main.js | 18 +++++++----------- examples/views/docs/component/scheme.md | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- package.json | 1 + packages/scheme/index.vue | 22 ++++++++++++---------- yarn.lock | 12 ++++++++++++ 8 files changed, 274 insertions(+), 23 deletions(-) create mode 100644 examples/api-mock/index.js create mode 100644 examples/api-mock/module/index.js create mode 100644 examples/api-mock/util.js diff --git a/examples/api-mock/index.js b/examples/api-mock/index.js new file mode 100644 index 0000000..ae031fa --- /dev/null +++ b/examples/api-mock/index.js @@ -0,0 +1,102 @@ +import Mock from 'mockjs'; +import { parse } from './util'; +import moduleAPI from '@/api-mock/module'; + +let MockCache = {}; + +const MockBot = { + // 通用模板API + fastAPI: { + // 获取数据列表 + page: (base) => config => { + const list = MockCache[base] || []; + const param = parse(config.url) || {}; + const { page = 1, size = 10, ...query } = param; + // 计算有几个搜索条件 + let queryCount = false; + for (let key in query) { + if (query[key]) { + queryCount += 1; + break; + } + } + // 根据搜索条件过滤结果 + const filteredList = queryCount > 0 ? list.filter(data => { + let result = false; + for (let key in query) { + if (data[key] === query[key]) { + result = true; + break; + } + } + return result; + }) : list; + // 根据结果处理分页数据 + const _page = Number(page); + const _limit = Number(size); + const pageList = filteredList.filter((item, index) => index < _limit * _page && index >= _limit * (_page - 1)); + const response = { + page: _page, + size: _limit, + result: { + list: pageList, + total: filteredList.length, + }, + code: 0, + }; + return response; + }, + // 查询数据详情 + get: (base) => config => { + const list = MockCache[base] || []; + const arr = config.url.split('/'); + const id = arr[arr.length - 1]; + const result = list.find((item) => item.id == id); + return { + result: result, + code: 0, + }; + }, + // 新增数据 + add: (base) => config => { + const param = JSON.parse(config.body); + MockCache[base].unshift(param); + return { + code: 0, + }; + }, + // 编辑数据 + update: (base) => config => { + const param = JSON.parse(config.body); + const index = MockCache[base].findIndex(item => item.id === param.id); + MockCache[base][index] = param; + return { + code: 0, + }; + }, + // 删除数据 + delete: (base) => config => { + const ids = JSON.parse(config.body); + ids.forEach(id => { + MockCache[base] = MockCache[base].filter(item => item.id !== id); + }); + return { + code: 0, + }; + } + }, + // 根据通用模板API快速创建模拟接口 + fastMock: (url, list) => { + MockCache[url] = list; + Mock.mock(new RegExp(`\/${url}\/page`), 'get', MockBot.fastAPI.page(url)); + Mock.mock(new RegExp(`\/${url}\/get`), 'get', MockBot.fastAPI.get(url)); + Mock.mock(new RegExp(`\/${url}\/get/id`), 'get', MockBot.fastAPI.get(url)); + Mock.mock(new RegExp(`\/${url}\/info/id`), 'get', MockBot.fastAPI.get(url)); + Mock.mock(new RegExp(`\/${url}\/add`), 'post', MockBot.fastAPI.add(url)); + Mock.mock(new RegExp(`\/${url}\/update`), 'post', MockBot.fastAPI.update(url)); + Mock.mock(new RegExp(`\/${url}\/delete`), 'post', MockBot.fastAPI.delete(url)); + }, +} + +// 产品管理 +MockBot.fastMock('product', moduleAPI.product); \ No newline at end of file diff --git a/examples/api-mock/module/index.js b/examples/api-mock/module/index.js new file mode 100644 index 0000000..01675cb --- /dev/null +++ b/examples/api-mock/module/index.js @@ -0,0 +1,25 @@ +import Mock from 'mockjs'; +import MockUtil from '@/api-mock/util'; + +export default { + // 产品管理 + product: MockUtil.fastList({ + id: '@guid()', + code: '@string(16)', + name: '@cword(3, 12)', + 'type|1': ['TYPE_A', 'TYPE_B', 'TYPE_C', 'TYPE_D'], + "status|0-1": 1, + remark: '@csentence(0, 30)', + cities: '@zip()', + // cities: ['110000', '310000'], + picUrl: Mock.Random.image('1080x720'), + thumbnalUrl: Mock.Random.image('120x80'), + serviceDescription: '

这里是标题

这是内容第一段。

这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段，这是内容第二段。




', + // "isActive|0-1": 1, + isActive: '@boolean()', + createTime: '@datetime()', + createUser: '@cname()', + modifyTime: '@datetime()', + modifyUser: '@cname()' + }, 43), +} \ No newline at end of file diff --git a/examples/api-mock/util.js b/examples/api-mock/util.js new file mode 100644 index 0000000..f41c451 --- /dev/null +++ b/examples/api-mock/util.js @@ -0,0 +1,32 @@ +import Mock from 'mockjs'; + +export const parse = (url) => { + let obj = {};// 创建一个Object + let reg = /[?&][^?&]+=[^?&]+/g;// 正则匹配 ?&开始 =拼接 非?&结束 的参数 + let arr = url.match(reg);// match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。 + // arr数组形式 ['?id=12345','&a=b'] + if (arr) { + arr.forEach((item) => { + /** + * tempArr数组 ['id','12345']和['a','b'] + * 第一个是key，第二个是value + * */ + let tempArr = item.substring(1).split('='); + let key = decodeURIComponent(tempArr[0]); + let val = decodeURIComponent(tempArr[1]); + obj[key] = val; + }); + } + return obj; +} + +export default { + // 根据配置文件和数量快速生成数据列表 + fastList: (config, count) => { + const list = [] + for (let i = 0; i < count; i++) { + list.push(Mock.mock(config)); + } + return list; + }, +} \ No newline at end of file diff --git a/examples/main.js b/examples/main.js index 82b4b8c..cf7701f 100644 --- a/examples/main.js +++ b/examples/main.js @@ -3,6 +3,7 @@ import App from '@/App.vue'; import router from '@/router'; import store from '@/store'; import axios from 'axios'; +import '@/api-mock'; import ElementUI from 'element-ui'; import EagleWebToolkit from '../packages'; @@ -14,33 +15,28 @@ import '@/styles/index.scss'; import "highlight.js/styles/github.css"; const request = axios.create({ - baseURL: 'http://47.110.137.80:7104/cbin/', + baseURL: 'http://localhost', timeout: 1000 * 60, withCredentials: true, - headers: { - token: 'ca2bd2fbc89ee1fdf26c975255905f8b', - 'Accept-Language': 'zh-CN' - } }); // respone 拦截器 request.interceptors.response.use( response => { const { data = {}, config } = response; - const { code } = data; + const { code = 0 } = data; if (config && config.interceptors === false) { // 请求配置不做返回拦截的情况 return response; } else { - if (`${code}` === '0') { + if (`${code}` === '0' || `${code}` === '200') { // 请求成功 return data; - } else { - return false; + } else { // 其它错误，开发环境提示 + return { code }; } } }, error => { - console.error(error); - return { success: false }; + return { code: 404 }; }); Vue.prototype.$axios = request; diff --git a/examples/views/docs/component/scheme.md b/examples/views/docs/component/scheme.md index 744091b..0a79699 100644 --- a/examples/views/docs/component/scheme.md +++ b/examples/views/docs/component/scheme.md @@ -10,7 +10,7 @@ Scheme是一个数据驱动的解决方案，通过既定的业务配置参数 ```html +``` + +::: + +## API配置 + +传入CURD对应API的Promise方法，返回指定格式的结果 + +::: snippet 配置`option`参数设置组件配置项，**searchAPI**查询、**detailAPI**查询详情、**getAPI**编辑查询数据、**deleteAPI**删除、**newAPI**新增保存、**editAPI**编辑保存 + +```html + + + +``` + +::: + ## API ## Attribute 属性 diff --git a/package.json b/package.json index d483ea1..82a66a7 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "axios": "^0.19.0", "core-js": "^2.6.5", "element-ui": "^2.11.0", + "mockjs": "^1.0.1-beta3", "nprogress": "^0.2.0", "vue": "^2.6.10", "vue-router": "^3.0.3", diff --git a/packages/scheme/index.vue b/packages/scheme/index.vue index f67fde9..a863edc 100644 --- a/packages/scheme/index.vue +++ b/packages/scheme/index.vue @@ -167,7 +167,6 @@ import { generateListSpace } from './parser'; import { stringify, getUUID } from './utils'; let _$http = null; -let TABLE_DATA_STATIC = []; export default { name: 'Scheme', @@ -270,6 +269,8 @@ export default { tableLoading: false, // 表格当前操作列 tableCurrentRow: null, + // 表格静态数据 + tableDataStatic: [], }; }, created() { @@ -292,7 +293,7 @@ export default { mounted() { const defaultData = this.value; this.totalCount = defaultData.length; - TABLE_DATA_STATIC = defaultData.map(item => { return { ...item, id: item.id || getUUID() } }); + this.tableDataStatic = defaultData.map(item => { return { ...item, id: item.id || getUUID() } }); // 设置自动加载数据 if (this.option.auto !== false) { this.handleSearch(); @@ -399,7 +400,7 @@ export default { break; } } - const resultData = searchModelCount > 0 ? TABLE_DATA_STATIC.filter(data => { + const resultData = searchModelCount > 0 ? this.tableDataStatic.filter(data => { let result = false; for (let modelKey in this.searchModel) { let modelValue = this.searchModel[modelKey]; @@ -409,7 +410,7 @@ export default { } } return result; - }) : TABLE_DATA_STATIC; + }) : this.tableDataStatic; const begin = (this.currentPage - 1) * this.pageSize; const end = this.currentPage * this.pageSize; this.tableData = resultData.slice(begin, end); @@ -566,8 +567,9 @@ export default { this.dialogLoading = false; }); } else { - TABLE_DATA_STATIC = TABLE_DATA_STATIC.filter(item => item.id !== selection[0].id); - // TABLE_DATA_STATIC.splice(selection[0].$index, 1); + selection.forEach(slt => { + this.tableDataStatic = this.tableDataStatic.filter(item => item.id !== slt.id); + }); this.hideDialog(); this.handleSearch(); } @@ -648,9 +650,9 @@ export default { this.dialogLoading = false; }); } else { - TABLE_DATA_STATIC.push({ ...param, id: param.id || getUUID() }); - this.totalCount = TABLE_DATA_STATIC.length; - // this.hideDialog(); + this.tableDataStatic.unshift({ ...param, id: param.id || getUUID() }); + this.totalCount = this.tableDataStatic.length; + this.hideDialog(); this.handleSearch(); } }, @@ -685,7 +687,7 @@ export default { this.dialogLoading = false; }); } else { - this.$set(TABLE_DATA_STATIC, this.tableCurrentRow.$index, { ...param, id: param.id || getUUID() }); + this.$set(this.tableDataStatic, this.tableDataStatic.findIndex(item => item.id === param.id), { ...param, id: param.id || getUUID() }); this.hideDialog(); this.handleSearch(); } diff --git a/yarn.lock b/yarn.lock index 0bc91be..653c434 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2109,6 +2109,11 @@ combined-stream@^1.0.6, combined-stream@~1.0.6: dependencies: delayed-stream "~1.0.0" +commander@*: + version "3.0.0" + resolved "https://registry.npm.taobao.org/commander/download/commander-3.0.0.tgz#0641ea00838c7a964627f04cddc336a2deddd60a" + integrity sha1-BkHqAIOMepZGJ/BM3cM2ot7d1go= + commander@2.17.x: version "2.17.1" resolved "https://registry.npm.taobao.org/commander/download/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf" @@ -4899,6 +4904,13 @@ mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@~0.5.1: dependencies: minimist "0.0.8" +mockjs@^1.0.1-beta3: + version "1.0.1-beta3" + resolved "https://registry.npm.taobao.org/mockjs/download/mockjs-1.0.1-beta3.tgz#d234f3c27256397564f2c955142e891909537209" + integrity sha1-0jTzwnJWOXVk8slVFC6JGQlTcgk= + dependencies: + commander "*" + move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" -- libgit2 0.21.0