vue中使用mock.js（二）优雅的使用

• vue中使用mock.js（一）基础使用

目录结构

• index.js

import Mock from 'mockjs'
import visitor from './visitor'
import tenant from './tenant'
import personList from './personList'
import resources from './resources'
import consoles from './console'
const mocks = [
  ...visitor,
  ...tenant,
  ...personList,
  ...resources,
  ...consoles,
]
function XHR2ExpressReqWrap(response) {
  return function(options) {
    let result = null
    if (response instanceof Function) {
      const { body, type, url } = options
      // https://expressjs.com/en/4x/api.html#req
      result = response({
        method: type,
        body: JSON.parse(body),
        query: param2Obj(url)
      })
    } else {
      result = response
    }
    return Mock.mock(result)
  }
}
function param2Obj(url) {
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse(
    '{"' +
      decodeURIComponent(search)
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"')
        .replace(/\+/g, ' ') +
      '"}'
  )
}
mocks.forEach(item => {
  Mock.mock(new RegExp(item.url), item.type, XHR2ExpressReqWrap(item.response))
})

• console.js

import Mock from 'mockjs'
var Random = Mock.Random
var getConsoleList = {
  // - API 定义请求地址加 mock 前缀，此处写出相同的完整的请求地址或者正则
  url: '/mock/tmesh/console/_all\.*',
  type: 'get',
  response: config => {
    // 建议查询接口此处 response 结构一致,count 是返回的数据条数
    let response = {
          entity : {
            records: [],
            total: 500,
            page: 1,
            size: 10
          }
        }, count = 10;
    while(count > 0) {
      response.entity.records.push({
        'id|+1': Random.string('lower', 7, 10), 
        'startTime': Random.date('yyyy-MM-dd HH:mm:ss'),
        'endTime': Random.date('yyyy-MM-dd HH:mm:ss'),
        'owner': Random.first(),
        'count': Random.integer(1, 20),
      })
      count--
    }
    return response
  }
}
var getActionList = {
  // - API 定义请求地址加 mock 前缀，此处写出相同的完整的请求地址或者正则
  url: '/mock/tmesh/console/action\.*',
  type: 'get',
  response: config => {
    // 建议查询接口此处 response 结构一致,count 是返回的数据条数
    let response = {
          entity : {
            records: [],
            total: 501,
            page: 1,
            size: 10
          }
        }, count = 10;
    while(count > 0) {
      response.entity.records.push({
        'id|+1': Random.string('lower', 7, 10), 
        'avatar': Random.image('250x250', Random.color()),
        'name': Random.first(),
        'card': Random.string('lower', 5, 10),
        'phone': /^1[358][1-9]\d{8}/,
        'startTime': Random.date('yyyy-MM-dd HH:mm:ss'),
        
      })
      count--
    }
    return response
  }
}
export default [
    getConsoleList,
    getActionList
]

• personList.js

import Mock from 'mockjs'
var Random = Mock.Random

var getPersonnelList = {
    url: '/mock/tmesh/personList/_all\.*',
    type: 'get',
    response: config => {
        let response = {entity : []}, count = 6;
        while(count > 0) {
          response.entity.push({
            'id|+1': Random.integer('lower', 7, 10), 
            'personList|5':[{
              'avatar': Random.image('250x250', Random.color()),
              'name': Random.first(),
              'card': Random.string('lower', 5, 10),
              'phone': /^1[358][1-9]\d{8}/
            }], //image
            'no': Random.integer('lower', 5, 10), //人员编号
            'name': `${Random.first()} ${Random.last()}`, //人员姓名
            'groups': Random.integer(), //组织编号
            'groupNames': `${Random.first()} ${Random.last()}`,//组织名称
            'idCard': Random.integer(), //身份证
            'icCard': Random.integer(), //ic
            'qrCode': Random.image('720x300', Random.color(), 'bg-img'),//二维码
            'wiegand': Random.cparagraph(),
            'mail': Random.integer(),
            'password': Random.integer(),
            'rentCount': Random.cparagraph(),
            'temp': Random.cparagraph(),
            'birthday': Random.date('yyyy-MM-dd HH:mm:ss'),
            'getFiedList': Random.integer(),
            'type': Random.cparagraph(),
            'newField': Random.cparagraph(),//新的识别介质
            'entryTime': Random.date('yyyy-MM-dd HH:mm:ss'),
            'gender': Random.integer(),
            'position': Random.cparagraph(),
          })
          count--
        }
        return response
    }
}
var creatPersonnelList = {
    url: '/mock/tmesh/personList',
    type: 'post',
    response: _ => {
      return {
        code: 200,
        message: 'post success'
      }
    }
}
var removePersonnelList = {
    url: '/mock/tmesh/personList',
    type: 'post',
    response: _ => {
      return {
        code: 200,
        message: 'post success'
      }
    }
}
  
