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等其他使用方法，还是看官方的好。

使用：

 1 // 创建一个mock.js文件，来进行初始化(mock/index.js也行，习惯看个人)
 2
 3 import Mock from 'mockjs'  // 导入mockjs
 4 // 可以引入数据
 5 import  xxx from xxx
 6
 7 // 这里先写个简单的模拟数据,数据为json数据
 8 home = {
 9     'error_code': 0,
10      msg: '成功',
11      data: {xxxxx}
12 }
13
14 // 使用Mock.mock方法,。
15 // Mock.mock(rurl?, rtype?, template|function(option))
16 // 三个参数: 一、rurl，用来匹配请求的URL。可以是字符串，也可以是正则表达式
17 // 二、rtype为处理什么请求，如get,post
18
19 Mock.mock(‘\/\home/’, get, home) 

请求：

1 // 此处使用axios进行请求
2
3 axios.get('/home').then(res => {
4     console.log(res.data)  // 打印出来就是模拟的数据home了
5 })

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