Mockjs 增、删、改、查（分页、多条件查询）

查（分页、多条件查询）：

关键代码：

Mock.mock('/vue-table-list/tableLinkage/list', 'post', (option) => {
  // console.log("🚀 ~ file: tableLinkage.js:66 ~ Mock.mock ~ option:", option)
  const params = JSON.parse(option.body) // 获取查询参数
  const paramsKeyArr = Object.keys(params) // 获取查询参数的key值
  // console.log("🚀 ~ file: tableLinkage.js:47 ~ Mock.mock ~ paramsKeyArr:", paramsKeyArr)
  // console.log("🚀 ~ file: tableLinkage.js:46 ~ Mock.mock ~ params:", params)
  // console.log("🚀 ~ file: tableLinkage.js:140 ~ queryList ~ tableLinkageData:", tableLinkageData)
  // 例，companyCodeList 是下拉框多选出来的数组，数组内的值对应 列表的 companyCode
  const paramsMap = {
    'companyCodeList': 'companyCode' 
  }
  // tableLinkageData 是列表数据
  const multipleArr = tableLinkageData.data.filter(item => {
    let key = 'companyCodeList'
    // 若多选数组长度为0，则直接返回原有列表数据
    if (params[key].length === 0) {
      return true
    } else {
      // 若不为0，则根据多选数组内的值（params[key] =》 value）与列表数据的值（item[paramsMap[key]]）对比，相等则返回相应的数据（tableLinkageData.data =》item）
      let flag = false
      params[key].map(value => {
        if (value && (item[paramsMap[key]] + '') === (value + '')) {
          flag = true
        }
      })
      return flag
    }
  })
  // console.log("🚀 ~ file: tableLinkage.js:149 ~ multipleArr ~ multipleArr:", multipleArr)
  const queryList = multipleArr.filter(item => {
    // const queryList = tableLinkageData.data.filter(item => {
    let flag = true
    paramsKeyArr.map(key => {
      if (key !== 'companyCodeList') {
        // 只要列表行数据内容有一个不与查询参数一致，则排除这条数据
        if (params[key] && item[key]?.indexOf(params[key]) === -1) {
          flag = false
        }
      }
    })
    return flag
  })
  // console.log("🚀 ~ file: tableLinkage.js:61 ~ queryList ~ queryList:", queryList)
  // 根据搜索条件得到最终的数据，并对数据进行分页
  const list = getSelectList(queryList, params.pageNum, params.pageSize)
  // console.log("🚀 ~ file: tableLinkage.js:48 ~ Mock.mock ~ list:", list)
  return {
    code: 200,
    msg: '操作成功',
    total: tableLinkageData.data.length,
    data: null,
    rows: [...list]
  }
})

根据搜索条件得到最终的数据，并对数据进行分页：

const list = getSelectList(queryList, params.pageNum, params.pageSize)

// 对表格数据分页
const getSelectList = (data, pageNum, pageSize) => {
  const start = Math.ceil(((pageNum - 1) * pageSize).toFixed(0)),
        end = Math.ceil((start + pageSize).toFixed(2))
  const list = data.slice(start >= 0 ? start : 0, end)
  return list
}

?全部代码：

