[配置]vue中mockjs的配置和使用

需求：

前后端分离的开发中，需要前后端同时开发，但是在后端完成前，暂时是没有数据返回给前端使用的，如果先写静态后面再改，就有重复工作的内耗存在。所以我们需要一种简单快速的模拟数据的模块，本文选的是mockjs。

配置：

1，npm安装依赖

npm install mockjs --save-dev

2，新建mock文件夹，里面再新建index.js文件和MyInfo.js文件，index.js作为mock索引，MyInfo.js用于存放数据。

文件结构图如下：

mock文件夹目录结构

MyInfo.js代码如下：

const page1 = [
  {
    code: 200,
    data: ['中学时暗恋班花，被同班的女汉子知道了，连忙请她保密，本以为向来爽朗不羁的她是不屑告密的，结果丫飞快的把我出卖了。 后来想想，也可能是我拜托她的方式不对，不该说什么这是男人之间的约定。']
  }
]
const res = {
  page1
}
export default res

index.js代码如下：

import Mock from 'mockjs'
import MyInfo from './MyInfo.js'
Mock.mock('http://127.0.0.1/main.php?cid=1', 'post', () => {
  return MyInfo.page1
})

3，main.js增加如下代码(开发中上测试环境和后端联调，需要禁用mock时，注释这段代码就可以)：

require('./mock/index.js')

验证：

home.vue请求中添加如下代码输出到控制台验证:

      //数据请求计数
       this.num+=1;
      //请求数据
      const res = await this.$http.post('http://127.0.0.1/main.php?cid='+this.num);
      console.log(this.num,res);

备注：

此设置已验证OK，需要看源码的同学，可以克隆如下项目查看(请求在home.vue中，其他在main.js和mock文件夹中)：
demo的github地址：https://github.com/tom-wong666/xiaoa.git

博文通览提示：

点击此超链接跳转到Tom哥的博文分类和索引页面 

Tom哥的博客博文分类和索引页面地址：https://blog.csdn.net/tom_wong666/article/details/84137820