Mock.js
目录
- 定义:简单来说,它是一个工具,是一个可以模拟后台数据的工具。
- 用处:在项目开发过程中,因前后端各自的复杂程度,开发进度不一,造成前端需要数据,后端接口还没写好这一状况。这里,我们有了Mock.js后,就不需要等待后端接口了,我们可以依据自己需要的数据结构和状态来自己创造数据。
- 这里的一大优点:mock.js的模拟数据是依据拦截你的Ajax请求,将Mock.js的模拟数据返回给你,也就是说,如果你使用了Mock.js,那么你该怎么写请求,依然怎么写,返回的数据是Mock.js传给你的模拟数据。
- 具体Mock.js的用法和数据的编写方法,请跳转Mock.js去详细的了解,我们这里就来一个简单的Demo,方便大家快速入门。
- 首先 使用包管理工具安装Mock.js:
npm i mockjs
- 引CLI(脚手架)中 ,我这里做了一个模拟数据文件,所以我在src目录下创建了一个mock文件,创建了一个mock.js文件。
在mock.js文件中引入mock.js模块
import Mock from 'mockjs';
然后就开始编造数据了,这里引用一段网上 ‘望涯客’的一段小demo代码。很直观,我就不多写了;
/*
因为我的数据需求,是随机的数据,所以
获取 mock对象重点额Random方法;
*/
const Random = Mock.Random;
/*
Mock.mock( rurl?, rtype?, template|function( options ) )
解释一下这个,参数一为拦截的URL或者 正则匹配的URL,
参数二,拦截请求的类型 如:post,get等等
参数三,数据模板或者一个回调函数返回的数据模板
现在,开始定义数据,创建一个函数作为mock.js的回调函数。
我们在回调函数中创建数据模型
*/
const initData = function() {
let articles = [];
for (let i = 0; i < 20; i++) {
// 一个对象,所有的value值,每一次都不一样
let newArticleObject = {
img: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
score:Random.natural(0, 5), //随机生成一个0-5的整数
sellCount:Random.natural(0, 2000),
minPrice:Random.natural(15, 40),
deliveryPrice:Random.natural(0,10),
deliveryTime:Random.natural(0,60),
}
articles.push(newArticleObject)
}
//返回创建好的数据模板
return articles
}
// 然后使用Mock对象的mock方法生成数据;
// Mock.mock( url, post/get , 返回的数据);
Mock.mock(/http:/, 'get', produceNewsData);
然后使用Mock.js
因为我们已经编好了数据,现在直接使用Mock.js
将它引入到你的发送Ajax的文件里。
这里我提议:最好将请求进行封装,这是我学习来的成长
因为我将请求都封装在一个文件里,所以我在请求文件中引入Mock.js;
这样,mock.js就监听到了所有的请求,然后在你发起请求后,它就会拦截你的请求,从而返给你模拟数据;
现在来试一下我的登录请求被拦截后所得到的模拟数据吧
看,被拦截了,然后返回的是我编写的模拟数据;