苦呀君
苦呀君

vue mockjs使用方法

大部分内容参照简书文章：https://www.jianshu.com/p/1f6a3180051b

安装开发依赖

npm install mockjs -D

安装mockjs在你的开发依赖上，因为你生产环境用的是正式的接口，安装在开发依赖上可以减少你包的大小。

main.js：

import './mock'  //引用mock

建立mock目录

在 src目录 中，建立一个mock的文件夹:

image-20200527114839646

index.js

样例

index文件用于来合并mock拦截相应请求接口，并使用mock的方法模拟后端返回数据，示例：

// index.js
// 引入mockjs
import Mock from 'mockjs'

// 引入所写的接口拦截操作方法文件
import rootAPI from './root'

// root相关
Mock.mock(/\/system\/root\/list/, 'get', rootAPI.getRootList)
Mock.mock(/\/system\/root/, 'get', rootAPI.getRoot)
Mock.mock(/\/system\/root/, 'post', rootAPI.addRoot)
Mock.mock(/\/system\/root/, 'put', rootAPI.updateRoot)
Mock.mock(/\/system\/root/, 'delete', rootAPI.delRoot)

// ***相关
Mock.mock(url, method, function)

参数

Mock.mock(url, method, function) 实现请求拦截，参数：

参数 描述
url 后端数据请求接口url
method 请求方法类型
function 拦截请求后的处理方法

其它文件

样例

示例中以 root.js 为例，用来存放相应的请求拦截处理方法：

// 引入mockjs
import Mock from 'mockjs'

// 公共方法
function fn1(x) {
    // ...
}
function fn2(x) {
    // ...
}

// 参数配置
let List = [] // 数据列表
const count = 50 // 数据数量

// 随机生成数据
for (let i = 0; i < count; i++) {
  // Mock.mock()方法随机生成数据
  List.push(Mock.mock({
    dataname: "data",
    // ...
  }))
}

// 请求拦截相应的执行方法，一下以获取列表为例
export default {
  /**
   * 获取列表
   * @param owner, ipCode, status, pageNum, pageSize
   * @return {{code: number, ok: bool, data: array, total: number}}
   */
  getRootList: queryParams => {
    // 获取搜索参数，param2Obj方法用于将param转换为对象格式
    const { owner, ipCode, status, pageNum = 1, pageSize = 10 } = param2Obj(queryParams.url)
    // 搜索方法
    const mockList = List.filter(item => {
      if (owner && item.owner.indexOf(owner) === -1) return false
      if (ipCode && item.ipCode.indexOf(ipCode) === -1) return false
      if (status && item.status.indexOf(status) === -1) return false
      return true
    })
    // 分页
    const pageList = mockList.filter((item, index) => index < pageSize * pageNum && index >= pageSize * (pageNum - 1))
    // 返回数据，模拟后端
    return {
      code: 200,
      ok: true,
      data: pageList,
      total: mockList.length
    }
  },
  // 其他方法
  listFn: x => {
      // ...
  }
}

mockjs随机生成数据相关方法

如上样例所示，采用for循环，通过 push() 方法向 List 添加数据，示例：

for (let i = 0; i < count; i++) {
  List.push(Mock.mock({
    id: Mock.Random.id(),
    code: Mock.Random.guid(),
    ipCode: Mock.Random.ip(),
    owner: Mock.Random.cname(),
    'status|1': ['0', '1'],
    createdTime: Mock.Random.datetime(),
    updatedTime: Mock.Random.datetime()
  }))
}

Mock.Random

本方法可以随机生成相应种类参数， Mock.Random.{type}() 实现，常用种类：

type 示例
id 360000201910290362
guid B7fa74Ac-2fDD-24dC-E8af-ff39dcbd6158
ip 139.232.165.220
cname 潘涛
name Richard Walker
datetime 1974-02-03 12:36:46

其它类型请前往Mock文档查看。

自定义随机数据

以样例中的随机选择数组中数据为例：

// 'name|1': array
'status|1': ['a', 'b', 'c']

status就会随机选择数组中的一个数据。

更多示例请查看Mock文档。

其它

常用公共方法

param转对象

前端常用get请求通过param带参数请求，以下方法可以将param转换为对象格式：

// param 转 对象
function param2Obj(url) {
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
}

获取url中“/”后的id等参数

通常修改删除等操作会使用id参数，通常在url最后的"/"后面（例：api/user/1002003），并且如果有多个参数（例：api/user/1002003,1023503,2402806）会返回一个数组：

// 获取最后一个“/”后参数
function getFinal(url) {
  const id = url.split('/').reverse()[0];
  if (id.indexOf(',') === -1) {
    return id
  }
  const ids = id.split(',')
  return ids
}

数据搜索方法

搜索使用filter方法搜索，生成搜索结果在mockList中：

// 搜索方法
const mockList = List.filter(item => {
  if (owner && item.owner.indexOf(owner) === -1) return false
  if (ipCode && item.ipCode.indexOf(ipCode) === -1) return false
  if (status && item.status.indexOf(status) === -1) return false
  return true
})

你可能感兴趣的:(web前端)