(8) 优雅的使用Mockjs

目标：把mockjs用好，实现数据自由

上一章我们学会了如何从服务器获取数据（包括提交数据）

演示的时候，用fastmock这个网站模拟了服务器接口，这很方便--比没有当然要强很多。

今天要学的Mockjs，功能和fastmock差不多，都是提供假数据和接口，方便调试。

但是用起来要舒服很多，堪称神器！

老规矩，先来看一下官网

很有个性的首页，生成数据和拦截网络请求，这两个描述也是很精髓。

文档很详细，也有不少例子，这个可以后面再细看，先跟着我的例子走一遍

我们先安装，按上一章的方式，我们在package.json里添加mockjs的配置，执行cnpm install，就好了

然后我们在src目录下，新建mock目录，创建user.js文件，内容如下

import Mock from 'mockjs'

var routerArr = [

    {path:'/register',componentPath:'Register'},

    {path:'/retrievePassword',componentPath:'RetrievePassword'}

]

var userInfo = {

    username:'mock',

    fullname:'我是Mock'

}

//也可以用一个方法来构造数据，灵活度会大很多

function getUserInfo(){

    return userInfo;

}

//正则写法

Mock.mock(/\/getUserRouter/,'get',routerArr)

//完全匹配的写法

var baseUrl = process.env.VUE_APP_AXIOS_BASE_URL

Mock.mock(baseUrl +'/getUserInfo','get',getUserInfo)

这个代码里面，我们定义了routerArr和userInfo两个数据，还有getUserInfo这个方法

然后用Mock.mock(url, xxx) 这个方法拦截网络请求，这样我们调用服务器时，会返回我们准备的模拟数据

好处是每个页面里面该怎么调服务器，还是那样去写，以后都不用改了。

只要用一个开关来控制mock是否启用，这是“代码无侵入”，很高级的境界

接下来我们在mock目录再创建一个index.js，用index.js来引入user.js

这么做的原因是，一个系统里的接口数量可能是几百个，如果都定义在一起就太乱了，也不方便团队协作。

index.js里面就两行代码，log那行还可以不要

然后我们来设置mock的开关，在.env.development里加这个，相应的，在production里面要写成false

最后，我们在main.js里面引入mock/index.js

ok，都弄好了，我们重启一下服务（ctrl+c关闭，yarn serve开启）

打开登录页，现在我们点这个按钮时，取到的名字成了“我是Mock”，注意我们登录页上的代码没有做任何修改

自己体会一下，把.env.development里面的true改成false，再重启一下服务，看看获取的名字有什么变化

这里我们演示的重点，是拦截网络请求，数据是我们写死的，有点不高级（但是好理解）

所以，我们还需要一个例子来演示mock如何生成随机数据

在views下面添加一个页面，代码如下（这个代码建议手打一下，熟悉熟悉）

这里面有两个按钮，分别获取列表数据和单个对象数据

配置一下路由，这个别忘了。否则页面访问不了

好了，我们访问article这个页面，能看到东西了

这两个按钮点的试试，当然什么数据也获取不到。 因为这两个接口我在fastmock里面没配

现在我们用Mockjs来提供数据，在mock目录下新建article.js文件，内容如下

import Mock from 'mockjs'

//定义随机规则

var articleRule = {

    'guid':'@guid',//guid 是唯一机器码

    'id':'@id',//id 是随机id

    'title':'@ctitle',//中文标题

    'image':"@image('200x100', '#4A7BF7', 'Hello')",//随机图片 参数分别为size, background, text

    'address':'@county(true)',//是一个随机地址

    'date':'@date("yyyy-MM-dd")',

    'authorName':'@cname',//随机中文名

    'readTimes|20-50':0,//从20-50随机取一个数字

    'email':'@email',

    'ip':'@ip'

}

//生成一个数组，注意返回的数据，要用result.list获取

Mock.mock(/\/article\/queryList/, Mock.mock({'list|5': [articleRule]}))

//单个对象

Mock.mock(/\/article\/getInfo/, Mock.mock(articleRule))

然后我们在mock/index.js里加一行

检查下.env.development里面的mock开关是不是打开了，写程序一定要细心！

一切准备就绪，刷新页面，点那两个按钮试试

很棒，随机数据出来了！

再回头看一下，我们在mock/article.js里面的写法，应该是不难理解的

具体的语法和例子官网里很多，这篇文章的重点，是如何优雅的使用mock，注意这个关键词，本章完！