Vue項目開發經驗2

1.network網絡相關配置（封裝axios,設置攔截響應和攔截請求）

• 通常開發項目爲了簡化我們的運維，和維護代碼，我們通常將網絡請求封裝起來。
• 在network裏面封裝好request請求
• 並且配置攔截以及baseURL和請求超時的限制。

//1.引入axios
import axios from 'axios'


//通過promise 封裝

export function request(config){
    return new Promise((resolve, reject) => {
        //1.創建axios的實例
        const instance = axios.create({
            baseURL:'http://109.23.21.32:8000',
            timeout:5000
        })

        //2.axios的攔截器
        //2.1請求攔截的作用
        instance.interceptors.request.use(config => {
            // console.log(config);  //攔截下來的是這個請求的所有配置，發送成功但是被攔截了
            return config  //return 出去的話就可以拿到請求的數據了
        },
        err=>{
            // console.log(err);  //來到這裏的情況比較少
        })

        //2.2響應攔截的作用
        instance.interceptors.response.use(result => {
            return result.data
        },
        err => {
            console.log(err);
        })

        //3.發送真正的請求
        instance(config)
        .then(res => {
            resolve(res);
        })
        .catch(err => {
            reject(err);
        })
    })
}

• 之後當我們home頁要請求某些數據的時候，在network下創建home.js直接引入request.
• 以函數的形式return出去我們封裝好的Promise對象，在home頁中調用函數請求數據.then保存數據，處理數據。

import {request} from "./request";


export function getHomeMultidata() {
  return request({
    url: '/home/multidata'
  })
}

export function getHomeGoods(type, page) {
  return request({
    url: '/home/data',
    params: {
      type,
      page
    }
  })
}

2.數據的請求和存儲，以及處理問題

• 根據上面我們拿到數據之後，然後需要保存數據，以及將數據處理成爲我們想要的形式。
• 在data中新增數據段，準備收我們請求的數據

 data() {
    return {
      data: "",
      iid: null,
      res: null,
      topImages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      paramInfo: {},
      commentInfo: {},
      recommends: [],
      themeTopYs: [],
      currentIndex: 0,
      isFixed: false
    };
  },

3.view頁面組件的目錄結構和使用的解析

• 舉個例子，當我們項目裏面有5個分頁的時候，就需要在views裏面創建相應的文件夾，而且每一個文件夾對應有一個childComps裏面放置僅屬於自己的組件。
• 這樣方便我們維護和管理代碼。

4.store頁面的目錄結構和文件抽離的解析

• store頁面也要將actions，getters，mutations等抽離出來，方便代碼的統一管理和維護。

下一篇：Vue重點學習經驗1

• 對於MVVM的理解
• Vue的生命週期
• 父子組件傳值