export default [
  getPersonnelList,
  creatPersonnelList,
  removePersonnelList
]

• resource.js

import Mock from 'mockjs'
var Random = Mock.Random

var getResourcesList = {
  // - API 定义请求地址加 mock 前缀，此处写出相同的完整的请求地址或者正则
  url: '/mock/tmesh/resources/_all\.*',
  type: 'get',
  response: config => {
    // 建议查询接口此处 response 结构一致,count 是返回的数据条数
    let response = {
          entity :[]
        }, count = 6;
    while(count > 0) {
      response.entity.push({
        'id|+1': Random.string('lower', 7, 10), 
        'name': Random.first(),
        'preview':Random.ctitle(3, 5),
        'type': Random.ctitle(3, 5),
        'create_time': Random.date('yyyy-MM-dd HH:mm:ss'),
        'updata_time': Random.date('yyyy-MM-dd HH:mm:ss'),
        'status': Random.ctitle(3, 5),
        'create_name': Random.first(),
      })
      count--
    }
    return response
  }
}

export default [
  getResourcesList
 
]

• tenant.js

import Mock from 'mockjs'
var Random = Mock.Random
var getTenantList = {
  // - API 定义请求地址加 mock 前缀，此处写出相同的完整的请求地址或者正则
  url: '/mock/tmesh/tenant/_all\.*',
  type: 'get',
  response: config => {
    // 建议查询接口此处 response 结构一致,count 是返回的数据条数
    let response = { entity: [] }, count = 6;
    while (count > 0) {
      response.entity.push({
        'id|+1': Random.integer(),
        'avatar': Random.image('250x250', Random.color(), Random.first()), //image
        'bgImage': Random.image('720x300', Random.color(), 'bg-img'), //image
        'createTime': Random.date('yyyy-MM-dd HH:mm:ss'),
        'name': `${Random.first()} ${Random.last()}`,
        'address': Random.city(true),
        'title': Random.ctitle(),
        'description': Random.cparagraph()
      })
      count--
    }
    return response
  }
}
var creatTenant = {
  url: '/mock/tmesh/tenant',
  type: 'post',
  response: _ => {
    return {
      code: 200,
      message: 'post success'
    }
  }
}
export default [
  getTenantList,
  creatTenant
]

• visitor.js

import Mock from 'mockjs'
var Random = Mock.Random

var getVisitorRecordList = {
  // - API 定义请求地址加 mock 前缀，此处写出相同的完整的请求地址或者正则
  url: '/mock/tmesh/visitor/records\.*',
  type: 'get',
  response: config => {
    // 建议查询接口此处 response 结构一致,count 是返回的数据条数
    let response = {
      entity: {
        records: [],
        total: 500,
        page: 1,
        size: 10
      }
    }, count = 10;
    while (count > 0) {
      response.entity.records.push({
        'id|+1': Random.string('lower', 7, 10),
        'visitorList|5': [
          {
            'avatar': Random.image('250x250', Random.color()),
            'name': Random.first(),
            'card': Random.string('lower', 5, 10),
            'phone': /^1[358][1-9]\d{8}/
          }
        ], //image
        'startTime': Random.date('yyyy-MM-dd HH:mm:ss'),
        'endTime': Random.date('yyyy-MM-dd HH:mm:ss'),
        'owner': Random.first(),
        'count': Random.integer(1, 20),
        'state': Random.integer(0, 3),
        'reason': Random.ctitle(),
        'passMode': Random.string(),
        'remark': Random.cparagraph()
      })
      count--
    }
    return response
  }
}

var getVisitorList = {
  // - API 定义请求地址加 mock 前缀，此处写出相同的完整的请求地址或者正则
  url: '/mock/tmesh/visitor/visitors\.*',
  type: 'get',
  response: config => {
    // 建议查询接口此处 response 结构一致,count 是返回的数据条数
    let response = {
      entity: {
        records: [],
        total: 501,
        page: 1,
        size: 10
      }
    }, count = 10;
    while (count > 0) {
      response.entity.records.push({
        'id|+1': Random.string('lower', 7, 10),
        'avatar': Random.image('250x250', Random.color()),
        'name': Random.first(),
        'card': Random.string('lower', 5, 10),
        'phone': /^1[358][1-9]\d{8}/,
        'startTime': Random.date('yyyy-MM-dd HH:mm:ss'),
        'endTime': Random.date('yyyy-MM-dd HH:mm:ss'),
        'owner': Random.first(),
        'state': Random.integer(0, 3),
        'reason': Random.ctitle(),
        'passMode': Random.string(),
        'remark': Random.cparagraph()
      })
      count--
    }
    return response
  }
}
export default [
  getVisitorList,
  getVisitorRecordList
]