在vue-cli搭建的項(xiàng)目中使用mockjs
11
在使用vue開發(fā)的時(shí)候唐全，一直疑惑與mockjs怎么用，開了mockjs的開發(fā)文檔肛真，還是一臉蒙蔽袁铐，無從下手！mockjs在前后端分離開發(fā)上進(jìn)行模擬數(shù)據(jù)淘衙，是不可避掉的一環(huán)传藏。在網(wǎng)上看了一些博文還有查閱了其文檔，終于搞明白了它的基礎(chǔ)用法彤守，有什么不完整的地方毯侦，還請(qǐng)大家多多指正。
- 搭建一個(gè)vue項(xiàng)目
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack vue-mock
# 安裝依賴具垫，走你
$ cd my-project
$ npm install
- 安裝mockjs
npm install mockjs --save-dev
- 啟動(dòng)項(xiàng)目
npm run dev
- 創(chuàng)建一個(gè)mockjs文檔
此時(shí)可以看到類似于這樣的一個(gè)項(xiàng)目結(jié)構(gòu)
[圖片上傳失敗...(image-5bde3d-1531914746405)]
其中mockjs是我自己創(chuàng)建的一個(gè)mock文件侈离，用于存放模擬的數(shù)據(jù)
項(xiàng)目搭建起來之后，能夠在package.json里面看到 "mockjs": "^1.0.1-beta3" 這塊代碼筝蚕，就說明mockjs已經(jīng)引入載入成功卦碾，就可以開始我們下一步的操作；
我所理解的有兩種方法使用mockjs起宽，第一種是比較簡答你的使用洲胖，還有一種是模塊化的使用
簡單的使用
（1）在項(xiàng)目中的mock.js文件中，寫入模擬的數(shù)據(jù)坯沪，此時(shí)我們需要參照一下mockjs文檔中的這樣一塊
//參照mockjs的文檔绿映，進(jìn)行操作
// 配置 Mock 路徑
require.config({
paths: {
mock: 'http://mockjs.com/dist/mock'
}
})
// 加載 Mock
require(['mock'], function(Mock){
// 使用 Mock
var data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
})
// 輸出結(jié)果
document.body.innerHTML +=
'<pre>' +
JSON.stringify(data, null, 4) +
'</pre>'
})
（2）我們?cè)趍ockjs中進(jìn)行以下編寫
//引入mockjs
const Mock = require('mockjs')
//使用mockjs模擬數(shù)據(jù)
Mock.mock('/api/data', (req, res) => {
return {
data: ['a','b']
}
})
同時(shí)，不要忘記了，需要在main.js里面引入該文檔叉弦，告訴程序丐一，使用了mockjs，來進(jìn)行數(shù)據(jù)模擬
require('./mock')//此部分引入的是我們所編寫的mockjs文檔
（3）重寫了Hello.vue
[圖片上傳失敗...(image-2d3f3e-1531914746405)]
hello.vue中的AJAX請(qǐng)求與mockjs里里面的url相同卸奉，這個(gè)時(shí)候我們可以看到頁面上的顯示如下圖
[圖片上傳失敗...(image-93b0bd-1531914746405)]
模塊化的使用
（1）在build的文件夾下面的dev-server文件中進(jìn)行配置
首先钝诚，需要引入mockjs =》 require('mockjs')
其次在dev-server里面配置
app.use('/api/data', (req, res) => {
res.send({
data:['a','s']
})
})
此塊代碼寫到如下圖所在的區(qū)域
[圖片上傳失敗...(image-e25cbb-1531914746405)]
其中res.send的意思就是把它所包含的數(shù)據(jù)拋出去擂啥，使AJAX能夠請(qǐng)求的到编整，使用這個(gè)方法的時(shí)候巾遭，我們不需要在main.js里面引入就可以直接使用材蛛，但是有一點(diǎn)不好的是荠呐，這種方法着饥，因?yàn)樾遁d配置里面诅愚，比較混亂李破，跟我們模塊化開發(fā)的意愿相悖瘪弓，我們可以嘗試這把數(shù)據(jù)的這一塊單獨(dú)拿出去垫蛆，我們只需要在這里面引用就可以了；
把上面引入的mockjs注掉腺怯，把a(bǔ)pp.use改寫成app.use('/api', require('../src/mock.js'))的形式袱饭，其中api是根路徑，類似于router中的base路徑呛占，后面的require引入的是mock.js里的數(shù)據(jù)
在mockjs文檔中虑乖，我們進(jìn)行一下數(shù)據(jù)改寫，如下圖所示
[圖片上傳失敗...(image-c2163f-1531914746405)]
此時(shí)頁面顯示為
[圖片上傳失敗...(image-a25010-1531914746405)]
[](javascript:void(0);)
[新浪微博](javascript:void(0);)
[微信](javascript:void(0);)
[Twitter](javascript:void(0);)
[Facebook](javascript:void(0);)
贊 | 11 收藏 | 46
