mockjs是什么？
Mock.js是一个模拟数据生成器，可以帮助前端开发和原型与后端进度分开，并减少一些单调，尤其是在编写自动化测试时。
官方网站：http://mockjs.com
作为一个前端搬砖工相信你都遇到过一个问题：优秀如你写代码写的太快了后端写接口的速度完全跟不上你写页面的速度，如果你想吧后面的页面写下去又不得不需要后端数据，什么你要自己编json假数据？那样也行但是有没有更优雅的方式呢？有的----mockjs数据模拟生成器
怎么使用？
实例：
1.首先安装
npm install mockjs --save-dev
因为打包后是不需要的所以我们将它安装到开发环境中
2.在src中新建mock文件夹并在其中新建index.js和user.js
- mock/index.js
import mockjs from 'mockjs'
import { getUserList } from './user'
const Mock = require('mockjs')
//获取用户表格数据
Mock.mock("/web/user/getUserList", "get", getUserList);
export default mockjs
- mock/user.js
import Mock from 'mockjs'
const code = 200;
export let getUserList = () => {
return {
data: Mock.mock({
'list|10': [{
'userId|+1': 1,
'username': "@cname",
'date': '@date',
'address': '@region'
}]
}),
code: code
}
}
3.在main.js中配置mock
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
//引入mock数据
require('./mock')
new Vue({
router,
render: h => h(App),
}).$mount('#app')
简单吧这样就算配置完成了一个模拟获取用户数据的接口了，接下来直接使用axios调用/web/user/getUserList接口就可以获取模拟数据了
难点
我觉得mockjd使用起来还是挺简单的但是要模拟多样化的随机数据还是建议去看看官网
提供一份比较容易使用到的代码
const Mock = require('mockjs')
// 返回字符串
Mock.mock('/api/data', (req, res) => {
return Mock.mock({
'string|3': '*'
})
})
// 返回指定范围的整数
Mock.mock('/api/getInteger', (req, res) => {
return Mock.mock({
'a|1-100': 100
})
})
// 返回随机个数的对象
Mock.mock('/api/getObject', (req, res) => {
return Mock.mock({
'brand|1-3': {
a: '京东',
b: '国美',
c: '苏宁',
d: '当当',
e: '天猫',
f: '淘宝'
}
})
})
// 返回随机数组
Mock.mock('/api/getArr', (req, res) => {
return Mock.mock({
'data|1-10': [
{
'name': '张三'
}
]
})
})
// 返回随机字符
Mock.mock('/api/getRandom1', (req, res) => {
return Mock.mock({
'random1': /[a-z]{2}[A-Z]{2}[0-9]/
})
})
// 返回随机字符
Mock.mock('/api/getRandom2', (req, res) => {
return Mock.mock({random2: '@string("lower", 5)'})
})
// 返回UUID
Mock.mock('/api/getUUID', (req, res) => {
return {'uuid': Mock.Random.id()}
})
