Mock.js的说明文档：http://mockjs.com/examples.html
Mock.js的作用就是：生成随机数据，拦截 Ajax
使用情形：
1.前端只有接口文档，后台接口暂未写好，这个时候，我们不必等待，也不必手动造一堆静态数据，麻烦而又浪费时间，直接使用Mock.js ,炒鸡方便
2.前端需要一些数据，需要在页面操作很多步骤或者求助后端帮忙造数据，而有了Mock.js,想要什么数据，不必再找后端或者自己走一遍流程
3.使用Mock.js，可以随机生成数据，方便我们自己测试，而不用等到项目快上线了，因为数据的原因而没怎么测试`，以后想怎么测就怎测
1.下载Mock.js
npm install mockjs --save-dev
2.在项目中新建Mock.js文件，内容如下
// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const productData = function() {
let Data = [];
for (let i = 0; i < 100; i++) {
let data = {
name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd
}
Data.push(data)
}
return {
Data: Data
}
}
//mock 第二组数据
const newsData = function () {
let articles = []
for (let i = 0; i < 10; i++) {
let newsObj = {
date: Random.date(), //年月日
longDate:Random.datetime(), //精确到时分秒
number:Random.natural(201,205), //数字
image:Random.image(), //图片
flag:Random.boolean(), // true-false
name:Random.cname(), //姓名
url:Random.url(), //url地址
province:Random.province(), //省
city:Random.city(), //市
county:Random.county() //区
}
articles.push(newsObj)
}
return {
code: 0,
msg: "操作成功",
data: articles,
}
}
//设置相应时间
Mock.setup({
timeout: 500
})
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/user/login', 'post', productData );//mock 第一组数据
Mock.mock('/user/query', 'post', newsData);//mock 第二组数据
mock文件夹示例
3.在main.js中引入文件Mock.js
引入文件Mock.js
4.发送网络请求
在VUE项目，需要获取数据的页面中，写入如下请求
mounted() {
console.log("这里是mounted");
//使用接口一
axios.post("/user/login").then(res => {
console.log(res);
}).catch(res => {
console.log("err")
});
//使用接口二
axios.post("/user/query").then(res => {
console.log(res);
}).catch(res => {
console.log("err")
});
},
5.返回的数据
返回的数据
6、 参数的添加
mounted() {
console.log("这里是mounted");
//使用接口一
axios.post("/user/login",{
params:{
a:1,b:2
}
}).then(res => {
console.log(res);
}).catch(res => {
console.log("err")
});
//使用接口二
axios.post("/user/query").then(res => {
console.log(res);
}).catch(res => {
console.log("err")
});
},
image.png
