mock...

---

前言

主要作用是生成随机数据，拦截 Ajax 请求。也可以使用Mock API网站来定义自己的测试接口

---

一、Mock

vue集成

1.简单引入

npm install mockjs

var Mock = require('mockjs')
var data = Mock.mock({
    'list|1-10': [{
        'id|+1': 1
    }]
})

2.拦截请求

编写 mock 的js文件

import Mock from 'mockjs'
import User from './user'

// 劫持/m1/user/1的url，并返回mock数据
Mock.mock('/m1/user/1', 'post', () => { 
  return User.userInfo(1)
})

然后 main.js 中判断引入

// 判断运行环境或者判断是否为MOCK模式
if (process.env.MOCK) {    
  require('./mock/index.js')
}

或修改vue.config.js

devServer: {
	before: require("./mock/index.js"),
}

二、FastMock模拟接口

自定义返回请求mock数据

1.基本数据

响应配置

{
  "code": 200,
  "data": {
    "list|10": [{
      "name": "@cname",
      "age": "@integer(20, 60)",
      "sex": "@integer(1, 2)",
      "time": "@datetime('yyyy-MM-dd HH:mm:ss')"
    }],
    "type": "1"
  },
  "message": "查询成功"
}

响应结果

{
  "code": 200,
  "data": {
    "list": [
      {
        "name": "冯超",
        "age": 38,
        "sex": 1,
        "time": "2003-04-12 00:56:33"
      },
	  ...省略9条数据
    ],
    "type": "1"
  },
  "message": "查询成功"
}

2.带参数据

响应配置

{
  "code": 200,
  "data": {
    "success": function({_req, Mock}) {
      let body = _req.body;
      return body.username === 'admin' && body.password === '123456';
    },
    "user": function({_req, Mock}) {
      let body = _req.body;
      if (body.username === 'admin' && body.password === '123456') {
        return Mock.mock({
          username: "admin",
          email: "@email"
        });
      } else {
        return null;
      }
    },
  },
  "message": "校验成功"
}

响应结果

{
  "code": 200,
  "data": {
    "success": true,
    "user": {
	  "username": "admin",
	  "email": "o.cuinjchw@ickmubd.bf"
    }
  },
  "message": "校验成功"
}

常用参数说明

官网参数

对象	描述
Mock	Mock 对象
_req.url	获得请求 url 地址
_req.method	获取请求方法
_req.params	获取 url 参数对象
_req.querystring	获取查询参数字符串(url中?后面的部分)，不包含 ?
_req.query	将查询参数字符串进行解析并以对象的形式返回，没有查询参数字符串则返回一个空对象
_req.body	当 post 请求以 x-www-form-urlencoded 方式提交时，我们可以拿到请求的参数对象
_req.path	获取请求路径名
_req.header	获取请求头对象

3.数据制造

官网示例

// 中文名与英文名
"name": "@name()"
"cname": "@cname()"

// 邮箱与地址
"email": "@email()"
"city": "@city(true)"

// 1 至 80
"age": "@integer(1, 80)"

// 1 或 2
"sex|1-2": 1

// true 或 false
"success|1-2": true

// 保留3位小数
"price|1-100.3": 1.123

// 1949-10-01 06:06:06
"time": "@datetime()" 

---