官方網(wǎng)址：http://mockjs.com/

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供雁江網(wǎng)站建設(shè)、雁江做網(wǎng)站、雁江網(wǎng)站設(shè)計(jì)、雁江網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、雁江企業(yè)網(wǎng)站模板建站服務(wù)，十多年雁江做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

mockjs是用來(lái)模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒(méi)有開發(fā)出來(lái)時(shí)獨(dú)立開發(fā)。我們可以使用真實(shí)的url，mockjs可以攔截ajax請(qǐng)求，返回設(shè)定好的數(shù)據(jù)。

使用方式

這里主要討論在vue項(xiàng)目中，使用axios發(fā)送ajax請(qǐng)求，mock.js模擬數(shù)據(jù)的流程。

vue-cli搭建項(xiàng)目后，安裝axios和mock.js

npm install -S axios
npm install -D mockjs

在項(xiàng)目中新建mock.js文件夾，來(lái)設(shè)置要產(chǎn)生的模擬數(shù)據(jù)的格式。

3. 設(shè)想這樣一個(gè)場(chǎng)景，頁(yè)面在打開時(shí)要從數(shù)據(jù)庫(kù)獲取一個(gè)新聞列表，現(xiàn)在我們要模擬這個(gè)列表，新聞對(duì)象包括新聞標(biāo)題、新聞內(nèi)容和創(chuàng)建時(shí)間三項(xiàng)。

// mock.js
// 引入mockjs
const Mock = require('mockjs')
// 獲取 mock.Random 對(duì)象
const Random = Mock.Random
// mock新聞數(shù)據(jù)，包括新聞標(biāo)題title、內(nèi)容content、創(chuàng)建時(shí)間createdTime
const produceNewsData = function () {
 let newsList = []
 for (let i = 0; i < 20; i++) {
 let newNewsObject = {
 title: Random.ctitle(), // Random.ctitle( min, max ) 隨機(jī)產(chǎn)生一個(gè)中文標(biāo)題，長(zhǎng)度默認(rèn)在3-7之間
 content: Random.cparagraph(), // Random.cparagraph(min, max) 隨機(jī)生成一個(gè)中文段落，段落里的句子個(gè)數(shù)默認(rèn)3-7個(gè)
 createdTime: Random.date() // Random.date()指示生成的日期字符串的格式,默認(rèn)為yyyy-MM-dd；
 }
 newsList.push(newNewsObject)
 }
 return newList
}
// 請(qǐng)求該url，就可以返回newsList
Mock.mock('/mock/news', produceNewsData) // 后面講這個(gè)api的使用細(xì)節(jié)

在main.js引入該mock.js文件，表明我們使用這里面產(chǎn)生的數(shù)據(jù)。

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
require(./mock.js)

在APP.vue里我們來(lái)發(fā)送get請(qǐng)求獲取數(shù)據(jù)

// App.vue

運(yùn)行項(xiàng)目打開控制臺(tái)可以看到，我們拿到了模擬的數(shù)據(jù)。

Mock.mock()

Mock.mock( rurl, rtype, template|function( options ) )
rurl
可選。
表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。例如 '/domian/list.json'。
rtype
可選。
表示需要攔截的 Ajax 請(qǐng)求類型。例如 GET、POST、PUT、DELETE 等。
template
可選。
表示數(shù)據(jù)模板，可以是對(duì)象或字符串。
數(shù)據(jù)模板中的每個(gè)屬性由 3 部分構(gòu)成：屬性名、生成規(guī)則、屬性值：
// 屬性名 name
// 生成規(guī)則 rule
// 屬性值 value
'name|rule': value
例如：'name|1-10':1 會(huì)產(chǎn)生一個(gè)1-10之間的整數(shù)，詳細(xì)規(guī)則參見官方文檔
function(options)
可選。
表示用于生成響應(yīng)數(shù)據(jù)的函數(shù)。
options
指向本次請(qǐng)求的 Ajax 選項(xiàng)集，含有 url、type 和 body 三個(gè)屬性

增加數(shù)據(jù)

之前討論的都是產(chǎn)生好數(shù)據(jù)供我們獲取，如果想測(cè)試增加數(shù)據(jù)的功能，mock.js也可以實(shí)現(xiàn)，對(duì)于 Mock.mock(url,function(ops)) ，ops參數(shù)就可以拿到傳送的數(shù)據(jù)。

// App.vue

我們?cè)趍ock.js中模擬一個(gè)添加數(shù)據(jù)的接口，拿到數(shù)據(jù)后存到數(shù)組中。

// mock.js
// 添加信息
let projectList = []
Mock.mock('/mock/addProject', ops => { // 攔截ajax請(qǐng)求，調(diào)用函數(shù)
 console.log(ops) // 先看一下這個(gè)ops是什么
 projectList.push(ops)
})
// 獲取信息
Mock.mock('/mock/projects', projectList)

在輸入框中輸入標(biāo)題后，點(diǎn)擊提交，數(shù)據(jù)發(fā)送到/mock/addProject, mock.js攔截到請(qǐng)求后，調(diào)用function(ops)方法，打印看到ops是個(gè)對(duì)象，有3個(gè)屬性，url,type和body，而我們輸入的數(shù)據(jù)就在body屬性值里，同時(shí)因?yàn)閍xios默認(rèn)發(fā)送的是json格式的數(shù)據(jù)，所以body里面的數(shù)據(jù)是json串，更改function(ops)函數(shù)，將數(shù)據(jù)以js對(duì)象的形式存入數(shù)組中。當(dāng)然實(shí)際開發(fā)中可以看后端的數(shù)據(jù)返回格式，選擇在前端進(jìn)行json轉(zhuǎn)js的操作，這里只是演示一下。

// mock.js
// 添加信息
let projectList = []
Mock.mock('/mock/addProject', ops => { // 攔截ajax請(qǐng)求，調(diào)用函數(shù)
 // console.log(ops) // 先看一下這個(gè)ops是什么
 ops = JSON.parse(ops.body)
 projectList.push(ops)
})
// 獲取信息
Mock.mock('/mock/projects', projectList)

更改后輸入標(biāo)題，點(diǎn)擊提交，再點(diǎn)擊獲取，可以看到返回了我們提交的數(shù)據(jù)，并且是js對(duì)象的形式，拿到數(shù)據(jù)后就可以做進(jìn)一步的操作了。

修改功能的代碼也是類似的。

刪除數(shù)據(jù)

刪除數(shù)據(jù)一般是把數(shù)據(jù)的id以get形式傳遞給后端，url形式為: /xxx/xxx?id=value, 實(shí)際開發(fā)中后端可以很好的處理id值不同的url，我們只需要關(guān)心怎么獲取到id，但是使用mock.js時(shí)，攔截的url我不知道怎么寫成動(dòng)態(tài)的. Mock.mock('/mock/delete') ,此時(shí)使用axios.get()時(shí)就會(huì)報(bào)錯(cuò)：

所以還是改成了用post傳遞的方式。

不知道是不是有什么別的方法，可以使得刪除時(shí)使用get請(qǐng)求。

總結(jié)

以上所述是小編給大家介紹的vue項(xiàng)目中mock.js的使用及基本用法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！