A. 濡備綍浣跨敤Fiddler2妯℃嫙POST鍜孏et鎻愪氦鏁版嵁
1.棣栧厛錛屽紑鍙戠殑鏈嬪弸濡備笉鐔熸倝榪欎釜錛屽厛鑷宸卞埌鐧懼害涓涓錛岃繖閲屾垜灝變笉浠嬬粛Fiddler2浜嗗摝銆
2.浜嗚В鍚庯紝鑷宸卞幓涓嬭澆涓錛岃矊浼糉iddler2涓嬭澆緗戝潃涓嶈兘鏀鵑濓紝鑷宸變篃鐧懼害鎼滅儲涓嬶紝寰堟柟渚誇笅杞界殑銆
3.璁板緱鑷宸變笅杞藉悗錛屽畨瑁呯數鑴戱紝鎮╋紝鐒跺悗涓鍒囧噯澶囧氨緇銆
濡備綍浣跨敤Fiddler2妯℃嫙POST鍜孏et鎻愪氦鏁版嵁
1.鎵撳紑鎴戜滑Fiddler2紼嬪簭錛屽紑濮嬪挴(榪欎釜鍒氬ソ鑻辨枃鐗堢殑錛屽彲浠ュ幓涓嬭澆奼夊寲鍖)
濡備綍浣跨敤Fiddler2妯℃嫙POST鍜孏et鎻愪氦鏁版嵁
榪欎釜瑕佹牴鎹鍥劇墖鏉ワ紝鍥句腑鏍囪伴渶瑕佸垎鍒浠嬬粛涓
鍥炬爣璁1: 榪欎釜鏄璇鋒眰鐘舵佸拰緇撴灉鐨勬樉紺哄尯鍩
鍥炬爣璁2: 璇鋒眰鐨勬柟娉曢夋嫨錛屽父鐢ㄧ殑灝辨槸POST璇鋒眰鍜孏ET璇鋒眰鏂瑰紡
鍥炬爣璁3: 璇鋒眰鐨勫湴鍧杈撳叆妗
鍥炬爣璁4: 鎴戜滑鎻愪氦鐨勬暟鎹杈撳叆妗
鍥炬爣璁5: 榪欎釜鏄鎴戜滑璇鋒眰鐨勬暟鎹澶磋緭鍏ユ
鍥炬爣璁6: 鐐瑰嚮榪欎釜Execute鎸夐挳錛屽氨鍙浠ユ彁浜ゆ垜浠鐨勬ā鎷熻鋒眰
濡備綍浣跨敤Fiddler2妯℃嫙POST鍜孏et鎻愪氦鏁版嵁
濡備綍浣跨敤Fiddler2妯℃嫙POST鍜孏et鎻愪氦鏁版嵁
棣栧厛浣跨敤Fiddler2妯℃嫙GET璇鋒眰
1.鍦ㄥ湴鍧杈撳叆妗嗛噷闈㈡ā鎷熺殑GET璇鋒眰鍦板潃(宸茶閬緗╀簡錛屼綘浠鎳傚緱)
2.閫夋嫨璇鋒眰鐨勬柟娉曪紝榪欓噷鎴戜滑閫夋嫨GET鏂規硶
3.鐐瑰嚮Execute鎸夐挳錛屽氨鍙浠ユ墽琛屾ā鎷熻鋒眰
4.鍦ㄦ樉紺哄尯鍩熷氨鍙浠ョ湅鍒版垜浠鍒氬垰鎻愪氦鐨勮鋒眰
5.鐩存帴鍙屽嚮鏄劇ず鍖哄煙閲岄潰鐨勮鋒眰璁板綍錛屽氨鍙浠ョ湅鍒版垜浠鐨凣ET鏂規硶鐨勬暟鎹
濡備綍浣跨敤Fiddler2妯℃嫙POST鍜孏et鎻愪氦鏁版嵁
濡備綍浣跨敤Fiddler2妯℃嫙POST鍜孏et鎻愪氦鏁版嵁
鐒跺悗浣跨敤Fiddler2妯℃嫙POST璇鋒眰
1.鍦ㄥ湴鍧杈撳叆妗嗛噷闈㈡ā鎷熺殑POST璇鋒眰鍦板潃(宸茶閬緗╀簡錛屼綘浠鎳傚緱)
2.閫夋嫨璇鋒眰鐨勬柟娉曪紝榪欓噷鎴戜滑閫夋嫨POST鏂規硶
3.鍦ㄦ彁浜ょ殑鏁版嵁杈撳叆妗嗛噷闈㈣緭鍏ユ垜浠鎻愪氦鐨凱OST鏁版嵁
3.鐐瑰嚮Execute鎸夐挳錛屽氨鍙浠ユ墽琛屾ā鎷熻鋒眰
4.鍦ㄦ樉紺哄尯鍩熷氨鍙浠ョ湅鍒版垜浠鍒氬垰鎻愪氦鐨勮鋒眰
5.鐩存帴鍙屽嚮鏄劇ず鍖哄煙閲岄潰鐨勮鋒眰璁板綍錛屽氨鍙浠ョ湅鍒版垜浠鐨凱OST鏂規硶鐨勬暟鎹
濡備綍浣跨敤Fiddler2妯℃嫙POST鍜孏et鎻愪氦鏁版嵁姝ラら槄璇
B. 濡備綍浣跨敤mockjs妯℃嫙鍚庣鏁版嵁
榪欐＄粰澶у跺甫鏉ュ備綍浣跨敤mockjs妯℃嫙鍚庣鏁版嵁錛屼嬌鐢╩ockjs妯℃嫙鍚庣鏁版嵁鐨勬敞鎰忎簨欏規湁鍝浜涳紝涓嬮潰灝辨槸瀹炴垬妗堜緥錛屼竴璧鋒潵鐪嬩竴涓嬨
浣跨敤mockjs鍙浠ヤ簨鍏堟ā鎷熸暟鎹錛屽墠鎻愭槸鍜屽悗絝綰﹀畾濂戒簡鏁版嵁鎺ュ彛錛屾庢牱鐨勬暟鎹銆備嬌鐢╩ock灝卞彲浠ョ敓鎴愪綘瑕佺殑鏁版嵁浜嗭紝浠庤屽疄鐜板紑鍙戞椂鍓嶅悗絝鍒嗙匯
鍏朵富瑕佸姛鑳芥槸錛
鍩轟簬鏁版嵁妯℃澘鐢熸垚妯℃嫙鏁版嵁銆
鍩轟簬HTML妯℃澘鐢熸垚妯℃嫙鏁版嵁銆
鎷︽埅騫舵ā鎷 ajax 璇鋒眰銆
璇娉曡勮寖
Mock.js 鐨勮娉曡勮寖鍖呮嫭涓ら儴鍒嗭細
1.鏁版嵁妯℃澘瀹氫箟瑙勮寖錛圖ata Template Definition錛孌TD錛
2.鏁版嵁鍗犱綅絎﹀畾涔夎勮寖錛圖ata Placeholder Definition錛孌PD錛
鏁版嵁妯℃澘瀹氫箟瑙勮寖 DTD
鏁版嵁妯℃澘涓鐨勬瘡涓灞炴х敱 3 閮ㄥ垎鏋勬垚錛氬睘鎬у悕銆佺敓鎴愯勫垯銆佸睘鎬у礆細
// 灞炴у悕 name
// 鐢熸垚瑙勫垯 rule
// 灞炴у value
'name|rule': value
娉ㄦ剰錛
灞炴у悕 鍜 鐢熸垚瑙勫垯涔嬮棿 鐢ㄧ珫綰 | 鍒嗛殧銆
鐢熸垚瑙勫垯 鏄鍙閫夌殑銆傜敓鎴愯勫垯 鏈 7 縐嶆牸寮忥細
'name|min-max': value
'name|count': value'name|min-max.dmin-dmax': value'name|min-max.dcount': value'name|count.dmin-dmax': value'name|count.dcount': value'name|+step': value
鐢熸垚瑙勫垯 鐨 鍚涔 闇瑕佷緷璧 灞炴у肩殑綾誨瀷 鎵嶈兘紜瀹氥
灞炴у 涓鍙浠ュ惈鏈 @鍗犱綅絎︺傚睘鎬у 榪樻寚瀹氫簡鏈緇堝肩殑鍒濆嬪煎拰綾誨瀷銆
渚1錛
Mock.mock({
'number1|1-100.1-10': 1,
'number2|123.1-10': 1,
'number3|123.3': 1,
'number4|123.10': 1.123
})
// =>
{
"number1": 12.92,
"number2": 123.51,
"number3": 123.777,
"number4": 123.1231091814
}
渚2錛氭牴鎹姝ｅ垯琛ㄨ揪寮 regexp 鍙嶅悜鐢熸垚鍙浠ュ尮閰嶅畠鐨勫瓧絎︿覆銆傜敤浜庣敓鎴愯嚜瀹氫箟鏍煎紡鐨勫瓧絎︿覆錛
Mock.mock({
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /wWsSdD/,
'regexp3': /d{5,10}/
})
// =>
{
"regexp1": "pJ7",
"regexp2": "F)fp1G",
"regexp3": "561659409"
}
渚3錛
//string琛ㄧず灞炴у悕
//3琛ㄧず鍚庨潰灞炴у奸噸澶嶆℃暟
Mock.mock({
"string|3": "鈽"
})
緇撴灉錛
//鏄熸槦鏁伴噺涓3
{
"string": "鈽呪槄鈽"
}
渚4錛
// num涓哄睘鎬у悕
// 鐢熸垚涓涓澶т簬絳変簬1錛屽皬浜庣瓑浜100 鐨勬暣鏁幫紝灞炴у100鍙鏄鐢ㄦ潵紜瀹氱被鍨
Mock.mock({
"num|1-100": 100
})
緇撴灉錛
{
"number": 8
}
鏁版嵁鍗犱綅絎﹀畾涔夎勮寖 DPD
鍗犱綅絎 鍙鏄鍦ㄥ睘鎬у煎瓧絎︿覆涓鍗犱釜浣嶇疆錛屽苟涓嶅嚭鐜板湪鏈緇堢殑灞炴у間腑銆
鍗犱綅絎 鐨勬牸寮忎負錛
@鍗犱綅絎
@鍗犱綅絎(鍙傛暟 [, 鍙傛暟])
娉ㄦ剰錛
鐢 @ 鏉ユ爣璇嗗叾鍚庣殑瀛楃︿覆鏄 鍗犱綅絎︺
鍗犱綅絎 寮曠敤鐨勬槸 Mock.Random 涓鐨勬柟娉曘侻ock.Random.extend() 鏉ユ墿灞曡嚜瀹氫箟鍗犱綅絎︺
鍗犱綅絎 涔熷彲浠ュ紩鐢 鏁版嵁妯℃澘 涓鐨勫睘鎬с傚崰浣嶇 浼氫紭鍏堝紩鐢 鏁版嵁妯℃澘 涓鐨勫睘鎬с傚崰浣嶇 鏀鎸 鐩稿硅礬寰 鍜 緇濆硅礬寰勩侻ock.mock({
name: {
first: '@FIRST',
middle: '@FIRST',
last: '@LAST',
full: '@first @middle @last'
}
})
// =>
{
"name": {
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full": "Charles Brenda Lopez"
}
}
閫氳繃jQuery ajax璇鋒眰鍋囨暟鎹渚嬪瓙
1.棣栧厛錛屽紩鍏mockjs錛屽紩鍏jquery錛堟ゅ勭敤jq灝佽呭ソ鐨刟jax鍙戦佽鋒眰錛
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>
2.浣跨敤mock鐢熸垚鏁版嵁妯℃澘
//榪欓噷鐨勭涓涓鍙傛暟http://api.cn 灝辨槸涓嬮潰ajax璇鋒眰鐨剈rl錛宮ock瀵硅url榪涜屾嫤鎴'
//榪欓噷鐨勭浜屼釜鍙傛暟灝辨槸template鏁版嵁妯℃澘錛宮ock浼氳繑鍥炴ā鏉跨敓鎴愮殑鏁版嵁
Mock.mock('http://api.cn', {
'name': '@name',
'age|1-100': 100,
'city': '@city'
});
3.ajax鍙戦佽鋒眰涓庣粨鏋
$.ajax({
url: 'http://api.cn',
dataType: 'json'
}).done(function(data, status, xhr) {
console.log( JSON.stringify(data)); //{"name":"Mark Lee","age":4,"city":"杈介槼甯"}
});
vuecli涓浣跨敤mockjs
棣栧厛瀹夎
npm install mockjs
鎴戝湪scripts涓鏂板緩浜嗕竴涓猰ockdata.js
閲岄潰鐨勫唴瀹瑰備笅錛
import Mock from 'mockjs';
const data = Mock.mock({
// 灞炴 list 鐨勫兼槸涓涓鏁扮粍錛屽叾涓鍚鏈 1 鍒 10 涓鍏冪礌
'foods|10-50': [{
'name': "@ctitle(2,10)",
"img": "@image('600x600',#b7ef7c)",
"brief": "@csentence(1,50)",
"price|0-20.0-2": 1,
"num": 0,
"minusFlag": true,
"time": "@time",
"peisongfei|0-100.0-2": 1,
"limit|0-50": 1
}],
"sales|10-50": [{
// 灞炴 id 鏄涓涓鑷澧炴暟錛岃搗濮嬪間負 1錛屾瘡嬈″ 1
'name': "@ctitle(2,10)",
"img": "@image('600x600',#b7ef7c)",
"brief": "@csentence(1,50)",
"price|0-100.0-2": 1,
"num": 0,
"minusFlag": true,
"time": "@time",
"peisongfei|0-100.0-2": 1,
"limit|0-100": 1
}]
});
export default {
data
}
鎺ヤ笅鏉ワ紝鍦ㄩ渶瑕佺敤鍒扮殑mock鏁版嵁鐨剉ue緇勪歡欏甸潰涓錛岃繖鏍峰啓
import mockdata from "@/scripts/mockdata.js";
寮曠敤鏁版嵁錛屽湪浣爉ethods閲岄潰 鐩存帴寮曠敤鍒氬垰鐨刴ockdata鍗沖彲銆備緥濡:
new Promise((resolve, reject) => {
that.foods =mockdata.data.foods; //鐩存帴鐐瑰嚭浣犵敓鎴愮殑鍋囨暟鎹瀵硅薄鍗沖彲
that.foodsListLen = that.foods.length;
}).catch(err=>{
console.log(err)
})鐩鎬俊鐪嬩簡鏈鏂囨堜緥浣犲凡緇忔帉鎻′簡鏂規硶錛屾洿澶氱簿褰╄峰叧娉℅xl緗戝叾瀹冪浉鍏蟲枃絝狅紒
鎺ㄨ崘闃呰伙細