目标：把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，注意这个关键词，本章完！