上一节我们学习了首页的导航栏和轮播图，这一节我们就要看是使用easy mock和axios来进行数据的交互模拟了
mock在我们工作中还是比较重要的，有时候后端无暇顾及前端，暂时不能提供接口，那么我们前端可以通过easy mock来进行数据的模拟啦
easy mock的使用方式我就直接把文档地址贴出来：https://www.easy-mock.com/docs 小伙伴儿们可以抽空去看看这个
Mock数据
{ "data": { "advertesPicture": { "PICTURE_ADDRESS": "http://images.baixingliangfan.cn/advertesPicture/20180404/20180404085441_850.gif" }, "floor3": [{ "goodsId": "ae4e71807a91460792670b657fa3ed3a", "image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407181423_15.jpg" }, { "goodsId": "2a398a5048074fc3b36bc8026bf9dc65", "image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407181216_8263.jpg" }, { "goodsId": "b37577ce45ee4cc6ba162959933dbac8", "image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407181247_7554.jpg" }, { "goodsId": "43912e1f7b7842cab40fcdee9dbe8758", "image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407181316_6196.jpg" }, { "goodsId": "98922617593e44c9a5880329a4cf0fd0", "image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407181348_4054.jpg" }], "floor2": [{ "goodsId": "d0fabe0c966043cb8313fa55de9c555b", "image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180547_3253.jpg" }, { "goodsId": "36360da2ec084316a100c2df1c714e37", "image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180631_4071.jpg" }, { "goodsId": "eb47b495b65d42b8a1fc5823dcd5589c", "image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180705_7181.jpg" }, { "goodsId": "7f6e857e83b240508836717c8764a0b0", "image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180736_2822.jpg" }, { "goodsId": "c7cb656294ea48d3b224ddee5fdd9647", "image": "http://images.baixingliangfan.cn/homeFloor/20180408/20180408081756_7181.jpg" }], "floorName": { "floor3": "营养奶品", "floor2": "新鲜水果", "floor1": "休闲食品" }, "floor1": [{ "goodsId": "e53c046465204d4fb8f22431cc2807e7", "image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180109_6316.jpg" }, { "goodsId": "f36f6dd8f62247d5846eaa9b3f269cbc", "image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180151_6180.jpg" }, { "goodsId": "72a3ec63956347a2a9f113589fe79c03", "image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180217_3970.jpg" }, { "goodsId": "a632bfb3818541da8e6843d6d0dbd917", "image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180257_2378.jpg" }, { "goodsId": "6694401a30a940f6ae437d541b7fd26d", "image": "http://images.baixingliangfan.cn/homeFloor/20180407/20180407180427_8557.jpg" }], "category": [{ "mallCategoryId": "1", "mallCategoryName": "新鲜水果", "bxMallSubDto": [{ "mallSubId": "2c9f6c946016ea9b016016f79c8e0000", "mallCategoryId": "1", "mallSubName": "热带水果", "comments": null }, { "mallSubId": "2c9f6c94608ff843016095163b8c0177", "mallCategoryId": "1", "mallSubName": "时令水果", "comments": null }, { "mallSubId": "402880e86016d1b5016016db9b290001", "mallCategoryId": "1", "mallSubName": "苹果/梨", "comments": null }, { "mallSubId": "402880e86016d1b5016016dbff2f0002", "mallCategoryId": "1", "mallSubName": "柑橘橙柚", "comments": null }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408111959_2837.png" }, { "mallCategoryId": "2", "mallCategoryName": "中外名酒", "bxMallSubDto": [{ "mallSubId": "2c9f6c9460337d540160337fefd60000", "mallCategoryId": "2", "mallSubName": "白酒", "comments": "" }, { "mallSubId": "402880e86016d1b5016016e083f10010", "mallCategoryId": "2", "mallSubName": "啤酒", "comments": "" }, { "mallSubId": "402880e86016d1b5016016df1f92000c", "mallCategoryId": "2", "mallSubName": "葡萄酒", "comments": "" }, { "mallSubId": "2c9f6c94621970a801626a40feac0178", "mallCategoryId": "2", "mallSubName": "洋酒", "comments": null }, { "mallSubId": "2c9f6c94621970a801626a412c240179", "mallCategoryId": "2", "mallSubName": "海外直采", "comments": null }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408112010_4489.png" }, { "mallCategoryId": "3", "mallCategoryName": "营养奶品", "bxMallSubDto": [{ "mallSubId": "402880e86016d1b5016016e135440011", "mallCategoryId": "3", "mallSubName": "鲜奶", "comments": "" }, { "mallSubId": "402880e86016d1b5016016e171cc0012", "mallCategoryId": "3", "mallSubName": "酸奶", "comments": "" }, { "mallSubId": "402880e86016d1b5016016e240e60013", "mallCategoryId": "3", "mallSubName": "乳酸菌", "comments": "" }, { "mallSubId": "2c9f6c9460a03c0c0160a041ab1d0000", "mallCategoryId": "3", "mallSubName": "奶油奶酪", "comments": null }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408113102_1595.png" }, { "mallCategoryId": "5", "mallCategoryName": "食品饮料", "bxMallSubDto": [{ "mallSubId": "2c9f6c94609a62be0160a02d1dc20021", "mallCategoryId": "5", "mallSubName": "饼干糕点", "comments": "" }, { "mallSubId": "402880e86016d1b5016016e4dca2001e", "mallCategoryId": "5", "mallSubName": "休闲小食", "comments": "" }, { "mallSubId": "402880e86016d1b5016016e51380001f", "mallCategoryId": "5", "mallSubName": "糖果巧克力", "comments": "" }, { "mallSubId": "2c9f6c94609a62be0160a02de70e0022", "mallCategoryId": "5", "mallSubName": "冲调饮品", "comments": "" }, { "mallSubId": "2c9f6c94626a435f01626a4a7f590000", "mallCategoryId": "5", "mallSubName": "进口食品", "comments": "" }, { "mallSubId": "402880e86016d1b5016016e4ac16001d", "mallCategoryId": "5", "mallSubName": "坚果炒货", "comments": null }, { "mallSubId": "402880e86016d1b5016016e549710020", "mallCategoryId": "5", "mallSubName": "饮用水", "comments": "" }, { "mallSubId": "402880e86016d1b5016016e656c50022", "mallCategoryId": "5", "mallSubName": "果蔬汁", "comments": null }, { "mallSubId": "2c9f6c946016f86f01601709335d0000", "mallCategoryId": "5", "mallSubName": "乳制饮料", "comments": null }, { "mallSubId": "2c9f6c946077476a0160781eb392000d", "mallCategoryId": "5", "mallSubName": "咖啡茶饮", "comments": null }, { "mallSubId": "402880e86016d1b5016016e62bbd0021", "mallCategoryId": "5", "mallSubName": "碳酸饮料", "comments": null }, { "mallSubId": "2c9f6c946077476a0160781f6d8c000e", "mallCategoryId": "5", "mallSubName": "功能饮料", "comments": null }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408113048_1276.png" }, { "mallCategoryId": "4", "mallCategoryName": "个人护理", "bxMallSubDto": [{ "mallSubId": "2c9f6c94621970a801626a35cb4d0175", "mallCategoryId": "4", "mallSubName": "进口护理", "comments": null }, { "mallSubId": "2c9f6c94621970a801626a363e5a0176", "mallCategoryId": "4", "mallSubName": "口腔护理", "comments": null }, { "mallSubId": "2c9f6c94621970a801626a3770620177", "mallCategoryId": "4", "mallSubName": "特殊用纸", "comments": null }], "comments": null, "image": "http://images.baixingliangfan.cn/firstCategoryPicture/20180408/20180408112053_8191.png" }], "slides": [{ "image": "http://images.baixingliangfan.cn/advertesPicture/20180407/20180407175040_1780.jpg", "goodsId": "b1195296679f482aa7d54d95ac2b4a94" }, { "image": "http://images.baixingliangfan.cn/advertesPicture/20180407/20180407175111_9509.jpg", "goodsId": "da34d6f381464a219b37a9ac0ad579e8" }, { "image": "http://images.baixingliangfan.cn/advertesPicture/20180407/20180407175142_6947.jpg", "goodsId": "ad176e397858448a854dc50371334faf" }], "buyTime": "08:00:00-20:30:00", "hotGoods": [{ "mallPrice": 3.90, "image": "http://images.baixingliangfan.cn/compressedPic/20180415120500_6504.jpg", "goodsId": "fb0f913950944b66a97ae262ad14609a", "price": 3.90, "name": "美汁源果粒奶优水果饮料蜜桃450ml/瓶" }, { "mallPrice": 4.50, "image": "http://images.baixingliangfan.cn/compressedPic/20180415115202_8432.jpg", "goodsId": "775e575ce28a4f89b1dfe2c99eb08ae7", "price": 4.50, "name": "阿华田麦芽乳饮品牛奶味250mL/盒" }, { "mallPrice": 3.70, "image": "http://images.baixingliangfan.cn/compressedPic/20180415121351_6470.jpg", "goodsId": "e68d5293c0a04e99a3480aaaad101362", "price": 3.70, "name": "养元香浓六个核桃240ml/瓶" }, { "mallPrice": 6.50, "image": "http://images.baixingliangfan.cn/compressedPic/20180415120956_8491.jpg", "goodsId": "7c377350cc9342edba600f3f6a548bd0", "price": 6.50, "name": "名屋木瓜牛乳340ml/瓶" }, { "mallPrice": 3.90, "image": "http://images.baixingliangfan.cn/compressedPic/20180415120411_5740.jpg", "goodsId": "f8c3f62810aa4ce781d14a885333a2b8", "price": 3.90, "name": "美汁源果粒奶优草莓味450ml/瓶" }, { "mallPrice": 7.50, "image": "http://images.baixingliangfan.cn/compressedPic/20180415120720_7233.jpg", "goodsId": "85d4fece907a4170b4b27a22c035321d", "price": 7.50, "name": "名屋醇豆浆饮料485ml/瓶" }, { "mallPrice": 5.00, "image": "http://images.baixingliangfan.cn/compressedPic/20180103161335_9324.jpg", "goodsId": "9abd33f0d2e4496f9c023a1dcfbfe2ad", "price": 6.30, "name": "李子园甜牛奶乳饮料450ml/瓶" }, { "mallPrice": 5.00, "image": "http://images.baixingliangfan.cn/compressedPic/20180415120239_7917.jpg", "goodsId": "1258c2fd52844f679fad1ebf24764082", "price": 5.00, "name": "李子园草莓风味乳饮料450ml/瓶" }, { "mallPrice": 6.30, "image": "http://images.baixingliangfan.cn/compressedPic/20171224082006_6602.jpg", "goodsId": "bd25fd5d128e41fd9a737e99f75f92f8", "price": 8.50, "name": "娃哈哈AD钙奶220ml*4/条" }, { "mallPrice": 6.00, "image": "http://images.baixingliangfan.cn/compressedPic/20180415121537_4372.jpg", "goodsId": "cfbe6ec3101a414f9563a8c6624aec08", "price": 6.00, "name": "一榨鲜绿豆汁300ml/瓶" }, { "mallPrice": 5.00, "image": "http://images.baixingliangfan.cn/compressedPic/20180415120109_275.jpg", "goodsId": "e9808eb0d3574c11971e38f75076f1a4", "price": 5.00, "name": "李子园朱古力风味乳饮料450ml/瓶" }, { "mallPrice": 7.50, "image": "http://images.baixingliangfan.cn/compressedPic/20180415120857_4885.jpg", "goodsId": "a5d1130de39f434facc6d35514cea053", "price": 7.50, "name": "名屋黑豆浆饮料485ml/瓶" }, { "mallPrice": 4.50, "image": "http://images.baixingliangfan.cn/compressedPic/20180415114959_7217.jpg", "goodsId": "06130c91497b4806bf2b3e538814bb66", "price": 4.50, "name": "阿华田麦芽乳饮品高钙味250mL/盒" }, { "mallPrice": 6.50, "image": "http://images.baixingliangfan.cn/compressedPic/20180415121108_2001.jpg", "goodsId": "b75e437adc0540c6b30516537d759122", "price": 6.50, "name": "名屋香蕉牛乳340ml/瓶" }, { "mallPrice": 3.90, "image": "http://images.baixingliangfan.cn/compressedPic/20180415120608_2319.jpg", "goodsId": "0d51d2863bdc485688c2fee2a165bb51", "price": 3.90, "name": "美汁源果粒奶优原味450ml/瓶" }, { "mallPrice": 7.40, "image": "http://images.baixingliangfan.cn/compressedPic/20171224082144_8430.jpg", "goodsId": "85173b3ce7a24a44ac2ed960a3e431fc", "price": 9.00, "name": "旺仔牛奶125ml*4/条" }, { "mallPrice": 68.00, "image": "http://images.baixingliangfan.cn/compressedPic/20180415122117_1031.jpg", "goodsId": "99e37959ae22433da7bb378a2d24c19c", "price": 68.00, "name": "同福阿胶粥300g/箱" }, { "mallPrice": 3.50, "image": "http://images.baixingliangfan.cn/compressedPic/20180415122256_2373.jpg", "goodsId": "068fe09cf2a849b4b8c7ce3fea734072", "price": 3.50, "name": "银鹭桂圆莲子八宝粥360g/瓶" }, { "mallPrice": 14.50, "image": "http://images.baixingliangfan.cn/compressedPic/20180415121432_880.jpg", "goodsId": "8172961149434b51865612820c7b8891", "price": 14.50, "name": "椰树牌椰汁饮料1L/瓶" }, { "mallPrice": 4.50, "image": "http://images.baixingliangfan.cn/compressedPic/20180415115515_7254.jpg", "goodsId": "a870459dfbba4df8af52e52aa6d0c426", "price": 4.50, "name": "豆本豆原味豆奶250ml/盒" }], "recommend": [{ "image": "http://images.baixingliangfan.cn/compressedPic/20180411083404_6619.jpg", "mallPrice": 16.80, "goodsId": "238bc2e023844769a6b67d9a4c04b2ea", "price": 16.80, "goodsName": "纳美小苏打源生护龈牙膏3010/支" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180411085355_2725.jpg", "mallPrice": 9.50, "goodsId": "245fc7d457e5454481db9620f0f9881f", "price": 9.50, "goodsName": "ABCK25超吸棉柔护垫22片/包" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180413093730_3138.jpg", "mallPrice": 6.00, "goodsId": "24afea564e5248b5a2bc59da95f09911", "price": 6.00, "goodsName": "果倍爽橙汁饮料330ml/瓶" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180409155457_3302.jpg", "mallPrice": 109.00, "goodsId": "418fc60784d04e71beffe1ce5174c947", "price": 109.00, "goodsName": "睿嫣白檀香护发素500ml/瓶" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180412173646_7050.jpg", "mallPrice": 4.00, "goodsId": "4ae4e2e2c1df45308be5011a97aae537", "price": 4.00, "goodsName": "乐百氏脉动芒果味600ml/瓶" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180413142444_1480.jpg", "mallPrice": 6.90, "goodsId": "4cf7744443f94557b7c6ad37dca9c4db", "price": 6.90, "goodsName": "农夫山泉NFC橙汁100%300ml/瓶" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180411084437_6209.jpg", "mallPrice": 8.60, "goodsId": "66074cd2d8464dcc9b2d7fbef5b417d9", "price": 8.60, "goodsName": "七度空间少女棉超薄超长夜用卫生巾8片/包" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180407172335_1082.jpg", "mallPrice": 15.00, "goodsId": "6694401a30a940f6ae437d541b7fd26d", "price": 15.00, "goodsName": "爱莲巧牛奶巧克力100g/块" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180407172544_4503.jpg", "mallPrice": 9.90, "goodsId": "a632bfb3818541da8e6843d6d0dbd917", "price": 9.90, "goodsName": "Gemez小鸡干脆面（烧烤鸡肉味）90g/袋" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180407173221_2015.jpg", "mallPrice": 8.00, "goodsId": "ad176e397858448a854dc50371334faf", "price": 8.00, "goodsName": "单身狗粮地中海盐味薯片 71g/袋" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180413091557_6636.jpg", "mallPrice": 6.50, "goodsId": "af117ed90b624318914fd4b42001216c", "price": 6.50, "goodsName": "可口可乐2L/瓶" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180413142955_5219.jpg", "mallPrice": 6.90, "goodsId": "bdd9bd7f131843c59c7f9aabdb36f069", "price": 6.90, "goodsName": "农夫山泉NFC苹果香蕉汁100%300ml/瓶" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180410091738_4529.jpg", "mallPrice": 138.00, "goodsId": "d6e15b84c1cd45138d9493c72333f7ce", "price": 138.00, "goodsName": "可米小子象牙松子罐装262g/罐" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180407171943_7260.jpg", "mallPrice": 29.80, "goodsId": "e53c046465204d4fb8f22431cc2807e7", "price": 29.80, "goodsName": "费罗伦珍珠水果糖（狮子座）240g/盒" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180412174207_1023.jpg", "mallPrice": 4.00, "goodsId": "e7ebc6153924459287468104768bee00", "price": 4.00, "goodsName": "农夫山泉水葡萄果味饮料530ml/瓶" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20180407171519_1489.jpg", "mallPrice": 9.90, "goodsId": "f36f6dd8f62247d5846eaa9b3f269cbc", "price": 11.50,
"goodsName": "捷客每日红提味曲奇120g/盒" }, { "image": "http://images.baixingliangfan.cn/compressedPic/20171225110825_6758.jpg", "mallPrice": 26.00, "goodsId": "fa750a815cfd46c3ba468db800f0e370", "price": 28.00, "goodsName": "青芒1.6kg/盒" }], "sendFee": { "chargeStartFee": "59.00", "deliveryFee": "3.00" } }, "page": null, "limit": null }
axios的引入
我们直接使用 npm install 进行安装
安装完成后我们需要在使用的页面进行引入
import axios from 'axios'
created(){
axios({
url:'https://www.easy-mock.com/mock/5bf943c85cac7622ae783d85' ,
method:'get'
})
.then(Resopne=>{
console.log(Respone)
})
.catch((err)=>{
console.log(err)
})
}
到这一步我们已经成功的获取到了数据，下一节我们就要使用数据进行布局和使用了