Mockjs模擬數據，實現增刪改查

Mockjs模擬數據，實現增刪改查。

1、安裝Mockjs

npm install mockjs --save-dev

因爲生產環境用的是正式接口，安裝在開發依賴上可以減小包的大小。

2、生成數據初始列表

import Mock from 'mockjs';
const count = 25;
// 處理解析url
const splitParams = url => {
  const search = url.split('?')[1]
  if (!search) {
    return {}
  }
  return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}')
}
// 生成數據列表
const generateList = () => {
  const tempList = [];
  for (let i = 0; i < count; i++) {
    const listItem = Mock.mock({
      'id': '@id',
      'name': '@cname',
      "date": "@date()",//隨機生成日期
      'Address': '@county(true)', // 生成省 市 縣組成的地址
      'Email': '@email',//生成郵箱
      "avatar": "@image('200x200','red','#fff','avatar')",//生成圖片
      // "mark": Random.cparagraph(0, 5),
      "description": "@cparagraph()",//描述中文
    });
    tempList.push(listItem);
  }
  return tempList;
}
let mockList = generateList();

3、基於mockList，獲取數據列表

// 獲取數據列表
  static async getMockUserlist (ctx, next) {
    const fetchUrl = ctx.request.url;
    const { page = 1, pageSize = 10, key = '' } = splitParams(fetchUrl);
    const tempPageList = key ? mockList.filter(u => u.name.indexOf(key) >= 0 || u.Address.indexOf(key) >= 0) : mockList;
    const pageList = tempPageList.filter((item, index) => index < Number(pageSize) * Number(page) && index >= Number(pageSize) * (Number(page) - 1));
    ctx.state = 200;
    ctx.body = {
      code: '000000',
      message: 'success',
      data: Object.assign({}, { list: pageList, page: Number(page), pageSize: Number(pageSize), total: mockList.length })
    };
  }

4、基於mockList，添加或更新用戶信息

 // 添加或更新用戶信息
  static async addMockUser (ctx, next) {
    const fetchUrl = ctx.request.url;
    const { name, date, Address, Email, description, id = '' } = splitParams(fetchUrl);
    if (id) {
      mockList.some(u => {
        if (u.id === id) {
          u.name = name;
          u.date = date;
          u.Address = Address;
          u.Email = Email;
          u.description = description;
          return true
        }
      });
    } else {
      const listItem = {
        id: Mock.Random.id(),
        name: name,
        date: date,
        Address: Address,
        Email: Email,
        avatar: Mock.Random.image('200x200', 'red', '#fff', 'avatar'),
        description: description
      };
      mockList.push(listItem);
    }
    ctx.state = 200;
    ctx.body = {
      code: '000000',
      message: 'success',
      data: id ? '編輯成功' : '添加成功'
    };
  }

5、基於mockList，刪除用戶

 // 刪除用戶
  static async deleteMockUser (ctx, next) {
    const fetchUrl = ctx.request.url;
    const { id } = splitParams(fetchUrl);
    mockList = mockList.filter(u => u.id !== id);
    ctx.state = 200;
    ctx.body = {
      code: '000000',
      message: 'success',
      data: '刪除成功'
    };
  }

參考文檔：

https://www.jianshu.com/p/1f6a3180051b

隨筆小結，不喜勿噴，謝謝。