const Mock = require('mockjs')
// 对表格数据分页
const getSelectList = (data, pageNum, pageSize) => {
  const start = Math.ceil(((pageNum - 1) * pageSize).toFixed(0)),
        end = Math.ceil((start + pageSize).toFixed(2))
  const list = data.slice(start >= 0 ? start : 0, end)
  return list
}
Mock.mobile_prefix = [
  "134",
  "135",
  "136",
  "137",
  "138",
  "139",
  "150",
  "151",
  "152",
  "157",
  "158",
  "159",
  "130",
  "131",
  "132",
  "155",
  "156",
  "133",
  "153"
]
Mock.bank_prefix = [
  "4367",
  "6227",
  "6228",
  "9559",
  "6222",
  "9558",
  "6216",
  "4563",
  "6013",
  "6221",
  "6210",
  "6014",
  "5218",
  "6282",
  "3568",
  "6226",
  "4218",
  "6229",
  "4864",
  "6029",
  "9988"
]
Mock.numeric = "0123456789"
Mock.random = (len, list) => {
  if (len <= 1) {
    len = 1
  }
  var s = ""
  var n = list.length
  if (typeof list === "string") {
    while (len-- > 0) {
      s += list.charAt(Math.random() * n)
    }
  } else if (list instanceof Array) {
    while (len-- > 0) {
      s += list[Math.floor(Math.random() * n)]
    }
  }
  return s
}
Mock.getMobile = () => {
  return Mock.random(1, Mock.mobile_prefix) + Mock.random(8, Mock.numeric)
}
Mock.getBank = () => {
  return Mock.random(1, Mock.bank_prefix) + Mock.random(15, Mock.numeric)
}
const Random = Mock.Random
const tableLinkageData = Mock.mock({
    //输出数据
    //还可以自定义其他数据
    // code: 200,
    // msg: '操作成功',
    // total: 75,
    "data|75": [{
      // 'id': "@increment",
      'id|+1': 1,
      'bankAccountId': '@id()',
      'companyCode|+1': 1,
      // 'companyName': `公司${'@increment(1)'}`,
      'accountType|1': ['1', '2'],
      // 'accountTypeDesc|1': ['银行帐号', '虚拟子户'],
      'no': '@string(3,50)', // 生成3-50位的保养合同号
      'subBranch': Random.cword(2,4)+'银行',
      'cardNum': /^([1-9]{1})(\d{14}|\d{18})$/, // 随机生成银行卡卡号
      // 'cardNum': Mock.getBank(), // 随机生成银行卡卡号（统一19位）
      'phone': Mock.getMobile(), // 手机号
      // 'phone': /^1[358][1-9]\d{8}/,
      'name': `${Random.first()} ${Random.last()}`, // 人员姓名
      'groups': Random.integer(), // 组织编号
      'groupNames': `${Random.first()} ${Random.last()}`, // 组织名称
      // 'idCard': Random.integer(), // 身份证
      'desc': Random.cparagraph(),
      'avatar': Random.image('250x250', Random.color()),
      'qrCode': Random.image('720x300', Random.color(), 'bg-img'), //二维码
      'address': Random.city(true),
      'status|1': ['0', '1'],
      'type|1': ['0', '1'],
      // 'statusDesc|1': ['启用', '禁用'],
      'jobType|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],
      'preview': Random.ctitle(3, 5),
      'email': '@email',
      'remark': "@csentence(50)",
      'createdBy': "@cname()",
      'createdAt': "@date(yyyy-MM-dd)",
      'updatedBy': "@cname()",
      'updatedAt': "@date(yyyy-MM-dd hh:mm:ss)",
    }]
})

Mock.mock('/vue-table-list/tableLinkage/list', 'post', (option) => {
  // console.log("🚀 ~ file: tableLinkage.js:66 ~ Mock.mock ~ option:", option)
  const params = JSON.parse(option.body) // 获取查询参数
  const paramsKeyArr = Object.keys(params) // 获取查询参数的key值
  // console.log("🚀 ~ file: tableLinkage.js:47 ~ Mock.mock ~ paramsKeyArr:", paramsKeyArr)
  // console.log("🚀 ~ file: tableLinkage.js:46 ~ Mock.mock ~ params:", params)
  // console.log("🚀 ~ file: tableLinkage.js:140 ~ queryList ~ tableLinkageData:", tableLinkageData)
  // 例，companyCodeList 是下拉框多选出来的数组，数组内的值对应 列表的 companyCode
  const paramsMap = {
    'companyCodeList': 'companyCode' 
  }
  // tableLinkageData 是列表数据
  const multipleArr = tableLinkageData.data.filter(item => {
    let key = 'companyCodeList'
    // 若多选数组长度为0，则直接返回原有列表数据
    if (params[key].length === 0) {
      return true
    } else {
      // 若不为0，则根据多选数组内的值（params[key] =》 value）与列表数据的值（item[paramsMap[key]]）对比，相等则返回相应的数据（tableLinkageData.data =》item）
      let flag = false
      params[key].map(value => {
        if (value && (item[paramsMap[key]] + '') === (value + '')) {
          flag = true
        }
      })
      return flag
    }
  })
  // console.log("🚀 ~ file: tableLinkage.js:149 ~ multipleArr ~ multipleArr:", multipleArr)
  const queryList = multipleArr.filter(item => {
    // const queryList = tableLinkageData.data.filter(item => {
    let flag = true
    paramsKeyArr.map(key => {
      if (key !== 'companyCodeList') {
        // 只要列表行数据内容有一个不与查询参数一致，则排除这条数据
        if (params[key] && item[key]?.indexOf(params[key]) === -1) {
          flag = false
        }
      }
    })
    return flag
  })
  // console.log("🚀 ~ file: tableLinkage.js:61 ~ queryList ~ queryList:", queryList)
  // 根据搜索条件得到最终的数据，并对数据进行分页
  const list = getSelectList(queryList, params.pageNum, params.pageSize)
  // console.log("🚀 ~ file: tableLinkage.js:48 ~ Mock.mock ~ list:", list)
  return {
    code: 200,
    msg: '操作成功',
    total: tableLinkageData.data.length,
    data: null,
    rows: [...list]
  }
})

