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缃戝叾瀹幂浉鍏虫枃绔狅紒
鎺ㄨ崘阒呰伙细