前端面试项目拷打

Axios相关

1.在Axios二次封装时，具体封装了哪些内容，如何处理请求拦截和响应拦截？

axios二次封装的目的：为了统一处理请求和响应拦截器、错误处理、请求超时、请求头配置等，提高代码可维护性和复用性。

  • 首先创建axios实例，配置基础的URL和请求超时时间。
  • 请求拦截器：用于在发送请求之前进行一些预处理，像，检查本地存储中是否存在token，当前请求的URL是否在白名单中，如果token存在且URL不在白名单中，会在请求头中添加token.
  • 响应拦截器：用于在接收到响应之后进行一些处理。根据后台返回的code数据，使用ElMessage显示信息，如果token错误或过期，会清除本地存储中的相关数据，并将用户重定向到登录页面。
  • 导出Axios实例：在其他部分使用，可以通过这个实例发出HTTP请求，不需要每次都重新配置Axios 。如在API请求封装文件导入了axios的二次封装，getCode函数内部调用了request.post方法发出请求。request.post就是axios文件中配置好的实例post方法。

2.如何处理全局的错误码返回的，比如token失效、权限不足等情况？
在响应式拦截器中，根据后端返回的code进行不同处理

3.Aixos封装是否支持取消请求，如果一个用户在短时间内连续点击多个请求？

使用axios.CancelToken来取消重复请求，防止用户多次点击按钮导致接口请求重复。

Vuex相关

4.如何实现Vuex数据持久化的？

Vuex 默认存储在内存中，刷新页面后会丢失数据。我使用 vuex-persistedstate 进行持久化存储，存入 localStorage 或 sessionStorage。刷新后将动态路由添加到main.js中。

vuex持久化是通过localStorage实现的，具体来说，是在状态初始化时从localStorage中读取数据，并在状态变化时将新的状态保存到localStorage中，这种做法可以确保即使在页面刷新后，vuex的状态依然保持不变。 

在mutation中，通过设置动态菜单的函数，动态导入vue组件并设置路由组件，实现了动态路由的添加，在mutation中监听状态变化，然后将新的状态保存在LocalStorage中。

5.在Vuex中如何涉及store结构

使用 模块化 (modules) 的方式，将 Vuex 按功能拆分。

6.Vuex和Pinia有什么区别？

vuex通过一个store对象来管理所有状态，使状态管理变得集中和统一

pinia:分离模式，每个组件都可以拥有自己的store实例，提高性能。没有modules配置，体积也更小。

路由相关

1.前置路由守卫的作用？router.beforeEach()

用户导航到某个路由之前进行身份验证或其他逻辑判断.

重定向：用户尝试访问非登录页面且token不存在，则重定向到登录页面，如果用户已经登录（token存在）尝试访问登录页面时，则重定向到首页。

2.Aiosx Token校验的作用和路由守卫结合的原因：
axios设置请求拦截器来添加token，在响应式拦截器中处理token过期的情况，主要时为了确保每个API请求都带有正确的认证信息。

将前置路由守卫和Axios Token结合使用的原因：

  1. 细粒度控制：路由守卫提供了更细粒度的访问控制，可以在用户尝试访问某个页面之前就阻止未授权的访问，而不必等到 API 请求失败。
  2. 用户体验：通过路由守卫，可以防止用户在尝试访问受保护的页面时看到加载中的状态或错误信息，直接重定向到登录页面可以提高用户体验。

3.路由重定向的实现 redirect

用于在用户登录后根据存储在本地的路由信息决定重定向到哪个页面。如果本地没有存储路由的信息，则重定向到登录页面。

组件库的使用：

1.Element Plus和Vant的主要区别是什么？在什么场景下使用它们？

Element Plus：使用于PC端，基于vue3的UI组件库。依赖 Vue 3 生态，如 setup() 和 Composition API。

Vant:适用于移动端。内置 Flex 布局，支持 Vue 2 和 Vue 3。

2.如何在同一个项目中同时兼容PC端和移动端的UI组件？

方法 1：使用不同的组件库（Element Plus + Vant）

方法 2：使用响应式 CSS + flex/grid

.container {display: flex;flex-direction: column;
}@media screen and (min-width: 768px) {.container {flex-direction: row;}
}