使用：

data() {
    return {
      // 遮罩层
      // loading: false,
      tableLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyCodeList: [],
        cardNum: null,
        accountType: null,
        transactionTime: [],
      },
    }
},

methods: {
  getList() {
    const res = await axios.get('/vue-table-list/tableLinkage/list', this.queryParams)
  }
}

?

模拟根据id查询对应数据 get

// 使用响应数据的函数，含有 url、type 和 body 三个属性
// 根据url 获取参数
Mock.mock(/listById/, 'get', ({ url }) => {
  // 获取？后面的参数
  const query = url.split('?')[1]
  // 解析参数
  const queryStr = new URLSearchParams(query)
  const id = queryStr.get('id')
  return {
    code: 0,
    data: list.data.find(item => item.id === Number(id))
  }
})

methods: {
  getDetailById() {
    const res = await axios.get('listById', { params: { id: 1 } })
  }
}

增加数据 post

// 如果是put ｜ post 的请求 参数是放在了body里面
Mock.mock(/addItem/, 'post', ({ body }) => {
  // 获取请求体的数据
  const { data } = JSON.parse(body)
  // 对一些必填的字段做校验
  const dataTips = {
    name: '名字不能为空',
    sex: '性别不能为空',
    phone: '手机号码不能为空',
    account: '账号不能为空'
  }
  for (const key of Object.keys(dataTips)) {
    if (!data[key]) {
      return { code: 500, message: dataTips[key] }
    }
  }
  return { code: 200, data: '操作成功' }
})

使用：

// 返回 500 msg: '手机号码不能为空'
methods: {
    addItem () {
        const params = {
            name: 'lily',
            sex: '女'
        }
        const res = axios.post('/addItem', { data: params })
    }
}

// 返回200 ，msg: 操作成功
methods: {
    addItem () {
        const params = {
            name: 'lily',
            sex: '女',
            phone: '15915888888',
            account: 'aaa.com'
        }
        const res = axios.post('/addItem', { data: params })
        console.log(res, '===>addItem')
    }
}

?

?根据id删除对应数据 delete

Mock.mock(/removeById/, 'delete', ({ url }) => {
  // 获取？后面的参数
  const query = url.split('?')[1]
  // 解析参数
  const queryStr = new URLSearchParams(query)
  const id = queryStr.get('id')
  const index = list.data.findIndex(item => item.id === id)
  list.data.splice(index, 1)
  return {
    code: 200,
    data: '操作成功'
  }
})

?使用：

methods: {
    removeItemlById () {
      const res = axios.delete('/removeById', { params: { id: 1 } })
    }
  }

?

根据id修改对应数据??put

// 如果是put ｜ post 的请求 参数是放在了body里面
Mock.mock(/updateById/, 'put', ({ body }) => {
  // 格式化body的参数
  const { data } = JSON.parse(body)
  // 找到对应的数据
  const target = list.data.find(item => item.id === data.id)
  if (!target) {
    return { code: 500, message: '查询有误' }
  }
  for (const key in data) {
    target[key] = data[key]
  }
  return { code: 0, data: target }
})

使用：

methods: {
    async updatetemlById () {
      const res = await axios.put('/updateById', { data: { id: 1, name: '我是修改的名字', role: '我是修改的role', account: '我是修改的账号' } })
      console.log(res, '===>updatetemlById')
    }
  }

相关文章：

前端在项目中使用mockjs模拟数据的增删改查_mockjs增删改查-CSDN博客

vue快速入门七（mock.js，js实现组件路由，总线）_mockjs vue-CSDN博客

Vue后台 - 利用 mockjs 完成数据的获取、编辑、增加、删除和分页【详细步骤篇】_vue获取数据并分页-CSDN博客?004：vue中安装使用Mock来模拟数据（详细教程）_vue模拟数据mock-CSDN博客

如何在vue中使用mockjs模拟接口的各种数据_mock模拟带参数的接口数据-CSDN博客?

vue 使用 mock.js_vue mockjs-CSDN博客?

使用Mockjs模拟接口实现增删改查、分页及多条件查询_vue.js_脚本之家

vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能_vue mock如何模拟新增-CSDN博客?