之前一直使用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放到了線上，可以點在線預覽查看實現的效果 在線預覽

總結

以上是生活随笔為你收集整理的mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。