如何在Vue中使用Mockjs模拟数据的增删查改

之前一直使用json-server在前端开发时，搭建本地数据接口测试，但有时又需要将做好的项目放于 github page上做项目演示。在本地时，json server很好使用，但一旦放在github上就实现不了我们期望的效果了；后来发现 mockjs 这个插件就满足这一需求。研究了半天，感觉 mockjs 模拟数据更强大，通过随机数据，可以模拟各种场景，下面一步步的来实现在 vue-cli创建的项目中添加一条用户信息的数据模拟接口：

安装 mockjs

在vue项目安装mockjs

npm install mockjs --save-dev

在项目src 目录中创建一个 mock.js文件

在main.js 入口文件中引入刚刚创建的mock 文件

import './mock.js'

创建模拟数据

在 mock.js中创建一条用户信息模拟数据

import Mock from 'mockjs'

const Random = Mock.Random

// 设置全局延时，没有延时的话，有时候会检测不到数据变化

Mock.setup({

  timeout: '300-600'

})

// 创建一个数组用来接收模拟的数据

const mocklist = []

const count = 5;

for (let i = 0; i < count; i++) {

  mocklist.push(Mock.mock({

    id: '@id',

    name: '@cname',

    'phone|1': /^1[0-9]{10}$/,

    email: '@email',

    'education|1': ['本科', '大专', '硕士', '博士', '中专'],

    'graduationschool|1': ['西南财经', '北京交通大学', '重庆工商大学', '清华大学', '西南大学', '上海复旦大学'],

    'profession|1': ['教授', '律师', '医生', '公务员', '大学老师', '警察', '白领'],

    profile: '@cparagraph'

  }))

}

接下来进一步实现增删改查的各个数据接口，这里我的需求是，只使用一次模拟数据，后面使用 localStorage 来进行存储数据。

// 获取用户信息列表

function getList() {

  // 若 localStorage 没有数据，则将 Mock 的数据存入

  if (!localStorage.getItem('userlist')) {

    localStorage.setItem('userlist',JSON.stringify(mocklist))

  }

  // 每次获取数据时，再从 localStorage 中拉取数据

  var userlist = JSON.parse(localStorage.getItem('userlist'))

  return userlist

}

// 获取单个用户信息

function getUser(options) {

  // 先从 localStorage 中拉取数据

  var userlist = JSON.parse(localStorage.getItem('userlist'))

  // 遍历数组，返回id 与传来 id 相当的一个对象

  for( let index in userlist) {

    if (userlist[index].id === options.body) {

      var user = userlist[index]

      return user

    }

  }

}

// 删除用户信息

function deleteUser(options) {

  // 先从 localStorage 中拉取数据

  var userlist = JSON.parse(localStorage.getItem('userlist'))

  // 根据传递的 id 删除 用户

  for( let index in userlist ) {

    if (userlist[index].id === options.body) {

      userlist.splice(index,1)

      localStorage.setItem('userlist', JSON.stringify(userlist))

    }

  }

  return {

    data: '用户删除成功'

  }

}

// 添加用户信息

function addUser(options) {

  // 先从 localStorage 中拉取数据

  var userlist = JSON.parse(localStorage.getItem('userlist'))

  // 获取传入用户信息对象，是一个字符串，需要转化为对象

  var user = JSON.parse(options.body)

  // 使用 mock 随机生成一个 id

  user.id = Random.id()

  // 将 user 插入到 userlist 中

  userlist.unshift(user)

  // 重新将 userlist 存入 localStorage 中

  localStorage.setItem('userlist', JSON.stringify(userlist))

  return {

    data: '用户添加成功'

  }

}

// 更新用户信息

function updateUser(options) {

  // 先从 localStorage 中拉取数据

  var userlist = JSON.parse(localStorage.getItem('userlist'))

  var user = JSON.parse(options.body)

  // 遍历 userlist 根据传入对象的 id 更新用户信息

  for ( let index in userlist ) {

    if ( userlist[index].id === user.id ) {

      userlist[index] = user

    }

  }

  localStorage.setItem('userlist', JSON.stringify(userlist))

  return {

    data: '用户更新成功'

  }

}

// 制作各个接口

Mock.mock('/getlist', 'get', getList)

Mock.mock('/getuser', 'post', getUser)

Mock.mock('/deleteuser', 'post', deleteUser)

Mock.mock('/adduser', 'post', addUser)

Mock.mock('/updateuser', 'post', updateUser)

// 最后将 Mock 导出

export default Mock

这样在需要的组件里就可以使用相应的接口了

案例预览

最后我将的这个demo放到了线上，可以点在线预览查看实现的效果

在线预览

如何在Vue中使用Mockjs模拟数据的增删查改的相关教程结束。