[toc] ## 1. 對axios進行二次封裝 ### 1.1 安裝axios ``` npm install axios --save ``` ### 1.2 在src目錄下創建utils目錄 ### 1.3 在utils目錄下創建request.js文件 ### 1.4 在request.js文件內對axios進行二次封裝 #### 1.4.1 引入axios ``` //引入axios import axios from "axios" ``` #### 1.4.2 創建axios ``` //引入axios import axios from "axios" //創建axios實例對象 const request = axios.create({ /*可配置項有很對,可以去axios的官網去查看*/ //公共的接口地址 baseURL : "公共接口地址或者代理地址名稱", //請求的超時時間 timeout : 1000*5 //請求頭 //... }) ``` #### 1.4.3 創建請求與響應的攔截器 ``` //引入axios import axios from "axios" //創建axios實例對象 const request = axios.create({ /*可配置項有很對,可以去axios的官網去查看*/ //公共的接口地址 baseURL : "公共接口地址或者代理地址名稱", //請求的超時時間 timeout : 1000*5 //請求頭 //... }) //創建請求攔截器 request.interceptors.request.use(function (config) { // 在發送請求之前做些什么 return config; }, function (error) { // 對請求錯誤做些什么 return Promise.reject(error); }); //創建響應攔截器 request.interceptors.response.use(function (response) { // 對響應數據做點什么 return response; }, function (error) { // 對響應錯誤做點什么 return Promise.reject(error); }); ``` #### 1.4.4 導出axios的實例對象 ``` //引入axios import axios from "axios" //創建axios實例對象 const request = axios.create({ /*可配置項有很對,可以去axios的官網去查看*/ //公共的接口地址 baseURL : "公共接口地址或者代理地址名稱", //請求的超時時間 timeout : 1000*5 //請求頭 //... }) //創建請求攔截器 request.interceptors.request.use(function (config) { // 在發送請求之前做些什么 return config; }, function (error) { // 對請求錯誤做些什么 return Promise.reject(error); }); //創建響應攔截器 request.interceptors.response.use(function (response) { // 對響應數據做點什么 return response; }, function (error) { // 對響應錯誤做點什么 return Promise.reject(error); }); //導出axios的實例對象 export default request ``` ## 2. 對api接口進行封裝 ### 2.1 在src目錄下創建api文件夾 ### 2.2 在api文件夾內創建對應模塊的js文件 ### 2.3 以夢學谷后臺管理系統為例 #### 2.3.1 分析夢學谷后臺管理系統模塊,一共是6個 #### 2.3.2 分別創建這6個模塊對應的js文件 ``` user.js --- 登錄 獲取用戶信息 登出 //引入request.js import request from "../utils/request.js" //登錄接口 function userLogin(username,password){ return request({ url : "/api/login", method : "post", data : { username, password } }) } //獲取用戶信息接口 function userInfo(){ return request({ url : "/api/userinfo", method : "get", headers : { token : "aasdadsadaysdasgfasgsfsa" } }) } 退出登錄接口 // function logout(){ return request({ url : "/api/logout", method : "posat", headers : { token : "aasdadsadaysdasgfasgsfsa" } }) } //導出封裝的接口 -- 2中 export export default export default { userlogin, userinfo, logout } ``` ``` index.js --- echarts圖標的接口 其他的信息接口 member.js --- 獲取會員列表 查詢指定會員 新增會員 刪除會員 編輯會員 查詢會員 supplier.js ---- 獲取供應商管理 查詢指定供應商 新增供應商 刪除供應商 ``` ## 2.4 在組件里面如果調用封裝的接口 ``` import user from “../api/user.js“ user.userinfo().then(response=>{ }) //如果是通過export 進行導出 導出的時候,就需要這種方式 import {userInfo} from "../api/user.js" userinfo().then(response=>{ } ) ``` ## 3. 解決跨域問題 vue.config.js ``` proxy : { // /api表示的代理的名稱,請求數據的時候,請求的應該是代理名稱,也就是這個/api "/dev" : { target : “要跨域的接口地址“, changeOrigin : true, //開啟代理 pathRewrite : { "^/dev" : "" } } } ``` ## 4. 封裝本地存儲方法 ## 5. 封裝操作用戶信息和用戶登錄狀態方法 ## 6. vuex的使用 ### 1.安裝axios ``` npm install axios --save ``` ### 2. 封裝axios請求配置 ### 3. 封裝api接口 ### 4. 解決跨域