在前后端分離的開發(fā)模式中蹬音，數(shù)據(jù)需要通過 http 請求異步從服務(wù)器端獲取，也就是前端開發(fā)需要依賴后端接口库说，如果不能時時保證數(shù)據(jù)獲取通暢狂鞋，就會造成開發(fā)阻塞。這時前端需要一種方式可以來模擬數(shù)據(jù)請求潜的，從而更多的掌握主動權(quán)獨立開發(fā)項目骚揍，mockjs 可以以無侵入的方式攔截 ajax 請求，通過模擬服務(wù)器端響應(yīng)來返回數(shù)據(jù)
安裝與引用
// node 安裝
npm install mockjs
// 引入 mockjs 模塊
import Mock from 'mockjs'
基礎(chǔ)用法
/**
* @method Mock.mock(rurl, template)
* @param [String] curl 攔截的請求url
* @param [Object] template 生成數(shù)據(jù)的模板
*/
Mock.mock('hello.php', {
'list|1-5': [{
name: '@name',
email: '@email',
createTime: '@date'
}]
})
$.ajax({
url: 'hello.php',
dataType: 'json'
}).done(function(data, status, jqXHR) {
$('<pre>').text(JSON.stringify(data, null, 4))
.appendTo('body')
})
模塊化引用
// 定義并導(dǎo)出 mock 模塊
import Mock from 'mockjs';
export default Mock.mock('hello.php', {
'list|1-5': [{
'id|+1': 1,
'email': '@EMAIL',
'regexp3': /\d{5,10}/
}]
});
// 引入定義好的模塊
import data from './mock';
axios.get('hello.php')
.then(function (response) {
console.log(response);
})
-
Mock.mock(rurl, template)方法表示攔截 ajax 請求'hello.php'，通過模板生成模擬數(shù)據(jù)返回 -
list|1-5表示隨機生成屬性名為list的數(shù)據(jù)1-5條信不， 管道符號|左側(cè)表示屬性名嘲叔，右側(cè)表示生成規(guī)則 -
@name表示隨機生成name值，@表示占位符抽活，引用的是Mock.Random中的方法
Mockjs 語法規(guī)范由數(shù)據(jù)模板定義規(guī)范和數(shù)據(jù)占位符定義規(guī)范組成硫戈，在官網(wǎng)的 示例文檔 中提供了豐富的模板定義方法，可點擊查看
mock server
Mockjs 實現(xiàn)的原理是對 XHR 對象的攔截下硕，屬于 js 攔截丁逝，并沒有通過瀏覽器發(fā)出請求，所以一般會碰到以下問題梭姓。
- 雖然是無侵入式霜幼，如果要打包上線，需要把 mockjs 刪除
- 無法在瀏覽器調(diào)試工具里查看請求鏈接和請求參數(shù)
- 無法調(diào)試反向代理誉尖，處理跨域問題
為了處理以上問題罪既，引入集成了 mockjs 的 mock server工具 easy-mock，注冊并登錄 easy-mock 官網(wǎng)后释牺，會有一個演示項目提供參考萝衩，參考演示項目可以輕松創(chuàng)建自己的項目，如下圖
創(chuàng)建項目后可以基于當(dāng)前項目創(chuàng)建請求接口没咙，如下圖，創(chuàng)建一個 url 為 \user的 get 請求千劈，會生成接口為 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/user 的完整地址祭刚，點擊 用戶列表 可查看返回數(shù)據(jù)，由于 easy-mock 內(nèi)部集成了 mockjs墙牌，所以在生成數(shù)據(jù)時可以采用mockjs數(shù)據(jù)模板來生成涡驮，把基礎(chǔ)用法中的數(shù)據(jù)生成模板粘貼過來，可以生成相同數(shù)據(jù)
設(shè)置代理解決跨域
瀏覽器限制跨域訪問喜滨，所以要訪問到接口數(shù)據(jù)捉捅，還需要解決跨域問題，通過 Nginx 解決跨域我在另外一片文章有討論過虽风，點擊可以可查棒口，下面主要介紹下通過 webpack-dev-server 設(shè)置代理
// 通過 ajax 請求 user 接口
axios.get('/proxy/user')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// webpack-dev-server 配置
devServer: {
proxy: {
'/proxy/*': {
target: 'https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello',
changeOrigin: true,
pathRewrite: {
'^/proxy': ''
}
}
}
}
假設(shè)本地請求的根路徑為 http://localhost:8080，通過 ajax 請求 用戶列表 的完整接口為 http://localhost:8080/proxy/user辜膝，webpack-dev-server 通過代理方式將請求轉(zhuǎn)發(fā)到我們在 easy-mock 中定義的接口 https://www.easy-mock.com/mock/5b97a508b158375129f1b724/hello/proxy/user无牵，此時接口地址中多了個代理標志 /proxy, 通過配置參數(shù) pathRewrite: {'^/proxy': ' '} 將 /proxy 去掉即可。
