sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: 移除 mockjs 以及相关示例

Browse Source
This commit is contained in:
FairyEver
2020-05-07 13:52:35 +08:00
parent a1b396ee3b
commit 804f66eb05
25 changed files with 421 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/menu/modules/demo-plugins.js
View File

@@ -4,16 +4,6 @@ export default {
icon: 'plug',
children: (pre => [
{ path: `${pre}index`, title: '插件', icon: 'home' },
{
path: `${pre}mock`,
title: '模拟数据',
icon: 'globe',
children: [
{ path: `${pre}mock/ajax`, title: '拦截异步请求' },
{ path: `${pre}mock/dpd`, title: 'DPD 规则' },
{ path: `${pre}mock/dtd`, title: 'DTD 规则' }
]
},
{
path: `${pre}import`,
title: '导入',

33
src/mock/api/demo.business.issues.142.js
View File

@@ -1,33 +0,0 @@
const db = [
{ id: '1', name: '用户 1', address: '上海市普陀区金沙江路 1518 弄' },
{ id: '2', name: '用户 2', address: '上海市普陀区金沙江路 1517 弄' },
{ id: '3', name: '用户 3', address: '上海市普陀区金沙江路 1519 弄' },
{ id: '4', name: '用户 4', address: '上海市普陀区金沙江路 1516 弄' }
]
export default [
{
path: '/api/demo/business/issues/142/fetch.*',
method: 'get',
handle () {
return {
code: 0,
msg: '获取数据成功',
data: {
list: db
}
}
}
},
{
path: '/api/demo/business/issues/142/detail.*',
method: 'get',
handle ({ params }) {
return {
code: 0,
msg: '获取数据成功',
data: db.find(e => e.id === params.id)
}
}
}
]

28
src/mock/api/demo.business.table.1.js
View File

@@ -1,28 +0,0 @@
export default [
{
path: '/api/demo/business/table/1/fetch.*',
method: 'get',
handle ({ params, Repeat }) {
let { pageSize } = params
return {
code: 0,
msg: '获取数据成功',
data: {
page: {
total: 1000
},
list: Repeat(pageSize, {
'key': '@guid',
'value|1': [10, 100, 200, 500],
'type': '@boolean',
'admin': '@cname',
'adminNote': '@cparagraph(0.5)',
'dateTimeCreat': '@datetime',
'used': '@boolean',
'dateTimeUse': '@datetime'
})
}
}
}
}
]

23
src/mock/api/demo.plugins.mock.ajax.js
View File

@@ -1,23 +0,0 @@
export default [
{
path: '/api/demo/plugins/mock/ajax',
method: 'get',
handle ({ Repeat }) {
return {
code: 0,
msg: '获取数据成功',
data: {
list: Repeat('4-10', {
'id|+1': 1,
'name': '@CNAME',
'star|1-5': '★',
'delFlag|1': [0, 1],
'creatDate': '@DATE',
'address': '@CITY',
'zip': '@ZIP'
})
}
}
}
}
]

31
src/mock/api/sys.login.js
View File

@@ -1,31 +0,0 @@
const userDB = [
{ username: 'admin', password: 'admin', uuid: 'admin-uuid', name: 'Admin' },
{ username: 'editor', password: 'editor', uuid: 'editor-uuid', name: 'Editor' },
{ username: 'user1', password: 'user1', uuid: 'user1-uuid', name: 'User1' }
]
export default [
{
path: '/api/login',
method: 'post',
handle ({ body }) {
const user = userDB.find(e => e.username === body.username && e.password === body.password)
if (user) {
return {
code: 0,
msg: '登录成功',
data: {
...user,
token: '8dfhassad0asdjwoeiruty'
}
}
} else {
return {
code: 401,
msg: '用户名或密码错误',
data: {}
}
}
}
}
]

73
src/mock/d2-mock/index.js
View File

@@ -1,73 +0,0 @@
import Mock from 'mockjs'
import qs from 'qs'
import withCredentials from './patch/withCredentials'
/* 补丁 */
withCredentials(Mock)
/* Mock 默认配置 */
Mock.setup({ timeout: '200-300' })
/* 扩展 [生成器] */
const Generator = (prop, template) => {
const obj = {}
obj[prop] = [template]
return Mock.mock(obj)
}
/* 扩展 [循环] */
const Repeat = (num, itemTemplate) => Generator(`data|${num}`, itemTemplate).data
const CustomExtends = {
Generator,
Repeat,
Mock,
Random: Mock.Random
}
const extend = (prop, value) => {
CustomExtends[prop] = value
}
/* 装配配置组 */
const wired = ({ url, type, body }) => ({
method: type,
params: qs.parse(url.split('?').length > 1 ? url.split('?')[1] : ''),
body: JSON.parse(body),
url: qs.parse(url.split('?')[0]),
...CustomExtends
})
const setup = (path, method, handle) => {
Mock.mock(
RegExp(path),
method,
typeof handle === 'function' ? o => handle(wired(o)) : handle
)
}
const load = (collection) => {
collection.map(({ path, method, handle }) => {
if (method === '*') {
method = [
'get',
'head',
'post',
'put',
'delete',
'connect',
'options',
'trace',
'patch'
]
}
if (typeof method === 'string' && method.indexOf('|') > -1) method = method.split('|')
if (method instanceof Array) {
method.map(item => setup(path, item, handle))
} else {
setup(path, method, handle)
}
})
}
export default { setup, load, extend }

14
src/mock/d2-mock/patch/withCredentials.js
View File

@@ -1,14 +0,0 @@
export default function (Mock) {
// http://cnine.me/note/FrontEnd/mock-lose-cookies-dbg.html
Mock.XHR.prototype.__send = Mock.XHR.prototype.send
Mock.XHR.prototype.send = function () {
if (this.custom.xhr) {
this.custom.xhr.withCredentials = this.withCredentials || false
// https://github.com/d2-projects/d2-admin/issues/254
if (!this.custom.async) {
this.custom.xhr.responseType = this.responseType
}
}
this.__send.apply(this, arguments)
}
}

10
src/mock/index.js
View File

@@ -1,10 +0,0 @@
import d2Mock from './d2-mock'
const req = context => context.keys().map(context)
const options = req(require.context('./api/', true, /\.js$/))
.filter(e => e.default)
.map(e => e.default)
options.forEach(option => {
d2Mock.load(option)
})

5
src/router/modules/plugins.js
View File

@@ -21,9 +21,6 @@ export default {
{ path: 'import/csv', name: `${pre}import-csv`, component: _import('demo/plugins/import/csv.vue'), meta: { ...meta, title: '导入 csv' } },
{ path: 'import/xlsx', name: `${pre}import-xlsx`, component: _import('demo/plugins/import/xlsx.vue'), meta: { ...meta, title: '导入 xlsx' } },
{ path: 'index', name: `${pre}index`, component: _import('demo/plugins/index'), meta: { ...meta, title: '插件首页' } },
{ path: 'js-cookie', name: `${pre}js-cookie`, component: _import('demo/plugins/js-cookie'), meta: { ...meta, title: 'Cookie' } },
{ path: 'mock/ajax', name: `${pre}mock-ajax`, component: _import('demo/plugins/mock/ajax.vue'), meta: { ...meta, title: '模拟数据' } },
{ path: 'mock/dpd', name: `${pre}mock-dpd`, component: _import('demo/plugins/mock/dpd.vue'), meta: { ...meta, title: 'mock dpd规则' } },
{ path: 'mock/dtd', name: `${pre}mock-dtd`, component: _import('demo/plugins/mock/dtd.vue'), meta: { ...meta, title: 'mock dtd规则' } }
{ path: 'js-cookie', name: `${pre}js-cookie`, component: _import('demo/plugins/js-cookie'), meta: { ...meta, title: 'Cookie' } }
])('demo-plugins-')
}

37
src/views/demo/plugins/export/data/index.js
View File

@@ -1,37 +0,0 @@
import Mock from 'mockjs'
const mockData = Mock.mock({
'data|3-6': [{
'id|+1': 1,
'name': '@CNAME',
'creatDate': '@DATE',
'address': '@CITY',
'zip': '@ZIP'
}]
})
export default {
data: mockData.data,
columns: [
{
label: 'ID',
prop: 'id'
},
{
label: '名称',
prop: 'name'
},
{
label: '创建日期',
prop: 'creatDate'
},
{
label: '地址',
prop: 'address'
},
{
label: '邮编',
prop: 'zip'
}
]
}

13
src/views/demo/plugins/export/table.vue
View File

@@ -25,14 +25,21 @@
<script>
import Vue from 'vue'
import pluginExport from '@d2-projects/vue-table-export'
import table from './data'
Vue.use(pluginExport)
export default {
data () {
return {
table: {
columns: table.columns,
data: table.data,
columns: [
{ label: 'ID', prop: 'id' },
{ label: '名称', prop: 'name' },
{ label: '创建日期', prop: 'creatDate' },
{ label: '地址', prop: 'address' },
{ label: '邮编', prop: 'zip' }
],
data: [
{ id: 1, name: 'Lucy', creatDate: '2020-05-07', address: 'Address', zip: '000000' }
],
size: 'mini',
stripe: true,
border: true

56
src/views/demo/plugins/mock/ajax.vue
View File

@@ -1,56 +0,0 @@
<template>
<d2-container>
<div slot="header">
<el-button
size="mini"
type="primary"
@click="ajax">
<d2-icon name="paper-plane"/>
发送请求
</el-button>
</div>
<el-table
v-bind="table"
style="width: 100%">
<el-table-column
v-for="(item, index) in table.columns"
:key="index"
:prop="item.prop"
:label="item.label">
</el-table-column>
</el-table>
</d2-container>
</template>
<script>
import { pluginMocksAjax } from '@api/demo.plugins.mocks.ajax'
export default {
name: 'demo-plugins-mock-ajax',
data () {
return {
table: {
columns: [],
data: [],
size: 'mini',
stripe: true,
border: true
}
}
},
methods: {
ajax () {
pluginMocksAjax()
.then(res => {
this.table.columns = Object.keys(res.list[0]).map(e => ({
label: e,
prop: e
}))
this.table.data = res.list
})
.catch(() => {
// 错误情况
})
}
}
}
</script>

63
src/views/demo/plugins/mock/components/d2-demo-mock-card.vue
View File

@@ -1,63 +0,0 @@
<template>
<el-card shadow="never" class="d2-mb">
<el-row type="flex" justify="end" slot="header">
<el-button type="text" size="mini">{{title}}</el-button>
<el-tooltip content="重新 mock 数据" placement="top-end">
<el-button type="primary" size="mini" @click="$emit('reload')" class="d2-fr">刷新</el-button>
</el-tooltip>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<div class="col col-l">
<d2-highlight :code="code"/>
</div>
</el-col>
<el-col :span="12">
<div class="col col-r">
<d2-highlight :code="mock"/>
</div>
</el-col>
</el-row>
</el-card>
</template>
<script>
export default {
name: 'd2-demo-mock-card',
props: {
title: {
type: String,
required: false,
default: 'Mock Demo'
},
code: {
type: String,
required: false,
default: ''
},
mock: {
type: String,
required: false,
default: ''
}
}
}
</script>
<style lang="scss" scoped>
.col {
padding: 20px;
border-radius: 4px;
border-width: 1px;
border-style: solid;
font-size: 16px;
}
.col-l {
background-color: lighten($color-info, 40%);
border-color: lighten($color-info, 35%);
}
.col-r {
background-color: lighten($color-success, 47%);
border-color: lighten($color-success, 40%);
}
</style>

15
src/views/demo/plugins/mock/data/settingDPD.js
View File

@@ -1,15 +0,0 @@
/* eslint-disable */
export default [
// 字符串
{
title: "占位符演示",
json: {
"name": {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
}
}
]

115
src/views/demo/plugins/mock/data/settingDTD.js
View File

@@ -1,115 +0,0 @@
/* eslint-disable */
export default [
// 字符串
{
title: "复制1-10次固定字符串",
json: {
"string|1-10": "★"
}
},
{
title: "复制3次",
json: {
"string|3": "Ha"
}
},
// 数字
{
title: "范围随机取值",
json: {
"number|1-100": 50
}
},
{
title: "累加1",
json: {
"number|+1": 10
}
},
{
title: "累加2",
json: {
"number|+2": 10
}
},
{
title: "浮点数",
json: {
"number1|1-100.1-10": 1,
"number2|123.1-10": 1,
"number3|123.3": 1,
"number4|123.10": 1.123
}
},
// 布尔值
{
title: "true 的概率是 1/2",
json: {
"boolean|1": true
}
},
// 对象
{
title: '随机选择3个属性',
json: {
"obj|3": {
name: 'FairyEver',
use: 'vue.js',
sex: 1,
qq: '1711467488',
tel: '123-4567-8910',
city: 'beijing',
mail: '1711467488liyang@gmail.com',
github: 'https://github.com/d2-projects',
blog: 'http://www.fairyever.com/',
creatDate: '2018-1-1',
updateDate: '2018-1-2',
delFlag: 0
}
}
},
{
title: '随机选择4-8个属性',
json: {
"obj|4-8": {
name: 'FairyEver',
use: 'vue.js',
sex: 1,
qq: '1711467488',
tel: '123-4567-8910',
city: 'beijing',
mail: '1711467488liyang@gmail.com',
github: 'https://github.com/FairyEver',
blog: 'http://www.fairyever.com/',
creatDate: '2018-1-1',
updateDate: '2018-1-2',
delFlag: 0
}
}
},
// 数组
{
title: '随机选1个',
json: {
"arr|1": ['1-vue', '2-react', '3-angular', '4-node', '5-java']
}
},
{
title: '顺序选1个',
json: {
"arr|+1": ['1-vue', '2-react', '3-angular', '4-node', '5-java']
}
},
{
title: '重复3次',
json: {
"arr|3": ['o', 'o - o', 'o - o - o']
}
},
{
title: '重复2-10次',
json: {
"arr|2-10": ['-', '----']
}
}
]

46
src/views/demo/plugins/mock/dpd.vue
View File

@@ -1,46 +0,0 @@
<template>
<d2-container>
<template slot="header">数据占位符</template>
<d2-markdown :source="doc" class="d2-mb"/>
<d2-demo-mock-card
v-for="(item, index) in settingDPD"
:key="index"
:title="item.title"
:code="JSON.stringify(item.json, null, 2)"
:mock="mockResult[index]"
style="margin-bottom: 0px !important;"
@reload="doMock(index)">
</d2-demo-mock-card>
</d2-container>
</template>
<script>
import Vue from 'vue'
import { cloneDeep } from 'lodash'
import Mock from 'mockjs'
import settingDPD from './data/settingDPD'
import doc from './md/doc.md'
export default {
components: {
'd2-demo-mock-card': () => import('./components/d2-demo-mock-card')
},
data () {
return {
mockResult: [],
settingDPD,
settingDPDClone: cloneDeep(settingDPD),
doc
}
},
mounted () {
this.settingDPD.forEach((e, i) => {
this.doMock(i)
})
},
methods: {
doMock (n = 0) {
Vue.set(this.mockResult, n, JSON.stringify(Mock.mock(this.settingDPDClone[n].json), null, 2))
}
}
}
</script>

66
src/views/demo/plugins/mock/dtd.vue
View File

@@ -1,66 +0,0 @@
<template>
<d2-container>
<template slot="header">数据模板</template>
<d2-markdown :source="doc" class="d2-mb"/>
<d2-demo-mock-card
v-for="(item, index) in settingDTD"
:key="index"
:title="item.title"
:code="JSON.stringify(item.json, null, 2)"
:mock="mockResult[index]"
@reload="doMock(index)">
</d2-demo-mock-card>
<d2-demo-mock-card
:title="fn.title"
:code="fn.code"
:mock="fn.mocked"
@reload="fnMock()">
</d2-demo-mock-card>
<d2-demo-mock-card
:title="regexp.title"
:code="regexp.code"
:mock="regexp.mocked"
style="margin-bottom: 0px !important;"
@reload="regexpMock()">
</d2-demo-mock-card>
</d2-container>
</template>
<script>
import Vue from 'vue'
import { cloneDeep } from 'lodash'
import Mock from 'mockjs'
import settingDTD from './data/settingDTD'
import regexp from './mixins/regexp'
import fn from './mixins/function'
import doc from './md/doc.md'
export default {
mixins: [
regexp,
fn
],
components: {
'd2-demo-mock-card': () => import('./components/d2-demo-mock-card')
},
data () {
return {
mockResult: [],
settingDTD,
settingDTDClone: cloneDeep(settingDTD),
doc
}
},
mounted () {
this.settingDTD.forEach((e, i) => {
this.doMock(i)
})
this.fnMock()
this.regexpMock()
},
methods: {
doMock (n = 0) {
Vue.set(this.mockResult, n, JSON.stringify(Mock.mock(this.settingDTDClone[n].json), null, 2))
}
}
}
</script>

5
src/views/demo/plugins/mock/md/doc.md
View File

@@ -1,5 +0,0 @@
你可以点击每个演示卡片右上角的刷新按钮检查每次 `mock` 不同的结果
官方演示页面 [http://mockjs.com/examples.html](http://mockjs.com/examples.html)
官方 `Wiki` [https://github.com/nuysoft/Mock/wiki/Getting-Started](https://github.com/nuysoft/Mock/wiki/Getting-Started)

30
src/views/demo/plugins/mock/mixins/function.js
View File

@@ -1,30 +0,0 @@
/* eslint-disable */
import Mock from 'mockjs'
export default {
data () {
return {
// 测试函数
fn: {
title: '函数',
code: `{
"name": "FairyEver",
"say": function() {
return 'I AM ' + this.name
}
}`,
json: {
"name": "FairyEver",
"say": function() {
return 'I AM ' + this.name
}
},
mocked: ''
}
}
},
methods: {
fnMock () {
this.fn.mocked = JSON.stringify(Mock.mock(this.fn.json), null, 2)
}
}
}

28
src/views/demo/plugins/mock/mixins/regexp.js
View File

@@ -1,28 +0,0 @@
/* eslint-disable */
import Mock from 'mockjs'
export default {
data () {
return {
// 测试正则表达式
regexp: {
title: '正则表达式',
code: `{
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
}`,
json: {
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
},
mocked: ''
}
}
},
methods: {
regexpMock () {
this.regexp.mocked = JSON.stringify(Mock.mock(this.regexp.json), null, 2)
}
}
}