【ElementUI】一.axios拦截器；二.ElementUI

目录

一.axios拦截器

1.axios模块的作用：是对基于http请求的封装。在浏览器端对异步请求对象XMLHttpRequest进行封装

2.拦截器：

（1）请求拦截器：对客户端发起的请求进行统一的前期处理（token、时间戳、cookie等）

（2）响应拦截器：对服务器端响应给客户端的数据统一进行处理之后再发给客户端

3.使用方法

二.ElementUI

1.简介：是‘饿了么’公司推出的基于Vue2.0的组件库

2.使用方法：

（1）安装：npm install element-ui

（2）在main.js文件中进行全局配置

3.UI组件的使用：所有的DOM元素都带有前缀el-

（1）按钮

（2）布局组件：Layout（采用栅格布局方式，把一行分成24栏），用el-row表示行，

（3）布局容器：Container（搭建页面的基本结构）

（4）Table 表格：< el-table >

---

一.axios拦截器

1.axios模块的作用：是对基于http请求的封装。在浏览器端对异步请求对象XMLHttpRequest进行封装

2.拦截器：

（1）请求拦截器：对客户端发起的请求进行统一的前期处理（token、时间戳、cookie等）

（2）响应拦截器：对服务器端响应给客户端的数据统一进行处理之后再发给客户端

3.使用方法

import axios from "axios";
//1. 创建axios的实例，配置基础路径
const axiosInstance = axios.create({
    baseURL: 'http://localhost:8089',
    timeout: 5000
})
//2. 定义请求拦截器:给所有请求都带上token
axiosInstance.interceptors.request.use((req)=>{
    let token = sessionStorage.getItem('Auth') //获取页面存储中的token信息
    if(token){ //若token存在
        req.headers['Auth'] = token
    }
    return req;
},(err)=>{
    return Promise.reject(err)
})
//3.响应拦截器：对服务器响应给客户端的数据进行统一的处理
axiosInstance.interceptors.response.use((res)=>{
    //1.对响应数据进行处理
    let result = res.data
    let code = result.code
    if (code == 200){
        return result
    }else{
        return Promise.reject(result)
    }
},(err)=>{
    return Promise.reject(err)
})
export default axiosInstance

二.ElementUI

1.简介：是‘饿了么’公司推出的基于Vue2.0的组件库