之前一直使用json-server在前端開發(fā)時(shí)，搭建本地?cái)?shù)據(jù)接口測試，但有時(shí)又需要將做好的項(xiàng)目放于 github page上做項(xiàng)目演示。在本地時(shí)，json server很好使用，但一旦放在github上就實(shí)現(xiàn)不了我們期望的效果了；后來發(fā)現(xiàn) mockjs 這個(gè)插件就滿足這一需求。研究了半天，感覺 mockjs 模擬數(shù)據(jù)更強(qiáng)大，通過隨機(jī)數(shù)據(jù)，可以模擬各種場景，下面一步步的來實(shí)現(xiàn)在 vue-cli創(chuàng)建的項(xiàng)目中添加一條用戶信息的數(shù)據(jù)模擬接口：

安裝 mockjs

在vue項(xiàng)目安裝mockjs

npm install mockjs --save-dev

在項(xiàng)目src 目錄中創(chuàng)建一個(gè) mock.js文件

在main.js 入口文件中引入剛剛創(chuàng)建的mock 文件

import './mock.js'

創(chuàng)建模擬數(shù)據(jù)

在 mock.js中創(chuàng)建一條用戶信息模擬數(shù)據(jù)

import Mock from 'mockjs'

const Random = Mock.Random

// 設(shè)置全局延時(shí)，沒有延時(shí)的話，有時(shí)候會(huì)檢測不到數(shù)據(jù)變化

Mock.setup({

timeout: '300-600'

})

// 創(chuàng)建一個(gè)數(shù)組用來接收模擬的數(shù)據(jù)

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': ['西南財(cái)經(jīng)', '北京交通大學(xué)', '重慶工商大學(xué)', '清華大學(xué)', '西南大學(xué)', '上海復(fù)旦大學(xué)'],

'profession|1': ['教授', '律師', '醫(yī)生', '公務(wù)員', '大學(xué)老師', '警察', '白領(lǐng)'],

profile: '@cparagraph'

}))

}

接下來進(jìn)一步實(shí)現(xiàn)增刪改查的各個(gè)數(shù)據(jù)接口，這里我的需求是，只使用一次模擬數(shù)據(jù)，后面使用 localStorage 來進(jìn)行存儲(chǔ)數(shù)據(jù)。

// 獲取用戶信息列表

function getList() {

// 若 localStorage 沒有數(shù)據(jù)，則將 Mock 的數(shù)據(jù)存入

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

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

}

// 每次獲取數(shù)據(jù)時(shí)，再從 localStorage 中拉取數(shù)據(jù)

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

return userlist

}

// 獲取單個(gè)用戶信息

function getUser(options) {

// 先從 localStorage 中拉取數(shù)據(jù)

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

// 遍歷數(shù)組，返回id 與傳來 id 相當(dāng)?shù)囊粋€(gè)對(duì)象

for( let index in userlist) {

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

var user = userlist[index]

return user

}

}

}

// 刪除用戶信息

function deleteUser(options) {

// 先從 localStorage 中拉取數(shù)據(jù)

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

// 根據(jù)傳遞的 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 中拉取數(shù)據(jù)

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

// 獲取傳入用戶信息對(duì)象，是一個(gè)字符串，需要轉(zhuǎn)化為對(duì)象

var user = JSON.parse(options.body)

// 使用 mock 隨機(jī)生成一個(gè) id

user.id = Random.id()

// 將 user 插入到 userlist 中

userlist.unshift(user)

// 重新將 userlist 存入 localStorage 中

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

return {

data: '用戶添加成功'

}

}

// 更新用戶信息

function updateUser(options) {

// 先從 localStorage 中拉取數(shù)據(jù)

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

var user = JSON.parse(options.body)

// 遍歷 userlist 根據(jù)傳入對(duì)象的 id 更新用戶信息

for ( let index in userlist ) {

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

userlist[index] = user

}

}

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

return {

data: '用戶更新成功'

}

}

// 制作各個(gè)接口

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 導(dǎo)出

export default Mock

這樣在需要的組件里就可以使用相應(yīng)的接口了

案例預(yù)覽

最后我將的這個(gè)demo放到了線上，可以點(diǎn)在線預(yù)覽查看實(shí)現(xiàn)的效果 在線預(yù)覽

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。