Mock假数据

安装

npm i -D mockjs

创建假数据

├── src
│   ├── mock                   # mock文件
│   │   ├── index.js           # mock入口文件
│   │   ├── util.js            # mock处理方法
│   │   ├── services           # 请求模块，设置接口请求假数据
│   │   │   ├── empower.js       # 鉴权模块
│   │   │   └── article.js       # 列表模块

index.js

// 判断环境不是 prod 或者 preview 是 true 时，加载 mock 服务
if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
  // 使用同步加载依赖
  // 防止 vuex 中的 GetInfo 早于 mock 运行，导致无法 mock 请求返回结果
  console.log('[antd-pro] mock mounting')
  const Mock = require('mockjs')
  require('./services/empower')
  require('./services/article')

  Mock.setup({
    timeout: 800 // setter delay time
  })
  console.log('[antd-pro] mock mounted')
}

util.js

const responseBody = {
  message: '',
  timestamp: 0,
  data: null,
  code: 0
}

export const builder = (data, message, code = 0, headers = {}) => {
  responseBody.data = data
  if (message !== undefined && message !== null) {
    responseBody.message = message
  }
  if (code !== undefined && code !== 0) {
    responseBody.code = code
    responseBody._status = code
  }
  if (headers !== null && typeof headers === 'object' && Object.keys(headers).length > 0) {
    responseBody._headers = headers
  }
  responseBody.timestamp = new Date().getTime()
  return responseBody
}

export const getQueryParameters = (options) => {
  const url = options.url
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse('{"' + decodeURIComponent(search)
    .replace(/"/g, '\\"')
    .replace(/&/g, '","')
    .replace(/=/g, '":"') + '"}')
}

export const getBody = (options) => {
  return options.body && JSON.parse(options.body)
}

请求接口设置

// empower.js

import Mock from 'mockjs'
import { builder, getBody } from '../util'

const username = ['admin', 'super']
// 强硬要求 ant.design 相同密码
// '21232f297a57a5a743894a0e4a801fc3',
const password = ['123456', 'admin'] // admin, ant.design

// 登录接口
const login = (options) => {
  // 获取参数验证
  const body = getBody(options)
  if (!username.includes(body.username) || !password.includes(body.password)) {
    return builder({ isLogin: true }, '账户或密码错误', 401)
  }

  const userInfo = {
    id: Mock.mock('@guid'),
    name: Mock.mock('@name'),
    role: 1,
    username: 'admin',
    password: '',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png',
    status: 1,
    telephone: '',
    lastLoginIp: '27.154.74.117',
    lastLoginTime: 1534837621348,
    creatorId: 'admin',
    createTime: 1497160610259,
    deleted: 0,
    roleId: 'admin',
    lang: 'zh-CN'
  }
  // 返回数据
  return builder({
    userInfo,
    token: '4291d7da9005377ec9aec4a71ea837f'
  }, '', 200, { 'Custom-Header': Mock.mock('@guid') })
}

// 退出接口
const logout = () => {
  return builder({}, '[测试接口] 注销成功', 200)
}

// 获取用户信息接口
const info = () => {
  const userInfo = {
    id: '4291d7da9005377ec9aec4a71ea837f',
    name: '超级管理员',
    role: 1,
    username: 'admin',
    password: '',
    avatar: '/avatar2.jpg',
    status: 1,
    telephone: '',
    lastLoginIp: '27.154.74.117',
    lastLoginTime: 1534837621348,
    creatorId: 'admin',
    createTime: 1497160610259,
    merchantCode: 'TLif2btpzg079h15bk',
    deleted: 0,
    roleId: 'admin'
  }

  return builder(userInfo, '获取用户信息', 200)
}

// mock接口地址
Mock.mock(/\/auth\/login/, 'post', login)
Mock.mock(/\/auth\/logout/, 'post', logout)
Mock.mock(/\/user\/info/, 'get', info)

使用

// main.js 引入
import './mock'

在request.js文件，改写基础请求地址。如果开启proxy代理，地址也要相应的改掉。

// request.js
const request = axios.create({
  // API 请求的默认前缀
  baseURL: '/api',
  timeout: 1000 * 60 * 10 // 请求超时时间
})