Vue中使用mockjs

• 介绍

Mock.js
生成随机数据，拦截 Ajax 请求

前端使用mockjs后，对后端接口进行请求时，mockjs会拦截Ajax请求，并返回随机数据，模拟后端的响应。这样，无需等到后端接口开发完毕，前端就可以对获取数据部分进行开发、测试，做到前后端分离。当后端开发完毕后，只要关闭mock即可，无需修改代码逻辑，提高了开发效率。

前提（正确的做法）是，已经和后端确定好接口格式，各自按照文档进行开发。当然，也有不太理想的情况→后端有自己的想法。。。那就不太适合使用mock数据了。

• 使用方法

1. 安装mock

npm install mockjs 

2. 在src下新建mock文件夹，新建index.js文件

   
   
   index.js
   
   

   在index.js中导入所有mock服务，并进行通用配置

import Mock from 'mockjs'
import './queryBusList'

Mock.setup({
    timeout: '200-600'
});

3. 注册mock服务
   在mock文件夹下为每个接口建立一个js文件，注册mock数据

//queryBusList.js
import Mock from 'mockjs'

let path = 'xxxx/xxx/xx';

//Mock.mock(rurl, rtype, template)
Mock.mock(new RegExp( '^' + path), 'post', { //需要正则，否则无法拦截
    header: {
        status: 200,
        message: 'success',
        errcode: '0',
    },
    body: {
        'busLinesList|1-10':[         //随机生成1-10项长度的列表
            {stops:
                [{
                    BusStopName: '@cword(2,5)',    //随机生成2-5个中文字符的词
                    BusStopTime: '@time("HH:mm")',   //随机生成时间
                },{
                    BusStopName: '@cword(2,5)',
                    BusStopTime: '7:30',
                }]
            }
        ]
    }         
})

4. 在main.js中导入

//main.js
import './mock/index.js' //使用mockjs模拟数据`