feat: 移除 mockjs 以及相关示例
This commit is contained in:
FairyEver
@@ -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'
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -1,15 +0,0 @@
|
||||
/* eslint-disable */
|
||||
export default [
|
||||
// 字符串
|
||||
{
|
||||
title: "占位符演示",
|
||||
json: {
|
||||
"name": {
|
||||
first: '@FIRST',
|
||||
middle: '@FIRST',
|
||||
last: '@LAST',
|
||||
full: '@first @middle @last'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -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": ['-', '----']
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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)
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user