vue项目中mockjs的使用

mock.js是一个库，源码托管：https://github.com/nuysoft/Mock

github上的原话：Mock.js是一个模拟数据生成器，可帮助前端开发和原型与后端进度分开，并减少某些单调性，尤其是在编写自动化测试时。

mockjs的原理是替换原生的XMLHttpRequest，来达成本地数据模拟请求。

优点：

1、不用改变现有的请求代码，后续后端给予开发的API后再进行关闭即可。

2、提供丰富的数据类型，但无法支持blob类型，所以无法模拟下载

// 此处使用vue-cli3进行模块化开发。

安装：npm install mockjs

// 直接引入也行

<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>

更多如Amd等其他使用方法，还是看官方的好。

使用：

// 创建一个mock.js文件，来进行初始化(mock/index.js也行，习惯看个人)

import Mock from 'mockjs'  // 导入mockjs
// 可以引入数据
import  xxx from xxx

// 这里先写个简单的模拟数据,数据为json数据
home = {
    'error_code': 0,
     msg: '成功',
     data: {xxxxx}
}

// 使用Mock.mock方法,。
// Mock.mock(rurl?, rtype?, template|function(option))
// 三个参数: 一、rurl，用来匹配请求的URL。可以是字符串，也可以是正则表达式
// 二、rtype为处理什么请求，如get,post

Mock.mock(‘/home/’, get, home) 

请求：

// 此处使用axios进行请求

axios.get('/home').then(res => {
    console.log(res.data)  // 打印出来就是模拟的数据home了   
})

注：记得需在入门文件main.js中引入mockjs来做初始化