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；

扫描二维码关注公众号，回复： 3224122 查看本文章

这样，mock.js就监听到了所有的请求，然后在你发起请求后，它就会拦截你的请求，从而返给你模拟数据；

现在来试一下我的登录请求被拦截后所得到的模拟数据吧

看，被拦截了，然后返回的是我编写的模拟数据；

这里特别提示：拦截类型，post对post，get对get，post对get会拦截不到的，所以，快速入门的教程完了，有疑问，请留言！！

关于mock.js的用法

Mock.js

这里特别提示：拦截类型，post对post，get对get，post对get会拦截不到的，所以，快速入门的教程完了，有疑问，请留言！！

猜你喜欢