mockjs用法（vue项目）

1.安装   npm install mockjs --save

2.建立mock.js文件，文件可放于项目utils文件夹下，文件内容如下

import Mock from "mockjs";

export default Mock.mock("http://127.0.0.1:8080", {
  "data|1-20": [
    {
      "id|+1": 1,
      name: "@cname", //随机中文名字
      username: /[a-z]{2}[0-9]{6}/, //随机用户名
      "age|15-40": 15,
      tel: /^1(5|3|7|8)[0-9]{9}$/, //随机手机号码
      password: /[0-9]{6}/, //6位0-9的密码
      email: "@email()", //随机email
      "sex|0-1": 0, //性别
      time: "@date(yyyy-MM-dd)", //时间
      img: "@image", //生成一个随机的图片地址
      ctitle: "@ctitle", //随机生成一个中文标题
      ip: "@ip", //随机生成一个ip地址
      region: "@region", //生成一个大区
      province: "@province", //生成一个省份
      city: "@city", //生成一个市
      country: "@country", //一个县
      zip: "@zip" //邮政编码
    }
  ]
});

3.在main.js引入mockjs

// mock开关
const mock = true
if (mock) {
  require('@/utils/mock')
}

至此，项目就可以正常使用mock模拟数据了，在具体组件内应用的话，只需要在请求接口的时候，将地址改为mockjs里配置的地址即可。

在使用的过程中有需要注意的几点：①模拟请求的接口地址应该跟mock.js里配置的地址保持一致，否则不生效 ②mock开关默认为true即表示mock是处于打开状态的，后期如果接入实际接口，这边需要改为false关闭mock模拟 ③mock请求是脚本请求，在浏览器的network中看不到