vue+mockjs模拟数据分页功能、新增功能、编辑功能、删除功能

Mockjs模拟数据，实现增删改查

1、安装mockjs

npm install mockjs --save-dev

2、mock.js文件

// mock.js 文件
import Mock from 'mockjs' // 引入mockjs
const Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据
const dataList = [] // 用于接受生成数据的数组
for (let i = 0; i < 26; i++) { // 可自定义生成的个数
  const template = {
    'id': i, // id
    'Name': Random.name(), // 生成姓名
    'Address': Random.province() // 生成地址
  }
  dataList.push(template)
}

// 模拟分页
Mock.mock('http://localhost:8080/api/list', 'post', (params) => {
  var listQuery = JSON.parse(params.body)
  var pageIndex = (listQuery.page - 1) * listQuery.pageSize
  var [index, size, total] = [pageIndex, listQuery.pageSize, dataList.length]
  var newDataList = dataList.slice(index * size, (index + 1) * size)
  return {
    'code': '200',
    'message': 'success',
    'data': {
      'listQuery': listQuery,
      'tableData': newDataList,
      'tableHead': [{ column: 'id', columen_comment: '用户id' }, { column: 'Name', columen_comment: '姓名' }, { column: 'Address', columen_comment: '地址' }],
      'total': total
    }
  }
})

// 模拟新增数据
Mock.mock('http://localhost:8080/api/add', 'post', (params) => {
  var data = JSON.parse(params.body)
  data.id = dataList.length
  dataList.push(data)
  return {
    'code': '200',
    'message': 'success'
  }
})

// 模拟删除数据
Mock.mock('http://localhost:8080/api/delete', 'post', (params) => {
  var data = JSON.parse(params.body)
  dataList.splice(data.id, 1)
  return {
    'code': '200',
    'message': 'success'
  }
})

// 模拟修改数据
Mock.mock('http://localhost:8080/api/update', 'post', (params) => {
  var data = JSON.parse(params.body)
  /* dataList.map((item) => {
    if (item.id === data.id) {
      return data
    } else { return item }
  }) */
  for (var i in dataList) {
    if (dataList[i].id === data.id) { // 在数组arr里找到这个id
      dataList[i] = data
    }
  }
  return {
    'code': '200',
    'message': 'success',
    'data': data
  }
})

3、在使用到地方引入

//引入
require('@/utils/mock.js')
mounted() {
    this.test()
  },
methods: {
    async test() {
      await axios.post('http://localhost:8080/api/list', { page: 1, pageSize: 30 }).then(res => {
        console.log(res)
      })
      await axios.post('http://localhost:8080/api/add', { Name: 'lijn', Address: 'fhhsdf' }).then(res => {
        console.log(res)
      })
      await axios.post('http://localhost:8080/api/delete', { id: 25 }).then(res => {
        console.log(res)
      })
      await axios.post('http://localhost:8080/api/update', { id: 26, Name: 'ljc', Address: '广东省' }).then(res => {
        console.log(res)
      })
      await axios.post('http://localhost:8080/api/list', { page: 1, pageSize: 30 }).then(res => {
        console.log(res)
      })
      await axios.post('http://localhost:8080/api/list', { page: 1, pageSize: 30 }).then(res => {
        console.log(res)
      })
    }
 }