生成随机数据,拦截 Ajax 请求
参考文档:http://mockjs.com/examples.html
如果后端接口还未开发完成,我们自己手动模拟后端接口返回随机数据完成交互功能
通过vue-cli创建基本项目
在项目中安装mock
npm install mockjs
在项目中新建mock文件夹,在mock文件夹中创建index.js
//引入mock模块
import Mock from ‘mockjs‘;
将mock文件夹的index.js文件在main.js中导入
import Vue from ‘vue‘
import App from ‘./App.vue‘
import ‘./mock/index.js‘
new Vue({
render: h => h(App),
}).$mount(‘#app‘)
生成指定次数字符串
const data = Mock.mock({
"string|4": "yx!"
})
console.log(data)
生成指定范围长度字符串
const data = Mock.mock({
"string|1-8": "yx"
})
console.log(data)
生成一个随机字符串
const data = Mock.mock({
"string": "@cword"
})
console.log(data)
生成指定长度和范围
const data = Mock.mock({
string: "@cword(1)",
str: ‘@cword(10,15)‘
})
console.log(data)
生成标题和句子
const data = Mock.mock({
title: "@ctitle",
sentence: ‘@csentence‘
})
console.log(data)
生成指定长度的标题和句子
const data = Mock.mock({
title: "@ctitle(8)",
sentence: ‘@csentence(50)‘
})
生成指定范围的
const data = Mock.mock({
title: "@ctitle(5,8)",
sentence: ‘@csentence(50,100)‘
})
console.log(data)
随机生成段落
const data = Mock.mock({
content: ‘@cparagraph()‘
})
console.log(data)
生成指定数字
const data = Mock.mock({
"number|80": 1
})
console.log(data)
生成范围数字
const data = Mock.mock({
"number|1-999": 1
})
console.log(data)
随机生成标识
const data = Mock.mock({
id: ‘@increment()‘
})
console.log(data)
随机生成姓名-地址-身份证号
const data = Mock.mock({
name: ‘@cname()‘,
idCard: ‘@id()‘,
address: ‘@city(true)‘ // 如果@city(),只会生成市,如果@city(true)会生成省和市
})?
console.log(data)
生成图片:
const data = Mock.mock({
image: "@image(‘300x300‘, ‘#50B347‘, ‘#FFF‘, ‘Mock.js‘)"
})
console.log(data)
参数1:图片可选大小
[
‘300x250‘, ‘250x250‘, ‘240x400‘, ‘336x280‘,‘180x150‘, ‘720x300‘, ‘468x60‘, ‘234x60‘,
‘88x31‘, ‘120x90‘, ‘120x60‘, ‘120x240‘,‘125x125‘, ‘728x90‘, ‘160x600‘, ‘120x600‘,‘300x600‘
]
参数2:图片背景色
参数3:图片前景色
参数4:图片格式
参数5:图片文字
@Date
生成指定格式时间:@date(yyyy-MM-dd hh:mm:ss)
const time = Mock.mock({
time1: ‘@date()‘, // 只有年月日
time2: ‘@date(yyyy-MM-dd hh:mm:ss)‘
})
console.log(time)
指定长度:‘data|5‘
指定范围:‘data|5-10‘
const data = Mock.mock({
‘list|50-99‘:[
{
name: ‘@cname()‘,
address: ‘@city(true)‘,
id: ‘@increment(1)‘ // 每次都增加1
}
]
})
在项目中安装axios
npm install axios
在 main.js 文件引入
import axios from ‘axios‘
在mock文件夹的index.js文件中写mock语法
Mock.mock(‘/api/get/user‘,‘get‘,()=>{
return {
status: 200,
message: ‘获取新闻列表数据成功‘
}
})
Mock.mock(‘/api/post/user‘,‘post‘,()=>{
return {
status: 200,
message: ‘添加新闻列表数据成功‘
}
})
<template>
<div id="app">
</div>
</template>
<script>
export default {
created:{
axios.get(‘/api/get/user‘)
.then(function (response) {
console.log(response);
}),
axios.post(‘/api/post/user‘)
.then(res => console.log(res),
}
}
</script>
<style lang="less" scoped>
</style>
原文:https://www.cnblogs.com/yx1102/p/12643423.html