Mock

• 前言
• 一、Mock
• • 1.簡單引入
  • 2.攔截請求
• 二、FastMock模拟接口
• • 1.基本資料
  • 2.帶參資料
  • 3.資料制造

前言

主要作用是生成随機資料，攔截 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": "[email protected]"
    }
  },
  "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()"