前端模拟数据——mockjs的使用总结

先说结论

• ① Mockjs 实际上是不影响正常网络请求的，他是通过正则匹配请求路径进行拦截的，这一点我们在项目实践中已经证明了
• ② Mockjs 有两大功能，在人家官网上写的清清楚楚，一定要看清官网

再说使用

通过我们前端主力骨干的深度调研和反复测试，得出以下使用方法，征求创作者同意后，写进文章

 # 模拟数据`Mock`使用手册
 ## 文件创建
 - 在mock目录下创建对应模块的文件夹
 - 将建好的文件路径在`mock`文件夹下的`index.ts`中引入
 ## 文件内容书写
 - 引入`Mock`以及`utils`文件夹下的`mockCRUD.ts`文件
 - 创建`mock`数据
 - 使用`mockCRUD.ts`内的方法
  // 模拟数据
  const demoList = Mock.mock({
    ...
  })
  mockQuery("拦截的请求路径", demoList);
  mockInsert("拦截的请求路径", demoList);
  mockUpdate("拦截的请求路径", demoList);
  mockRemove("拦截的请求路径", demoList);

// main.ts
import "/@/mock"

// mock/system/index.ts
import Mock from "mockjs"
import { mockQuery, mockInsert, mockUpdate, mockRemove } from "/@/utils/mockCRUD"

// 参数配置
const parameterList = Mock.mock({
  'list|100': [
    {
      id: "@increment",
      "totalPower|0-100": 0,
      "powerPercent|0-100": 0,
      "averagePower|0-100": 0,
      "powerPeak|0-100": 0,
      "def|0-100": 0,
      "def1|0-100": 0,
      "def2|0-100": 0,
      "def3|0-100": 0,
      "def4|0-100": 0,
      "smr|0-100": 0,
    }
  ]
})
mockQuery(/\/indexCalculation\/getParameter/, parameterList);
mockInsert(/\/indexCalculation\/insertParameter/, parameterList);
mockUpdate(/\/indexCalculation\/updateParameter/, parameterList);
mockRemove(/\/indexCalculation\/removeParameter/, parameterList);

// 用户管理
Mock.Random.extend({
  phone: function () {
    var phonePrefixs = ['132', '135', '189']
    return this.pick(phonePrefixs) + Mock.mock(/\d{8}/)
  }
})
const userList = Mock.mock({
  'list|100': [
    {
      id: "@increment",
      userName: "@phone",
      name: "@cname",
      "password|6-16": "*",
      telephone: "@phone",
      email: "@email('qq.com')",
      "department|1": ["研发部", "工程部", "销售部"],
      "permissionName|1": ["普通用户", "管理人员", "超级管理员"],
    }
  ]
})
mockQuery(/\/indexCalculation\/getUser/, userList);
mockInsert(/\/indexCalculation\/insertUser/, userList);
mockUpdate(/\/indexCalculation\/updateUser/, userList);
mockRemove(/\/indexCalculation\/removeUser/, userList);

// 权限管理
const roleList = Mock.mock({
  'list|100': [
    {
      id: "@increment",
      "permissionName|1": ["普通用户", "管理人员", "超级管理员"],
      "permissionContent|1": ["数据采集与管理", "指标计算", "系统管理"],
      createTime: "@datetime('yyyy MM dd HH:mm')",
      lastTime: "@datetime('yyyy MM dd HH:mm')",
    }
  ]
})
mockQuery(/\/indexCalculation\/getRole/, roleList);
mockInsert(/\/indexCalculation\/insertRole/, roleList);
mockUpdate(/\/indexCalculation\/updateRole/, roleList);
mockRemove(/\/indexCalculation\/removeRole/, roleList);

// utils/mockCRUD.ts
import Mock from 'mockjs'

/**
 * @name mockQuery 查询数据
 * @param url mock拦截的路径(使用正则表达式)
 * @param tempList 生成的mock数组
 * @description 只拦截post请求
 * @example /\/xxx\/xxx/
 */
export const mockQuery = (url: string | RegExp, tempList: any) => {
  Mock.mock(url, 'post', (queryBody) => {
    const query = JSON.parse(queryBody.body);
    let data = {
      list: null,
      total: 0,
    };
    data.list = tempList.list.slice((query.page.current - 1) * query.page.pageSize, query.page.current * query.page.pageSize)
    data.total = tempList.list.length;
    return {
      status: 200,
      msg: '操作成功',
      data
    }
  })
}

/**
 * @name mockInsert 新增数据
 * @param url mock拦截的路径(使用正则表达式)
 * @param tempList 生成的mock数组
 * @description 只拦截post请求
 * @example /\/xxx\/xxx/
 */
export const mockInsert = (url: string | RegExp, tempList: any) => {
  Mock.mock(url, 'post', (queryBody) => {
    const body = JSON.parse(queryBody.body);
    tempList.list.push(body)
    return {
      status: 200,
      msg: '操作成功',
      data: "新增成功"
    }
  })
}

/**
 * @name mockUpdate 修改数据
 * @param url mock拦截的路径(使用正则表达式)
 * @param tempList 生成的mock数组
 * @description   只拦截post请求
 * @example /\/xxx\/xxx/
 */
export const mockUpdate = (url: string | RegExp, tempList: any) => {
  Mock.mock(url, 'post', (queryBody) => {
    const body = JSON.parse(queryBody.body);
    tempList.list.find((item: any) => {
      item.id === body.id && Object.assign(item, body);
    })
    return {
      status: 200,
      msg: '操作成功',
      data: "修改成功"
    }
  })
}

/**
 * @name mockRemove 修改数据
 * @param url mock拦截的路径(使用正则表达式)
 * @param tempList 生成的mock数组
 * @description 新增的数据如果没有id是是删不掉的
 * @example /\/xxx\/xxx/
 */
export const mockRemove = (url: string | RegExp, tempList: any) => {
  Mock.mock(url, 'post', (queryBody) => {
    const id = JSON.parse(queryBody.body);
    tempList.list = tempList.list.filter((item: any) => item.id !== id)
    return {
      status: 200,
      msg: '操作成功',
      data: "删除成功"
    }
  })
}