axios的使用與數據的mock

 

❤記在前面

           人，不通過長夜的痛哭，是不能瞭解人生的，咱們將這些苦痛看成一種功課和學習，

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

                                                                                                                             ——三毛

1、axios官方文檔基本閱讀

咱們先從官方實例上上看看axios的用法：https://github.com/axios/axios

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

 

2、新建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"
      }
    ]
  }
}

 3、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
        })
      })
    }

 

 

4、使用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的數據就獲取到了，下一步就是把值傳給組件，而後將數據渲染到頁面上

 

 

 以上，完成~~~~