2024年最全腾讯架构师带我写代码 —— vue真实企业实战分享，2024阿里手淘Web前端面试题目

前端资料汇总

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

我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。

首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。

更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。
找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
最后，祝愿大家在这并不友好的环境下都能找到自己心仪的归宿。

config => {

if (getTokenByLocal()) {

// 在此可以设置所有接口headers头部

config.headers[‘token’] = getTokenByLocal();

}else{

// window.location.href=“/login”;

}

return config

},

error => {

return Promise.reject(error)

}

)

// 响应拦截

service.interceptors.response.use(

response => {

let res = response.data;

// console.log(res);

// 状态码处理

if (res.code == ‘200’) {

// location.href = “home/login”;

}

// 如果为 -101 代表用户未登录

if(res.code == ‘-101’){

vue.$router.push(‘/login’);

}

return Promise.resolve(res);

},

error => {

return Promise.reject(error)

}

)

export default service;

3.2 common.js 配置

• 此文件只做一件事情：统一处理项目中所有接口的传参处理

• 一般来说，不会有太多花里胡哨的传参

// 将service.js引入进来

import service from ‘./service.js’

// post请求 80% 耦合度低 复用性高

export function requestOfPost(url, data){

return service.post(url, data);

}

3.3 api.js 配置

• 此文件为二次封装，加入处理异步的 promise

import {requestOfPost} from ‘./common.js’

export function postRequest(url, data){

return new Promise((resolve, reject) => {

requestOfPost(url, data).then(res => resolve(res))

.catch(error => reject(error))

})

}

3.4 url.j配置

• 此文件统一管理所有接口路径，不然项目里东一个西一个维护起来麻烦（架构师说的，咱也不敢反驳，仔细寻思了一下，这也是对的）

• 如果项目里的接口超过了一百个，可以拆分成两个

• 切记，加注释啊亲

const url = {

// 登录

login: ‘/login’,

// 学生列表

getClassmates: ‘/getClassmates’

}

export default url;

4. 跨域处理

---

• 一般来说，本地开发都需要配置接口跨域，后台一般懒得处理（卑微前端的无力）

• 项目最外层添加文件: vue.config.js（这个文件只能这么命名，别的名字cli 服务不会识别）

• 配置如下

module.exports = {

devServer: {

compress: false,

open: true,

proxy: {

‘/sys’: {

// 代理地址

target: ‘http://api.gebilaowang.com’,

// websocket (一般用于即时通讯，游戏，这里不需要，所以不开)

ws: false,

// 是否允许跨域

changeOrigin: true,

// 重写

pathRewite: {

‘/sys’: ‘/’

}

}

}

}

}

5. 可以愉快的调接口了

---

login.vue 代码添加

6. main.js中 你需要的配置

---

• 引入element ui中的元素并注册

• 一些全局的动画配置

import Vue from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

import {

Button,

Container,

Header,

Aside,

Main,

Footer,

Input,

Loading,

Message,

Menu,

Submenu,

MenuItem,

MenuItemGroup,

Dropdown,

DropdownMenu,

Table,

TableColumn,

DropdownItem,

Form,

FormItem,

Select,

Option,

OptionGroup,

DatePicker,

Pagination,

MessageBox,

Popover,

Tag,

Switch,

Dialog

} from ‘element-ui’;

Vue.use(global)

Vue.use(Button)

Vue.use(Container)

Vue.use(Header)

Vue.use(Aside)

Vue.use(Main)

Vue.use(Footer)

Vue.use(Input)

Vue.use(Menu)

Vue.use(Submenu)

Vue.use(MenuItem)

Vue.use(MenuItemGroup)

Vue.use(Dropdown)

Vue.use(Table)

Vue.use(TableColumn)

Vue.use(DropdownMenu)

Vue.use(DropdownItem)

Vue.use(Form)

Vue.use(FormItem)

Vue.use(Select)

Vue.use(Option)

Vue.use(OptionGroup)

Vue.use(DatePicker)

Vue.use(Pagination)

Vue.use(Popover)

Vue.use(Dialog);

Vue.use(Tag)

Vue.use(Switch)

Vue.use(Loading.directive);

// 添加全局方法

Vue.prototype.$loading = Loading.service;

Vue.prototype.$message = Message;

Vue.prototype.$confirm = MessageBox.confirm;

Vue.prototype.$msgbox = MessageBox;

Vue.config.productionTip = false;

let vue = new Vue({

router,

render: h => h(App)

}).$mount(‘#app’)

export default vue;

7. 配置路由拦截

---

• 如果内容不多，可以放在main.js中

• 记得要引入 router

router.beforeEach((to, from, next) => {

// 以token为例

let token = sessionStorage.getItem(‘token’);

// 需要验证之后才能进入 requireAuth

if (to.meta.requireAuth) {

if (token) {

next();

// 顺利进入

} else {

// 跳入到指定页面

next({

path: ‘/login’

})

}

} else {

// 顺利进入

next();

}

})

8. 全局方法配置

---

• 存放目录，如下（架构师说的，我又思考了一下，放这里是有道理的）

• 给大家一个全局方法做参考，后续的按照这个来就是（依旧很贴心）

import vue from ‘…/…/main.js’

// 遮罩层控制

export function loadingShow(close){

const loadingFade = vue.$loading({

lock: true,

text: ‘Loading’,

spinner: ‘el-icon-loading’,

background: ‘rgba(0, 0, 0, 0.7)’

})

if(close){

loadingFade.close();

}

}

9. 父页面配置（home.vue）

---

• 我感觉大家可能会需要，所以代码还是贴出来（有一种需要是作者感觉你会需要）

首页

<el-menu-item index=“1-1” @click=“toRoute(‘/home/studentData’, ‘学生数据’)”

学生数据</el-menu-item

<template slot=“title”

教务处 / 管理</template

角色管理

<el-menu-item

index=“2-2-1”

@click=“toRoute(‘/home/teacherData’, ‘老师管理’)”

老师管理</el-menu-item

<el-menu-item

index=“2-2-2”

@click=“toRoute()”

老师审核</el-menu-item

其它管理

<el-menu-item

index=“2-3-1”

@click="

toRoute()

"

教务管理</el-menu-item

<el-menu-item

index=“2-3-3”

@click="

toRoute(

‘/home/shopList’,

’ / 运营管理 / 店铺管理 / 店铺列表’,

‘店铺列表’,

‘2-3-3’

)

"

扫厕所管理</el-menu-item

操作

<el-dropdown-item @click.native=“logOut()”

退出登录</el-dropdown-item

{{ userName }}

xxx公司运营管理系统

{{pageName}}