方法 3：使用 rem + vw 进行适配

html {font-size: calc(100vw / 10);
}

页面根据屏幕大小自动缩小，无需手动调整组件。

二维码支付

1.如何使用 Qrcode 生成二维码？如何优化二维码的清晰度？

我使用 qrcode 库来生成二维码

优化清晰度

  • errorCorrectionLevel: "H"（最高容错等级，防止二维码损坏后无法识别）
  • scale: 8（增大像素密度，避免模糊）
  • margin: 1（减少周围白边）

2.在支付过程中，你是如何保证数据安全性的？

  • HTTPS 加密 → 确保支付信息不被劫持。
  • Token 验证 → 在支付请求中附带 JWT，后端验证后才能处理支付请求。
  • 签名机制 → 前端请求支付接口时，后端返回 签名字符串，防止数据篡改。
  • 定期刷新 Token → 避免 Token 被滥用。
Vite相关

1.为什么选择 Vite 作为构建工具？相较于 Webpack，它的优势是什么？

webpack会对所有模块进行打包操作，配置复杂，需要编写大量配置文件，功能丰富，适合大型复杂的项目。

vite没有打包的步骤，而是直接启动一个开发服务器，按需加载模块，响应速度提高。大部分无需自己写配置文件。轻量和速度优势，适合中小型项目。

2.vite的快速冷启动和即时热更新

快速冷启动：指在vite启动开发服务器时，能够迅速完成初始化并启动服务，使得开发者可以立即开始开发工作。

即时热更新：当代码发生变化时，vite能够实时地将这些变化推送到浏览器中，无需手动刷新页面，允许开发者在编写代码时能够立即看到效果从而加快开发速度和迭代效率。

3.webSocket

WebSocket是HTML5引入的一项技术，用于在Web应用程序中实现实时双向通信。WebSocket允许服务器主动向客户端推送数据，不需要客户端发起请求。

特点：

  • 实时双向通信：一旦建立了WebSocket连接，客户端和服务器可以通过该连接进行双向的实时数据传输。
  • 持久化连接：WebSocket连接保持打开状态，允许客户端和服务器之间进行持续通信，无需频繁建立连接。
  • 高效性：通过减少HTTP请求的次数和降低网络延迟，WebSocket提供了更高效和实时的通信方式。

vite在开发服务器和浏览器之间建立了一个持久的双向通信通道（websocket),通过者通道，开发服务器可以实时地将代码变化推送给浏览器。

异步处理

1.在 API 调用中，你是如何处理请求失败或超时的？

在axios实例中设置了timeout属性为10000毫秒（10s),意味着如果请求在10s内没有完成，会自动触发超时错误。超时错误会进入响应拦截中。

  • 设置 timeout，超时自动取消
  • try-catch 处理异常，显示友好错误提示

2.async/await 和 .then().catch() 方式的区别是什么？

async/await → 语法简洁，可读性高
then().catch() → 适用于 Promise 链式调用

3.如果多个 API 需要并行调用，你会如何优化？

使用 Promise.all() 并行执行多个 API：提高性能，减少等待时间。

const [user, orders] = await Promise.all([axios.get("/api/user"),axios.get("/api/orders"),
]);
性能优化

1.KeepAlive缓存？

<keep-alive>是一个内置组件，用于缓存组件实例，避免在切换时重复渲染和销毁，对于性能优化特别有用，尤其在用户频繁切换页面或者组件的情况下，可以减少不必要的DOM操作和计算，提高用户体验。

用法：<keep-alive>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，当组件再次变得活跃状态时，会复用这些缓存的实例，而不是重新创建。

在Vue Router中，通过路由元信息（meta)来控制哪些路由下的组件需要<keep-alive>缓存

