[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. 解决跨域