如何在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放到了線上，可以點在線預覽查看實現的效果
在線預覽