const router = new VueRouter({routes: [{path: '/foo',component: Foo,meta: { keepAlive: true } // 标记该路由下的组件需要被缓存},{path: '/bar',component: Bar}]
});

在App.vue或者布局组件中使用<keep-alive>并结合路由的meta信息来决定是否缓存。

<template><div id="app"><router-view v-if="$route.meta.keepAlive" key="$route.path"></router-view><keep-alive><router-view v-if="!$route.meta.keepAlive" key="$route.path"></router-view></keep-alive></div>
</template>

 生命周期钩子：

别<keep-alive>包裹的组件会有特殊的生命周期钩子：

activated：当组件被激活（从缓存中取出并显示到页面）时调用。

deactivated：当组件被停用（从界面移除并缓存起来）时调用。

这意味着原本的mounted和destroyed钩子在被缓存的组件不会被调用，因为组件实例没有真正地被创建或销毁。

2.懒加载非核心模块时，具体是如何实现的，有没有遇到预加载或依赖加载的问题？

定义：路由懒加载也叫延迟加载，在需要的时候进行加载，随用随载。把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，更加高效。

为什么需要懒加载：如果没有很多页面都放在同一个js文件中，运用webpack打包后文件将异常大，进入页面时，需要加载的内容多，时间长，会出现长时间的白屏。运用懒加载可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

懒加载做了什么事：将路由对应的组件打包成一个个的js代码块，只有这个路由被访问时才加载对应组件，否则不加载。

 非懒加载示例：

// 非懒加载
import Home from '@/components/Home'const routes = [{path: '/home',name: 'home',component: Home}
]

 三种方式实现懒加载

vue异步组件

vue-router配置路由，使用vue的异步组件技术，实现按需加载，在这种情况下每一个组件就会生成一个js文件，不能分类指定chunkName

// vue异步组件
{path: '/home',name: 'home',component: resolve => require(['放入需要加载的路由地址'], resolve)
}

ES6推荐方式import()

直接将组件引入的方式，import是Es6的一个语法标准

使用魔法注释/* webpackChunkName: 'ImportFuncDemo' */ 打包到一个js文件里。

import Vue from 'vue';
import Router from 'vue-router';
// 官网可知：下面没有指定webpackChunkName，每个组件打包成一个js文件。
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const Foo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Foo')
// const Aoo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/Aoo')
export default new Router({routes: [{path: '/Foo',name: 'Foo',component: Foo},{path: '/Aoo',name: 'Aoo',component: Aoo}]
})

 webpack提供的require.ensure()实现懒加载

可以实现按需加载，多个路由指定相同的chunkName，会合并打包成一个js文件。

chunkName用于命名生成的懒加载文件

import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{
//@指向src目录 这个路径是需要懒加载的组件路径require.ensure(['@/components/HelloWorld'],()=>{resolve(require('@/components/HelloWorld'))})}
Vue.use('Router')
export default new Router({routes:[{{path:'./',name:'HelloWorld',component:HelloWorld}}]
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/73884.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

「JavaScript深入」Server-Sent Events (SSE)：轻量级实时通信技术

「JavaScript深入」Server-Sent Events (SSE)：轻量级实时通信技术

Server-Sent Events&#xff08;SSE&#xff09; SSE 的特点1. 单向通信2. 简单易用&#xff0c;浏览器原生支持3. 持久连接4. 纯文本传输5. 自动重连机制6. 轻量级协议 SSE 的实现服务器端实现&#xff08;Node.js 示例&#xff09;1. HTTP 响应头设置2. 数据推送模式3. 服务器…
阅读更多...
蓝桥杯2023年第十四届省赛真题-阶乘的和

蓝桥杯2023年第十四届省赛真题-阶乘的和

蓝桥杯2023年第十四届省赛真题-阶乘的和 时间限制: 2s 内存限制: 320MB 提交: 3519 解决: 697 题目描述 给定 n 个数 Ai&#xff0c;问能满足 m! 为∑ni1(Ai!) 的因数的最大的 m 是多少。其中 m! 表示 m 的阶乘&#xff0c;即 1 2 3 m。 输入格式 输入的第一行包含一个整…
阅读更多...
影刀RPA拓展-Python变量类型转换

影刀RPA拓展-Python变量类型转换

1. Python变量类型转换概述 1.1 类型转换的必要性 Python作为一种动态类型语言&#xff0c;在编程过程中经常需要进行变量类型转换。这主要是因为不同数据类型在存储结构、运算规则和使用场景上存在差异&#xff0c;而在实际开发中&#xff0c;我们常常需要对不同类型的数据进…
阅读更多...
Python pyqt+flask做一个简单实用的自动排班系统

Python pyqt+flask做一个简单实用的自动排班系统

这是一个基于Flask和PyQt的排班系统&#xff0c;可以将Web界面嵌入到桌面应用程序中。 系统界面&#xff1a; 功能特点&#xff1a; - 读取员工信息和现有排班表 - 自动生成排班表 - 美观的Web界面 - 独立的桌面应用程序 整体架构&#xff1a; 系统采用前后端分离的架构…
阅读更多...
Pycharm接入DeepSeek，提升自动化脚本的写作效率

Pycharm接入DeepSeek，提升自动化脚本的写作效率

一.效果展示&#xff1a; 二.实施步骤&#xff1a; 1.DeepSeek官网创建API key&#xff1a; 创建成功后&#xff0c;会生成一个API key&#xff1a; 2. PyCharm工具&#xff0c;打开文件->设置->插件&#xff0c;搜索“Continue”&#xff0c;点击安装 3.安装完成后&…
阅读更多...
Java：Arrays类：操作数组的工具类

Java：Arrays类：操作数组的工具类

文章目录 Arrays类常见方法SetAll(); 代码排序如果数组中存储的是自定义对象 Arrays类 常见方法 SetAll(); 注意&#xff1a; 不能用新的数组接是因为修改的是原数组&#xff0c;所以完了要输出原数组发现会产生变化参数是数组下标变成灰色是因为还能简化&#xff08;Lambda…
阅读更多...
2025-gazebo配置on vmware,wsl

2025-gazebo配置on vmware,wsl

ros2安装 # 安装ros2, 推荐鱼香ros一键式安装 wget http://fishros.com/install -O fishros && . fishros安装版本&#xff1a;ubuntu24.04 ros2 jazzy gazebo Getting Started with Gazebo? — Gazebo ionic documentation ros与gz的版本对应关系&#xff1a; ​…
阅读更多...
格力地产更名“珠免集团“ 全面转型免税赛道

格力地产更名“珠免集团“ 全面转型免税赛道

大湾区经济网品牌观察讯&#xff0c;3月18日&#xff0c;格力地产股份有限公司公告宣布&#xff0c;拟将公司名称变更为"珠海珠免集团股份有限公司"&#xff0c;证券简称同步变更为"珠免集团"。此次更名并非简单的品牌焕新&#xff0c;而是标志着这家曾以房…
阅读更多...
网络编程--服务器双客户端聊天

网络编程--服务器双客户端聊天

写一个服务器和客户端 运行服务器和2个客户端&#xff0c;实现聊天功能 客户端1和客户端2进行聊天&#xff0c;客户端1将聊天数据发送给服务器&#xff0c;服务器将聊天数据转发给客户端2 要求&#xff1a; 服务器使用 select 模型实现 &#xff0c;客户端1使用 poll 模型实现…
阅读更多...
k8s主要控制器简述（一）ReplicaSet与Deployment

k8s主要控制器简述（一）ReplicaSet与Deployment

目录 一、ReplicaSet 关键特性 示例 解释 支持的 Operator 二、Deployment 1. 声明式更新 示例 2. 滚动更新 示例 3. 回滚 示例 4. ReplicaSet 管理 示例 5. 自动恢复 示例 6. 扩展和缩容 示例 示例 一、ReplicaSet ReplicaSet 是 Kubernetes 中的一个核心控…
阅读更多...
python中redis操作整理

python中redis操作整理

下载redis命令 pip install redis 连接redis import redis # host是redis主机&#xff0c;需要redis服务端和客户端都起着 redis默认端口是6379 pool redis.ConnectionPool(hostlocalhost, port6379,decode_responsesTrue) r redis.Redis(connection_poolpool)操作字符串 …
阅读更多...
自然语言处理入门4——RNN

自然语言处理入门4——RNN

一般来说&#xff0c;提到自然语言处理&#xff0c;我们都会涉及到循环神经网络&#xff08;RNN&#xff09;&#xff0c;这是因为自然语言可以被看作是一个时间序列&#xff0c;这个时间序列中的元素是一个个的token。传统的前馈神经网络结构简单&#xff0c;但是不能很好的处…
阅读更多...
数据结构之链表（双链表）

数据结构之链表（双链表）

目录 一、双向带头循环链表 概念 二、哨兵位的头节点 优点&#xff1a; 头节点的初始化 三、带头双向链表的实现 1.双链表的销毁 2.双链表的打印 3.双链表的尾插和头插 尾插&#xff1a; 头插&#xff1a; 4.双链表的尾删和头删 尾删&#xff1a; 头删&#xff1a; …
阅读更多...
ASP3605同步降压调节器——满足汽车电子严苛要求的电源芯片方案

ASP3605同步降压调节器——满足汽车电子严苛要求的电源芯片方案

ASP3605高效同步降压调节器&#xff0c;通过AEC-Q100 Grade1认证&#xff0c;输入电压4V至15V&#xff0c;输出电流5A&#xff0c;峰值效率94%。车规级型号ASP3605A3U支持-40C至125C工作温度&#xff0c;适用于ADAS、车载信息娱乐系统等场景。 面向汽车电子的核心功能设计 1. …
阅读更多...
vue3+Ts+elementPlus二次封装Table分页表格，表格内展示图片、switch开关、支持

vue3+Ts+elementPlus二次封装Table分页表格，表格内展示图片、switch开关、支持

目录 一.项目文件结构 二.实现代码 1.子组件&#xff08;表格组件&#xff09; 2.父组件&#xff08;使用表格&#xff09; 一.项目文件结构 1.表格组件&#xff08;子组件&#xff09;位置 2.使用表格组件的页面文件&#xff08;父组件&#xff09;位置 3.演示图片位置 ele…
阅读更多...
[特殊字符]1.2.1 新型基础设施建设

[特殊字符]1.2.1 新型基础设施建设

&#x1f680; 新型基础设施建设全解析 &#x1f31f; 核心概念与定义 维度详细内容定义以新发展理念为引领&#xff0c;以技术创新为驱动&#xff0c;以信息网络为基础&#xff0c;提供数字转型、智能升级、融合创新服务的基础设施体系。提出背景2018年中央经济工作会议首次提…
阅读更多...
SQL Server数据库慢SQL调优

SQL Server数据库慢SQL调优

SQL Server中慢SQL会显著降低系统性能并引发级联效应。首先&#xff0c;用户直接体验响应时间延长&#xff0c;核心业务操作&#xff08;如交易处理、报表生成&#xff09;效率下降&#xff0c;导致客户满意度降低甚至业务中断。其次&#xff0c;资源利用率失衡&#xff0c;CPU…
阅读更多...
【安全运营】安全运营关于告警降噪的一些梳理

【安全运营】安全运营关于告警降噪的一些梳理

目录 前言一、智能技术层面1、机器学习和 AI 模型训练2、攻击成功判定 二、多源关联分析1、多源设备关联&#xff08;跨设备日志整合&#xff09;2、上下文信息增强 三、业务白名单和策略优化1、动态白名单机制2、阈值和规则调整 四、自动化和流程化1、告警归并与去重2、同类型…
阅读更多...
逆向中常见的加密算法识别

逆向中常见的加密算法识别

1、base64及换表 base64主要是将输入的每3字节&#xff08;共24bit&#xff09;按照每六比特分成一组&#xff0c;变成4个小于64的索引值&#xff0c;然后通过一个索引表得到4个可见的字符。 索引表为一个64字节的字符串&#xff0c;如果在代码中发现引用了这个索引表“ABCDEF…
阅读更多...
《UNIX网络编程卷1：套接字联网API》第2章 传输层：TCP、UDP和SCTP

《UNIX网络编程卷1：套接字联网API》第2章 传输层：TCP、UDP和SCTP

《UNIX网络编程卷1&#xff1a;套接字联网API》第2章 传输层&#xff1a;TCP、UDP和SCTP 2.1 传输层的核心作用与协议选型 传输层是网络协议栈中承上启下的核心层&#xff0c;直接决定应用的通信质量。其主要职责包括&#xff1a; 端到端通信&#xff1a;屏蔽底层网络细节&am…
阅读更多...
最新文章

Copyright @ 2022~2023