axios的使用與資料的mock

標籤：desc   .com   info   img   set   png   ESS   class   哈哈哈   

 

?記在前面

           人，不經過長夜的痛哭，是不能瞭解人生的，我們將這些苦痛當作一種功課和學習，

           直到有一日真正的感覺成長了時，甚至會感謝這種苦痛給我們的教導                      

                                                                                                                             ——三毛

一、axios官方文檔基本閱讀

我們先從官方執行個體上上看看axios的用法：https://github.com/axios/axios

上面的這個記個大概就好，下面一起來實踐一下

 

二、建立mock.json

1.首先建立一個mock檔案，裡面放上首頁所需要的資料：輪播圖、活動、推薦

 

 

 

 

②mock.json

{  "code": 200,  "msg": "",  "data": {    "swiper": [      "../static/carousel1.png",      "../static/carousel2.png",      "../static/carousel3.png"    ],    "activity": [      {        "img": "../static/carousel1.png",        "name": "品牌:Minoz Store",        "desc": "溫柔了歲月，驚豔了時光"      },      {        "img": "../static/carousel2.png",        "name": "品牌:Minoz Store",        "desc": "你是人間四月天"      },      {        "img": "../static/carousel1.png",        "name": "品牌:Minoz Store",        "desc": "你好，歡迎光臨Minoz Store"      }    ],    "recommend": [      {        "img": "@/assets/logo1.png",        "name": "品牌:Minoz Store",        "desc": "Hello World"      },      {        "img": "@/assets/logo2.png",        "name": "品牌:Minoz Store",        "desc": "你好啊，哈哈哈"      },      {        "img": "../static/carousel1.png",        "name": "品牌:Minoz Store",        "desc": "Welcome to my store"      }    ]  }}

 三、axious的安裝和資料mock的一些配置

1.先來安裝axios和express，為什麼要用到express？因為我們資料的mock中需要用到express架構實現，後面再詳細講解express

①安裝axios和express

 

同樣在package.json中可以看到:

 

②在build->webpack.dev.conf.js的頭部引入

// mock資料const express = require(‘express‘)const app = express()var appData = require(‘./../mock/mock.json‘)var router = express.Router()// 通過路由請求本機資料app.use(‘/api‘, router)

 

 

③在build->webpack.dev.conf.js裡的devSever中添加before方法

// 添加before方法    before(app) {      app.get(‘/api/index‘, (req, res) => {        res.json({          errno: 0,          data: appData        })      })    }

 

 

四、使用axios擷取mock資料

1.我們進入home.vue頁面先引入axios

 

 

2.然後在methods中寫個函數：用axios擷取首頁資料並列印，然後當vue生命週期為mounted階段時調用它：

mounted() {      this.getIndexData();    },    methods: {      getIndexData() {        axios.get("/api/index").then(res => {          let data = res.data;          console.log(data);        });      }    }

 

 

3.最後進入瀏覽器中看看資料是不是列印出來了

 

 

【補充】兩個比較實用的：

1.IDE裡直接編譯運行，就不用每次cmd了

 ①

 ②

 ③

 

 2.這個項目之前先是開啟cmd運行，但是後來修改了build裡面的conf.js的配置，所以，在瀏覽器中看到的是404not found之類的錯誤，

此時的解決方案：關閉cmd，重新再運行一次！！！

如果在①的方法中：

OK，mock的資料就擷取到了，下一步就是把值傳給組件，然後將資料渲染到頁面上

 

 

 以上，完成~~~~

 

axios的使用與資料的mock