Vue2后台管理系统实现难点(3)

`Mock`的后端数据模拟:(首页的数据)

mockData中的home.js

Mock用户列表数据的生成以及增删改查：

用户列表的获取以及搜索功能的实现(重点) => getUserList()和param2Obj()
用户的添加功能的实现 => createUser()
用户的编辑功能的实现 => updateUser()
用户的删除功能的实现 => deleteUser()

这里重点解释一下用户列表获取以及搜索功能之间的切换判断:

看到源码我们就知道了,用户列表的获取和搜索功能都是通过一个函数来返回mock模拟的数据的,这个函数就是getUserList(),那究竟这个过程是怎样实现的呢?
我们在上一篇博客介绍到,用户的获取和搜索都是绑定的一个函数,那就是getList(name = ''),这个函数我们可以看到,里面接收一个name属性,这个属性就是我们在搜索框输入的内容,通过v-model的方式将我们在搜索框里输入的内容双向的绑定到getList()当中,随后通过这个函数变成params拼接到请求url中。
通过这个请求的url来到Mock接口配置当中,通过请求的url对接对应的api ===> getUserList(),最后在getUserList()函数当中通过进行数据的判断是否存在name参数来决定是获取全的用户数据列表还是搜索功能(用到decodeURIComponent()对url进行参数的解构成对象和中文乱码的解码)

完整的`user.js`代码:

import Mock from 'mockjs'

// get请求从config.url获取参数，post从config.body中获取参数
function param2Obj (url) {
  const search = url.split('?')[1]//判断是否带有name参数
  if (!search) {//不存在name参数或者name参数为空,返回一个空数组
    return {}
  }
  return JSON.parse(
    '{"' +
    // 这里将url中的参数解析成一个对象,方便后面表单验证(解析出url中的name等参数)
    decodeURIComponent(search)//解码url,防止中文乱码
      // 正则表达式 
      .replace(/"/g, '\\"')//g为全局标志,使用.replace将url中的"替换成\\(相当于一个反斜杠)
      .replace(/&/g, '","')//g为全局标志,使用.replace将url中的&替换成,
      .replace(/=/g, '":"') +//g为全局标志,使用.replace将url中的=替换成:
    '"}'
  )
}

let List = []
const count = 200

// 使用mock随机生成人员数据
for (let i = 0; i < count; i++) {
  List.push(
    Mock.mock({
      id: Mock.Random.guid(),
      name: Mock.Random.cname(),
      addr: Mock.mock('@county(true)'),
      'age|18-60': 1,
      birth: Mock.Random.date(),
      sex: Mock.Random.integer(0, 1)
    })
  )
}

export default {
  /**
   * 获取列表
   * 要带参数 name, page, limt; name可以不填, page,limit有默认值。
   * @param name, page, limit
   * @return {{code: number, count: number, data: *[]}}
   */
  // 生成当前页面的用户数据(重新获取以及搜索过滤)
  getUserList: config => {
    const { name, page = 1, limit = 20 } = param2Obj(config.url)
    console.log('name:' + name, 'page:' + page, '分页大小limit:' + limit)
    const mockList = List.filter(user => {
      // 判断url中是否存在name参数以及返回对象的字段当中是否存在你输入的内容(判断是否是搜索功能)
      if (name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1) return false//不存在name属性,终止表单提交,返回原mockList
      //存在name属性,返回经过处理的mockList(相当于[filter:name && user.name.indexOf(name) === -1 && user.addr.indexOf(name) === -1])
      return true
    })
    // 这里的pageList接收处理过后的mockList(获取新的用户列表还是搜索功能)
    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
    return {
      code: 20000,
      count: mockList.length,
      list: pageList
    }
  },
  /**
   * 增加用户
   * @param name, addr, age, birth, sex
   * @return {{code: number, data: {message: string}}}
   */
  createUser: config => {//将从user组件接收过来的opertateForm展开,并重新赋值生成一个新的表单返回
    //从form表单中获取你写进去的数据(姓名,年龄等.....)
    const { name, addr, age, birth, sex } = JSON.parse(config.body)
    console.log(JSON.parse(config.body))
    List.unshift({
      id: Mock.Random.guid(),//随机生成一个id
      name: name,
      addr: addr,
      age: age,
      birth: birth,
      sex: sex
    })
    return {
      code: 20000,
      data: {
        message: '添加成功'
      }
    }
  },
  /**
   * 删除用户
   * @param id
   * @return {*}
   */
  deleteUser: config => {
    const { id } = param2Obj(config.url)//接收url上的id对指定用户进行删除
    if (!id) {
      return {
        code: -999,
        message: '参数不正确'
      }
    } else {
      List = List.filter(u => u.id !== id)
      return {
        code: 20000,
        message: '删除成功'
      }
    }
  },
  /**
   * 修改用户
   * @param id, name, addr, age, birth, sex
   * @return {{code: number, data: {message: string}}}
   */
  updateUser: config => {//将从user组件接收过来的opertateForm展开,并重新赋值生成一个新的表单返回
    const { id, name, addr, age, birth, sex } = JSON.parse(config.body)
    const sex_num = parseInt(sex)
    List.some(u => {
      if (u.id === id) {//id不改因为是同一个用户只是修改了属性
        u.name = name
        u.addr = addr
        u.age = age
        u.birth = birth
        u.sex = sex_num
        return true
      }
    })
    return {
      code: 20000,
      data: {
        message: '编辑成功'
      }
    }
  }
}