Vue + ElementUI 实现后台管理系统模板 -- 前端篇（五）：引入 js-cookie axios

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

// 设置 token

export function setToken(token) {

return Cookies.setItem(TokenKey, token)

}

// 移除 token

export function removeToken() {

return Cookies.removeItem(TokenKey)

}

二、引入axios

---

1、简介

想要发送 ajax 请求，vue 项目中一般使用 axios，使用起来虽然简单，但如果不进行统一封装，随着项目越来越大，冗余代码会急剧增加，所有需要对 axios 进行二次封装，使各个组件间能够复用 axios，简化代码。

2、封装要求

统一 url 配置（可以与代理结合起来使用解决跨域问题）。

定义请求拦截器（request），比如：设置消息头、设置 token 等。

定义响应拦截器（response），比如：统一错误处理、页面重定向 等。

3、安装并引入

1》安装

npm install axios -S

2》引入

新建request.js 引入，使用时引入 该 js 文件即可。

import Vue from ‘vue’

import {

getToken,

removeToken

} from ‘./auth.js’

import router from ‘@/router’

import {

Message

} from ‘element-ui’

import axios from ‘axios’

// 创建 axios 实例

const http = axios.create({

// 统一 url 配置，定义访问前缀 baseURL

baseURL: ‘/api’,

// 定义请求超时时间

timeout: 10000,

// 请求带上 cookie

withCredentials: true,

// 定义消息头

headers: {

‘Content-Type’: ‘application/json; charset=utf-8’

}

})

// 定义请求拦截器

http.interceptors.request.use(

config => {

// 让每个请求携带 token

config.headers[‘Admin-Token’] = getToken()

return config

},

error => {

Promise.reject(error)

}

)

// 定义响应拦截器

http.interceptors.response.use(

response => {

const res = response.data

// 当 token 失效时，清除 cookie 保存的 token 值，并跳转到登陆界面

if (res && res.code === 401) {

removeToken()

Message({

message: res.message,

type: ‘error’,

duration: 5000

})

router.push({

name: ‘Login’

})

}

// 未找到页面时，跳转到 404 页面

if (res && res.code === 404) {

router.push({

name: ‘404’

})

}

return response

},

error => {

return Promise.reject(error)

}

)

export default http

3》全局挂载 axios

在 main.js 中引入 request.js 文件，并全局挂载。

import http from ‘@/utils/request.js’

// 全局挂载 （axios）,使用的时候直接使用 this.$request 即可。

Vue.prototype.$request = http

前端：

修改代理，用于跨域。

在 vue.config.js 文件中进行配置，当路径中出现 /api 时，会将其替换成 target 中的路径。

而 target 路径是从 配置文件中读取的，生产环境与开发环境的 VUE_APP_URL 不同。

注：

开发环境时：

VUE_APP_URL=http://localhost:4000

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

[外链图片转存中…(img-IS0PsKWo-1715797991449)]

[外链图片转存中…(img-PtiT57tg-1715797991449)]