欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于mock.js的用法

程序员文章站 2022-07-10 20:21:14
...

Mock.js 

目录

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文件中引入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的用法

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

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

关于mock.js的用法

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

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