使用Mockjs模拟接口实现增删改查、分页及多条件查询

使用Mockjs模拟接口实现增删改查、分页及多条件查询可以分为以下步骤：

1. 安装Mock.js库

使用npm安装Mock.js库：npm install mockjs --save-dev

1. 创建Mock接口数据

在项目中创建一个mock文件夹，其中的api.js文件用于存放Mock接口数据，具体代码如下：

import Mock from 'mockjs'

const data = Mock.mock({
  'list|10': [{
    'id|+1': 1,
    'name': '@cname',
    'age|10-30': 1,
    'gender|1': ['男', '女'],
    'email': '@EMAIL',
    'address': '@county(true)',
    'job|1': ['前端工程师', '后端工程师']
  }]
})

// 查询列表接口
Mock.mock('/api/list', 'get', () => {
  return {
    code: 200,
    message: '查询成功',
    data: data.list
  }
})

// 新增接口
Mock.mock('/api/add', 'post', (option) => {
  const dataItem = JSON.parse(option.body)
  dataItem.id = data.list.length + 1
  data.list.push(dataItem)
  return {
    code: 200,
    message: '新增成功',
    data: dataItem
  }
})

// 删除接口
Mock.mock('/api/delete', 'post', (option) => {
  const id = JSON.parse(option.body).id
  const index = data.list.findIndex(item => item.id === id)
  data.list.splice(index, 1)
  return {
    code: 200,
    message: '删除成功'
  }
})

// 更新接口
Mock.mock('/api/update', 'post', (option) => {
  const dataItem = JSON.parse(option.body)
  const index = data.list.findIndex(item => item.id === dataItem.id)
  data.list.splice(index, 1, dataItem)
  return {
    code: 200,
    message: '更新成功'
  }
})

// 分页查询接口
Mock.mock('/api/page', 'get', (option) => {
  const { current = 1, pageSize = 10 } = option.query
  const start = (current - 1) * pageSize
  const end = current * pageSize
  const list = data.list.slice(start, end)
  return {
    code: 200,
    message: '查询成功',
    data: {
      list,
      total: data.list.length
    }
  }
})

// 多条件查询接口
Mock.mock(RegExp('/api/search.*'), 'get', (option) => {
  const { name, age, gender } = option.query
  const list = data.list.filter(item => {
    let flag = true
    if (name && item.name.indexOf(name) === -1) {
      flag = false
    }
    if (age && item.age !== parseInt(age)) {
      flag = false
    }
    if (gender && item.gender !== gender) {
      flag = false
    }
    return flag
  })
  return {
    code: 200,
    message: '查询成功',
    data: list
  }
})

以上代码中创建了查询列表接口、新增接口、删除接口、更新接口、分页查询接口和多条件查询接口，其中Mock.mock()方法的三个参数分别为请求的URL、请求的方式和返回的数据。

1. 编写请求代码

在项目中编写请求代码，具体代码如下：

import axios from 'axios'

// 查询列表
axios.get('/api/list').then(res => {
  console.log(res.data)
})

// 新增
axios.post('/api/add', {
  name: '小明',
  age: 23,
  gender: '男',
  email: '[e-mail]',
  address: '广东省深圳市南山区',
  job: '前端工程师'
}).then(res => {
  console.log(res.data)
})

// 删除
axios.post('/api/delete', { id: 1 }).then(res => {
  console.log(res.data)
})

// 更新
axios.post('/api/update', {
  id: 2,
  name: '小明',
  age: 24,
  gender: '男',
  email: '[e-mail]',
  address: '广东省深圳市南山区',
  job: '前端工程师'
}).then(res => {
  console.log(res.data)
})

// 分页查询
axios.get('/api/page', {
  params: {
    current: 2,
    pageSize: 3
  }
}).then(res => {
  console.log(res.data)
})

// 多条件查询
axios.get('/api/search', {
  params: {
    name: '小明',
    age: 24,
    gender: '男'
  }
}).then(res => {
  console.log(res.data)
})

以上代码中的Axios库用于发起请求，其中请求的URL与mock接口数据中的URL一致，请求的方式根据mock接口数据中的方式来确定，返回的数据是mock接口数据中返回的数据。

上述示例仅作为参考，具体实现方式根据实际情况可能会有所不同。