1. 始vue化專案

https://www.cnblogs.com/xiaonq/p/11027880.html

vue init webpack deaxios # 使用腳手架建立專案 deaxios（專案名，隨便取得）
cd deaxios # 進入專案
npm install 
npm install [email protected] # 安裝axios
npm i element-ui -S # 安裝element-ui到當前專案

　　·前端專案結構規範

2.封裝axios

2.1 建立src/http資料夾

　　·用來放網路請求相關的檔案·

2.2src/http/index.js

　　·資料夾下, 建立index.js檔案, 對axios進行封裝

/* eslint-disable */
// 第一步：例項化axios物件，簡單封裝
const axios = require('axios'); // 生成一個axios例項
axios.defaults.baseURL = 'http://127.0.0.1:8000'; // 設定請求後端的URL地址
axios.defaults.timeout = 10000; // axios請求超時時間
axios.defaults.withCredentials = true;
/**
 * 設定請求傳遞資料的格式（看伺服器要求的格式）
 * x-www-form-urlencoded
 * 預設提交表單
 * 把資料物件序列化成 表單資料
*/

axios.defaults.headers['Content-Type'] = 'application/json'; // axios傳送資料時使用json格式
axios.defaults.transformRequest = data => JSON.stringify(data); // 傳送資料前進行json格式化

/**
 * 設定預設提交 json
 * 把資料物件序列化成 json 字串
*/

// 第二：設定攔截器
/**
* 請求攔截器(當前端傳送請求給後端前進行攔截)
* 例1：請求攔截器獲取token設定到axios請求頭中，所有請求介面都具有這個功能
* 例2：到使用者訪問某一個頁面，但是使用者沒有登入，前端頁面自動跳轉 /login/ 頁面
*/
axios.interceptors.request.use(config => {
    // 從localStorage中獲取token
    // let token = localStorage.getItem('token');
    // 如果有token, 就把token設定到請求頭中Authorization欄位中
    // token && (config.headers.Authorization = token);
    return config;
}, error => {
    return Promise.reject(error);
});

/**
* 響應攔截器（當後端返回資料的時候進行攔截）
* 例1：當後端返回狀態碼是401/403時，跳轉到 /login/ 頁面
*/
axios.interceptors.response.use(response => {
    // 當響應碼是 2xx 的情況, 進入這裡
    // debugger
    return response.data;
}, error => {
    // 當響應碼不是 2xx 的情況, 進入這裡
    // debugger
    return error
});


// 第三：根據上面分裝好的axios物件，封裝 get、post、put、delete請求
/**
* get方法，對應get請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的引數]
*/
export function get(url, params, headers) {
    return new Promise((resolve, reject) => {
        axios.get(url, { params, headers }).then(res => {
            resolve(res)
        }).catch(err => {
            reject(err)
        })
    })
}


/**
* post方法，對應post請求
* @param {String} url [請求的url地址]
* @param {Object} params [請求時攜帶的引數]
**/
export function post(url, params, headers) {
    return new Promise((resolve, reject) => {
        axios.post(url, params, headers).then((res) => {
            resolve(res)
        }).catch((err) => {
            // debugger
            reject(err)
        })
    })
}

export function put(url, params, headers) {
    return new Promise((resolve, reject) => {
        axios.put(url, params, headers).then((res) => {
            resolve(res)
        }).catch((err) => {
            // debugger
            reject(err)
        })
    })
}

export function del(url, params, headers) {
    return new Promise((resolve, reject) => {
        axios.delete(url, { data: params, headers }).then((res) => {
            resolve(res)
        }).catch((err) => {
            // debugger
            reject(err)
        })
    })
}

export default axios;  //一定要匯出函式 不然post等請求無法使用

2.3src/http/apis.js介面地址　

　　目錄下建立apis.js檔案, 用來寫 介面地址列表

/* eslint-disable */
import { get, post, put, del } from './index'

// 使用者登入
export const login = (params, headers) => post("/books/login/", params, headers)

// 圖書管理介面
export const getBookList = (params, headers) => get("/books/book/", params, headers)
export const addBook = (params, headers) => post("/books/book/", params, headers)
export const editBook = (params, headers) => put("/books/book/", params, headers)
export const delBook = (params, headers) => del("/books/book/", params, headers)