easyMock和Axios的使用
Mock数据准备
{ "data": { "advertesPicture": { "PICTURE_ADDRESS": "http://images.baixingliangfan.cn/advertesPicture/20180105/20180105115136_8151.gif" }, "floor3": [{ "goodsId": "9f0fc88cbd5948a4a18d575f15710e62", "image": "http://baixing.kuaihejiu.com/homeFloor/20171202/20171202201017_3360.jpg" }, { "goodsId": "9f30e1eff327400d8ad961d0e91b0ecd", "image": "http://baixing.kuaihejiu.com/homeFloor/20171202/20171202201051_4461.jpg" }, { "goodsId": "b919351e5c2b4a3b9c6791d296934c32", "image": "http://baixing.kuaihejiu.com/homeFloor/20171202/20171202201121_5232.jpg" }, { "goodsId": "6a2a46ff7657441eaa6ccc6136988da3", "image": "http://baixing.kuaihejiu.com/homeFloor/20171202/20171202201141_3079.jpg" }, { "goodsId": "51a1bd1b303e4bd1a97207d87fc1679e", "image": "http://baixing.kuaihejiu.com/homeFloor/20171202/20171202201204_7239.jpg" }, { "goodsId": "f0bc788839ab4ef6ac2adbaa4d8b6074", "image": "http://images.baixingliangfan.cn/homeFloor/20171221/20171221152759_1487.jpg" }, { "goodsId": "f0bc788839ab4ef6ac2adbaa4d8b6074", "image": "http://images.baixingliangfan.cn/homeFloor/20171221/20171221152829_8375.jpg" }], "floor2": [{ "goodsId": "2e55ef4dfb39466f8d010e016d3c45a7", "image": "http://baixing.kuaihejiu.com/homeFloor/20171205/20171205140339_1726.jpg" }, { "goodsId": "59b475fa74584563b7c65a1345d59fbe", "image": "http://baixing.kuaihejiu.com/homeFloor/20171202/20171202200814_5891.jpg" }, { "goodsId": "0ab2a0cbb439407e8f90d558a070428d", "image": "http://baixing.kuaihejiu.com/homeFloor/20171202/20171202200839_2276.jpg" }, { "goodsId": "7c75078bfc7746b2a57a0fa4b0933d4a", "image": "http://baixing.kuaihejiu.com/homeFloor/20171205/20171205091256_5917.jpg" }, { "goodsId": "522a3511f4c545ab9547db074bb51579", "image": "http://baixing.kuaihejiu.com/homeFloor/20171202/20171202200939_2844.jpg" }], "floorName": { "floor3": "营养奶品", "floor2": "新鲜水果", "floor1": "休闲食品" }, "floor1": [{ "goodsId": "06cdf782f37c41b3b4b93e92999c483c", "image": "http://baixing.kuaihejiu.com/homeFloor/20171202/20171202200432_5479.jpg" }, { "goodsId": "2199b4bb56d247a1b044d5e7d902c942", "image": "http://baixing.kuaihejiu.com/homeFloor/20171202/20171202200511_6914.jpg" }, { "goodsId": "f0bc788839ab4ef6ac2adbaa4d8b6074", "image": "http://baixing.kuaihejiu.com/homeFloor/20171202/20171202200531_9444.jpg" }, { "goodsId": "24692e32d27241d095bbfc59106a4229", "image": "http://baixing.kuaihejiu.com/homeFloor/20171202/20171202200557_4182.jpg" }, { "goodsId": "27f616c8ec0346a6ae7a3667da2ac345", "image": "http://baixing.kuaihejiu.com/homeFloor/20171202/20171202200621_1689.jpg" }, { "goodsId": "f6e283eb6df44637ae3d0c83e8bd04cd", "image": "http://images.baixingliangfan.cn/homeFloor/20171221/20171221152153_7742.jpg" }, { "goodsId": "f0bc788839ab4ef6ac2adbaa4d8b6074", "image": "http://images.baixingliangfan.cn/homeFloor/20171221/20171221152350_4060.jpg" }], "category": [{ "mallCategoryId": "1", "mallCategoryName": "营养鲜果", "bxMallSubDto": [{ "mallSubId": "2c9f6c946016ea9b016016f79c8e0000", "mallCategoryId": "1", "mallSubName": "热带水果", "comments": null }, { "mallSubId": "402880e86016d1b5016016db9b290001", "mallCategoryId": "1", "mallSubName": "苹果/梨", "comments": null }, { "mallSubId": "402880e86016d1b5016016dbff2f0002", "mallCategoryId": "1", "mallSubName": "柑橘橙柚", "comments": null }, { "mallSubId": "402880e86016d1b5016016dc55bf0003", "mallCategoryId": "1", "mallSubName": "蓝莓草莓", "comments": null }, { "mallSubId": "402880e86016d1b5016016dcd7c50004", "mallCategoryId": "1", "mallSubName": "葡萄提子", "comments": null }, { "mallSubId": "402880e86016d1b5016016de3b100008", "mallCategoryId": "1", "mallSubName": "净菜", "comments": null }, { "mallSubId": "402880e86016d1b5016016dd052e0005", "mallCategoryId": "1", "mallSubName": "瓜类", "comments": null }, { "mallSubId": "402880e86016d1b5016016dd339c0006", "mallCategoryId": "1", "mallSubName": "鲜果切", "comments": null }, { "mallSubId": "402880e86016d1b5016016de0d400007", "mallCategoryId": "1", "mallSubName": "叶菜", "comments": null }, { "mallSubId": "402880e86016d1b5016016de85870009", "mallCategoryId": "1", "mallSubName": "根茎类", "comments": null }, { "mallSubId": "402880e86016d1b5016016dec183000a", "mallCategoryId": "1", "mallSubName": "菌菇类", "comments": null }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408111739_190.png" }, { "mallCategoryId": "2", "mallCategoryName": "蔬菜肉类", "bxMallSubDto": [{ "mallSubId": "402880e86016d1b5016016deffa0000b", "mallCategoryId": "2", "mallSubName": "猪肉", "comments": null }, { "mallSubId": "402880e86016d1b5016016df1f92000c", "mallCategoryId": "2", "mallSubName": "牛肉", "comments": null }, { "mallSubId": "402880e86016d1b5016016df3d1f000d", "mallCategoryId": "2", "mallSubName": "羊肉", "comments": null }, { "mallSubId": "402880e86016d1b5016016df7c0e000e", "mallCategoryId": "2", "mallSubName": "鸡鸭禽肉", "comments": null }, { "mallSubId": "402880e86016d1b5016016e0241d000f", "mallCategoryId": "2", "mallSubName": "鲜蛋蛋品", "comments": null }, { "mallSubId": "402880e86016d1b5016016e083f10010", "mallCategoryId": "2", "mallSubName": "火锅肉片", "comments": null }, { "mallSubId": "2c9f6c9460337d540160337fefd60000", "mallCategoryId": "2", "mallSubName": "水产", "comments": null }], "comments": null, "image": "http://baixing.kuaihejiu.com/firstCategoryPicture/20171208/20171208080112_650.jpg" }, { "mallCategoryId": "3", "mallCategoryName": "牛奶酸奶", "bxMallSubDto": [{ "mallSubId": "402880e86016d1b5016016e135440011", "mallCategoryId": "3", "mallSubName": "鲜奶", "comments": "" }, { "mallSubId": "402880e86016d1b5016016e171cc0012", "mallCategoryId": "3", "mallSubName": "酸奶", "comments": "" }, { "mallSubId": "402880e86016d1b5016016e240e60013", "mallCategoryId": "3", "mallSubName": "乳酸菌", "comments": "" }], "comments": null, "image": "http://baixing.kuaihejiu.com/firstCategoryPicture/20171208/20171208080240_5692.jpg" }, { "mallCategoryId": "4", "mallCategoryName": "粮油副食", "bxMallSubDto": [{ "mallSubId": "402880e86016d1b5016016e2dcc80016", "mallCategoryId": "4", "mallSubName": "调味料", "comments": null }, { "mallSubId": "402880e86016d1b5016016e38a3a0017", "mallCategoryId": "4", "mallSubName": "健康杂粮", "comments": null }, { "mallSubId": "402880e86016d1b5016016e3aa370018", "mallCategoryId": "4", "mallSubName": "干货", "comments": null }, { "mallSubId": "402880e86016d1b5016016e3d09d0019", "mallCategoryId": "4", "mallSubName": "方便速食", "comments": null }, { "mallSubId": "402880e86016d1b5016016e3f70c001a", "mallCategoryId": "4", "mallSubName": "罐头酱菜", "comments": null }, { "mallSubId": "402880e86016d1b5016016e42c22001b", "mallCategoryId": "4", "mallSubName": "米面粉", "comments": null }, { "mallSubId": "402880e86016d1b5016016e458ca001c", "mallCategoryId": "4", "mallSubName": "烹饪油", "comments": null }], "comments": null, "image": "http://baixing.kuaihejiu.com/firstCategoryPicture/20171208/20171208080213_2011.jpg" }, { "mallCategoryId": "5", "mallCategoryName": "零食饮料", "bxMallSubDto": [{ "mallSubId": "402880e86016d1b5016016e4ac16001d", "mallCategoryId": "5", "mallSubName": "坚果炒货", "comments": null }, { "mallSubId": "402880e86016d1b5016016e4dca2001e", "mallCategoryId": "5", "mallSubName": "风味小食", "comments": null }, { "mallSubId": "402880e86016d1b5016016e51380001f", "mallCategoryId": "5", "mallSubName": "膨化食品", "comments": null }, { "mallSubId": "402880e86016d1b5016016e549710020", "mallCategoryId": "5", "mallSubName": "饮用水", "comments": "" }, { "mallSubId": "402880e86016d1b5016016e62bbd0021", "mallCategoryId": "5", "mallSubName": "碳酸饮料", "comments": null }, { "mallSubId": "402880e86016d1b5016016e656c50022", "mallCategoryId": "5", "mallSubName": "果蔬汁", "comments": null }, { "mallSubId": "2c9f6c946016f86f01601709335d0000", "mallCategoryId": "5", "mallSubName": "乳制饮料", "comments": null }, { "mallSubId": "402880e86016d1b5016016e67b790023", "mallCategoryId": "5", "mallSubName": "啤酒", "comments": null }, { "mallSubId": "402880e86016d1b5016016e713540024", "mallCategoryId": "5", "mallSubName": "白/黄/果酒", "comments": null }, { "mallSubId": "2c9195006076dbc50160781e03bf0013", "mallCategoryId": "5", "mallSubName": "咖啡茶饮", "comments": null }], "comments": null, "image": "http://baixing.kuaihejiu.com/firstCategoryPicture/20171208/20171208080154_5805.jpg" }], "slides": [{ "image": "http://baixing.kuaihejiu.com/advertesPicture/20171202/20171202195901_1791.jpg", "goodsId": "2199b4bb56d247a1b044d5e7d902c942" }, { "image": "http://baixing.kuaihejiu.com/advertesPicture/20171202/20171202195939_1124.jpg", "goodsId": "91a849140de24546b0de9e23d85399a3" }, { "image": "http://baixing.kuaihejiu.com/advertesPicture/20171202/20171202200018_8768.jpg", "goodsId": "c68a7668cceb4168ab48ae0aa312a67d" }], "buyTime": "08:00:00-20:30:00", "hotGoods": [{ "mallPrice": 12, "image": "http://baixing.kuaihejiu.com/compressedPic/20171205181048_5346.jpg", "goodsId": "22fece1309b547069fedb8bfd4a9a855", "price": 15, "name": "越南火龙果（大）1*2(约1000g)" }, { "mallPrice": 24, "image": "http://baixing.kuaihejiu.com/compressedPic/20171205184329_5939.jpg", "goodsId": "c68a7668cceb4168ab48ae0aa312a67d", "price": 28, "name": "越南红心火龙果1*2（约1200g）" }, { "mallPrice": 69, "image": "http://baixing.kuaihejiu.com/compressedPic/20171202191555_2504.jpg", "goodsId": "27f616c8ec0346a6ae7a3667da2ac345", "price": 75, "name": "多宝鱼 1.5斤左右" }, { "mallPrice": 599, "image": "http://baixing.kuaihejiu.com/compressedPic/20171202193122_6064.jpg", "goodsId": "f0bc788839ab4ef6ac2adbaa4d8b6074", "price": 650, "name": "阿拉斯加帝王蟹 3斤左右" }, { "mallPrice": 69, "image": "http://baixing.kuaihejiu.com/compressedPic/20171203114951_1503.jpg", "goodsId": "06cdf782f37c41b3b4b93e92999c483c", "price": 80, "name": "面包蟹 400g" }, { "mallPrice": 30, "image": "http://baixing.kuaihejiu.com/compressedPic/20171203104023_7397.jpg", "goodsId": "f6e283eb6df44637ae3d0c83e8bd04cd", "price": 38, "name": "虾夷扇贝 10个/份" }, { "mallPrice": 199, "image": "http://baixing.kuaihejiu.com/compressedPic/20171202192043_3528.jpg", "goodsId": "2199b4bb56d247a1b044d5e7d902c942", "price": 258, "name": "波士顿活龙虾 1.5斤左右" }, { "mallPrice": 59.8, "image": "http://baixing.kuaihejiu.com/compressedPic/20171203114752_9000.jpg", "goodsId": "24692e32d27241d095bbfc59106a4229", "price": 60, "name": "蓝雪阿根廷红虾500g" }, { "mallPrice": 5.9, "image": "http://baixing.kuaihejiu.com/compressedPic/20171202195326_3617.jpg", "goodsId": "51a1bd1b303e4bd1a97207d87fc1679e", "price": 11.96, "name": "河北皇冠梨 1*4(约1000g)" }, { "mallPrice": 7.9, "image": "http://baixing.kuaihejiu.com/compressedPic/20171202195522_6328.jpg", "goodsId": "9f0fc88cbd5948a4a18d575f15710e62", "price": 9, "name": "会理石榴 1*2(约750g)" }, { "mallPrice": 12.5, "image": "http://baixing.kuaihejiu.com/compressedPic/20171202195038_3052.jpg", "goodsId": "b919351e5c2b4a3b9c6791d296934c32", "price": 15, "name": "福建红肉蜜柚 1*2(约1900g)" }, { "mallPrice": 0.1, "image": "http://baixing.kuaihejiu.com/compressedPic/20171202194910_6992.jpg", "goodsId": "9f30e1eff327400d8ad961d0e91b0ecd", "price": 14, "name": "四川不知火丑桔 1*4(约1000g)" }, { "mallPrice": 10, "image": "http://baixing.kuaihejiu.com/compressedPic/20171202195211_6237.jpg", "goodsId": "6a2a46ff7657441eaa6ccc6136988da3", "price": 12, "name": "海南木瓜 1*1(约1000g)" }, { "mallPrice": 7.9, "image": "http://baixing.kuaihejiu.com/compressedPic/20171203143559_7124.jpg", "goodsId": "bedfd4bc4d5d46cea41f10355a702a58", "price": 9, "name": "君乐宝纯享原味发酵乳330g" }, { "mallPrice": 10, "image": "http://images.baixingliangfan.cn/compressedPic/20171214162416_6642.jpg", "goodsId": "cb3695e66bdc4ac48c5d1d0f28af18dc", "price": 46, "name": "完达山炭烧酸奶180g*16袋/箱" }, { "mallPrice": 5.5, "image": "http://baixing.kuaihejiu.com/compressedPic/20171202194452_1506.jpg", "goodsId": "0ab2a0cbb439407e8f90d558a070428d", "price": 5.5, "name": "蒙牛纯甄经典原味酸牛奶200g" }, { "mallPrice": 22.9, "image": "http://baixing.kuaihejiu.com/compressedPic/20171203104704_3666.jpg", "goodsId": "3df3bf7632f74433bf54a1acc5358b42", "price": 26, "name": "北大荒绿野有机红小豆390g" }, { "mallPrice": 13.8, "image": "http://baixing.kuaihejiu.com/compressedPic/20171203140454_6054.jpg", "goodsId": "2ae28f2ec5f14e9e9f29dfbff0fb10d4", "price": 16, "name": "思念手打天下猪肉香菇水饺495g" }, { "mallPrice": 8.6, "image": "http://baixing.kuaihejiu.com/compressedPic/20171203135946_7143.jpg", "goodsId": "2a4763fa31cb457481737b9ede14f841", "price": 10.5, "name": "双汇大肉块俄式风味香肠30g*8" }, { "mallPrice": 53.8, "image": "http://baixing.kuaihejiu.com/compressedPic/20171203105342_4361.jpg", "goodsId": "2c8ad2805463498592910919e4d51260", "price": 58, "name": "金健东北贡米5kg" }], "recommend": [{ "image": "http://baixing.kuaihejiu.com/compressedPic/20171203143309_8388.jpg", "mallPrice": 0.1, "goodsId": "7c75078bfc7746b2a57a0fa4b0933d4a", "price": 3.5, "goodsName": "可口可乐樱桃味汽水330ml" }, { "image": "http://baixing.kuaihejiu.com/compressedPic/20171202195522_6328.jpg", "mallPrice": 7.9, "goodsId": "9f0fc88cbd5948a4a18d575f15710e62", "price": 9, "goodsName": "会理石榴 1*2(约750g)" }, { "image": "http://baixing.kuaihejiu.com/compressedPic/20171205184329_5939.jpg", "mallPrice": 24, "goodsId": "c68a7668cceb4168ab48ae0aa312a67d", "price": 28, "goodsName": "越南红心火龙果1*2（约1200g）" }], "sendFee": { "chargeStartFee": "59.00", "deliveryFee": "0.00" } } }
axios的引入
直接使用 npm install 进行安装。
npm install --save axios
安装之后在要使用的页面组件中进行引入。
import axios from 'axios'
然后在created的声明周期里取得数据
created(){ axios({ url: 'https://www.easy-mock.com/mock/5b067911b316da6a07c77e63/smileVue/smileVue', method: 'get', }) .then(response => { console.log(response) }) .catch((error) => { }) }