Vue的各种封装

一、aixos封装

utils/request.js

// 1.ajax工具函数层
import Axios from "axios";
// 引入messsage
import { Message } from "element-ui";
// 2.服务器地址
const request = Axios.create({
    baseURL:'http://localhost:3000/api'
})
// 3.超时时间、
Axios.defaults.timeout = 30000

// 4.请求拦截器
request.interceptors.request.use((config)=>{
    const token = localStorage.getItem('token')
    // 如果token存在就携带token到服务器
    if(token){
        config.headers.Authorization = token
    }
    return config
},(err)=>{
    return Promise.reject(err)
})

// 5.响应拦截器
request.interceptors.response.use(response=>{
    if(response.data.code == 200){
        Message.success(response.data.msg)
      }else if(response.data.code == 201){
        Message.error(response.data.msg)
      }
    // 在App.vue中发送token获取用户信息并验证token是否过期，如果token没有过期什么都不用做
    if(response.data.code == 1000){
        
    }else if(response.data.code == 1001){
    // 如果token过期提示token过期
        Message.error(response.data.msg)
    }
    return response
},(err)=>{
    return Promise.reject(err)
})

export default  request

二、api接口统一管理封装

api/user.js

// 引入封装好的request
import request  from "@/utils/request";

// 注册请求
export const register = (data)=>{
    return request({
        url:'/users/register',
        method:'POST',
        data:data
    })
}
// 登录请求
export const login = (data)=>{
    return request({
        url:'/users/login',
        method:'POST',
        data:data
    })
}
// 获取用户信息
export const getUserInfo = ()=>{
    return request({
        url:'/users/getinfo',
        method:'GET',
    })
}

// 退出登录
export const logout = ()=>{
    return request({
        url:'/users/logout',
        method:'GET',
    })
}

// 修改用户名
export const resetusername = (data)=>{
    return request({
        url:'/users/resetusername',
        method:'POST',
        data
    })
}

// 修改密码
export const resetPwd = (data)=>{
    return request({
        url:'/users/resetpwd',
        method:'POST',
        data
    })
}

// 删除上传头像
export const delUploadImg = (data)=>{
    return request({
        url:'/upload/delupload',
        method:'POST',
        data
    })
}

// 确认上传头像
export const resetAvatar = (data)=>{
    return request({
        url:'/users/resetavatar',
        method:'POST',
        data
    })
}

三、引入elementUI封装

elementUI/index.js

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);