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

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

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

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

2》引入

新建一个 auth.js 并引入，使用时引入 该 js 文件即可。

// 引入 token，此处直接引入，也可以在 main.js 中全局引入

import Cookies from ‘js-cookies’

// 设置 token 存储的 key

const TokenKey = ‘Admin-Token’

// 获取 token

export function getToken() {

return Cookies.getItem(TokenKey)

}

// 设置 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 文件，并全局挂载。

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

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