我要评论mockjs生成随机数据
概述
- 现在，前后端分离趋势很明显，前端负责数据展示、页面动态效果等，而后端负责编写应用程序接口，供页面、第三方等调用。
- 工作时，常常遇见的问题是：前端已经写好了页面，一直在等待后端接口的联调，等待也不是办法，有没有专门造假数据的工具呢？
- mockjs就应运而生！
环境
- vue2.2 + webpack3.0
- mockjs
- axios
引入mock.js文件
在main.js中引入mock.js
mock.js文件-拦截ajax请求，返回数据
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()}
})使用axios发起http请求
import axios from 'axios'
export default {
components: {
},
data () {
return {
}
},
computed: {
},
mounted () {
this.init()
},
methods: {
init () {
axios.get('/api/data').then(res => {
console.log(res.data,'字符串')
})
axios.get('/api/getinteger').then(res => {
console.log(res.data, '数字')
})
axios.get('/api/getobject').then(res => {
console.log(res.data, '对象')
})
axios.get('/api/getarr').then(res => {
console.log(res.data, '数组')
})
axios.get('/api/getrandom1').then(res => {
console.log(res.data, '5个随机字符-方式一')
})
axios.get('/api/getrandom2').then(res => {
console.log(res.data, '5个随机字符-方式二')
})
axios.get('/api/getuuid').then(res => {
console.log(res.data, 'uuid')
})
}
}
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论