业务面试题
# 总结可能会出现的面试题
介绍一下你的地铁路径规划功能是怎么实现的？
地铁路径规划主要分为数据层、算法层和展示层。前端主要负责用户输入起点终点、调用路径规划接口、解析返回的数据，并通过页面展示推荐路线。
后端根据地铁线路、站点关系、换乘关系等数据进行路径计算，返回包含线路、站点、换乘信息以及预计耗时的数据，前端负责渲染路线详情和导航流程。
路径规划算法是什么？
数据来源是什么？
数据主要来源于地铁线路基础数据，包括线路信息、站点信息、站点经纬度、站点之间连接关系、换乘关系等。
如何计算最优路线？
如何处理换乘？
如何计算时间
你们的路径规划和普通地图导航有什么区别？
普通地图导航主要针对道路交通，比如驾车、步行路线规划，而地铁导航主要围绕轨道线路进行计算，需要考虑站点、线路、换乘以及站内路线。
- 是否考虑站内换乘距离？
- 是否考虑拥挤程度？
- 是否考虑上下车位置？
如何实现推荐用户从哪个屏蔽门上下车？
这个功能核心是结合车站内部结构数据和换乘路线数据进行计算。
车站地图数据；站台方向；车门位置；换乘通道位置；出入口位置
需要哪些数据？
如何计算距离？
如何知道车厢位置？
一般通过线路方向和站台结构数据推算，例如地铁每节车厢停靠位置固定，可以提前维护车厢与站台区域的对应关系。
数据结构如何设计？
站点查询功能如何实现？
站点查询主要通过关键词搜索实现，用户输入关键词后，根据站点名称、拼音、简称进行匹配。
- 搜索怎么做？
- 模糊搜索如何实现？
- 是否做关键词缓存？
- 数据量大怎么办？
如果有10000个地铁站数据，前端如何优化查询？
后端分页
你是如何参与需求分析的？
首先问想要达成什么效果，再看看是否落地
追问：
如何拆解需求？
大需求，拆成小需求
如何评估开发成本？
时间周期；困难周期；技术栈难度
如何和产品沟通？
Vue3项目目录结构如何设计？
src
-api
-util
-service
-component
-screen
-hooks
-section
Vue3项目中为什么使用Pinia？
更轻量
追问：
Pinia相比Vuex有什么区别？
直接调用store的方法
如何设计store？
根据不同类型去设计
例如状态、信息
如何持久化？
使用插件
前端登录鉴权流程是什么？
首先请求-404-跳转登录页
追问：
Token存哪里？
Pinia持久化
Token过期怎么办？
接口报404，重新请求
Refresh Token了解吗？
axios如何封装请求？
追问：
请求拦截器做什么？
统一给请求头携带参数；
响应拦截器做什么？
当错误的时候统一处理错误提醒
如何统一处理错误？
在响应拦截器
路由守卫如何实现？
继续问：
- 如何判断登录状态？
- 如何跳转登录页？
- 如何处理白名单？
动态权限菜单怎么实现？
追问：
- 后端返回什么数据？
- 如何生成路由？
- 如何控制按钮权限？
如何实现按钮级权限控制？
Vue3中Excel导入如何实现？
追问：
- 使用什么库？
- File对象怎么读取？
- 如何解析Excel？
- 如何上传后台？
Excel导入如何判断用户填写的数据是否正确？
追问：
- 字段校验怎么做？
- 类型校验？
- 必填校验？
- 重复数据校验？
- 错误如何反馈？
Excel导出怎么实现？
追问：
- 前端生成还是后端生成？
- 大数据量怎么办？
浏览器全屏功能如何实现？
追问：
- FullScreen API？
- 如何监听退出？
全屏状态如何同步？
追问：
- 多组件如何知道当前全屏？
新手引导功能如何实现？
追问：
- 使用第三方库还是自己实现？
- 如何记录用户是否看过？
如何实现只展示一次新手引导？
Vue3中地图API如何实现？
追问：
- 使用什么地图？
- 如何加载地图？
- 如何添加marker？
- 如何绘制路线？
地图大量Marker如何优化？
追问：
- 聚合？
- Canvas？
- 降低刷新频率？
ECharts如何封装？
追问：
- 如何避免重复初始化？
- resize怎么处理？
- 生命周期如何处理？
ECharts数据更新怎么优化？
追问：
- setOption区别？
- 是否销毁chart？
移动端适配怎么做？
追问：
- rem？
- vw？
- rpx？
- flexible？
Taro如何实现多端适配？
追问：
- 微信小程序和H5区别？
- 条件编译？
页面加载慢如何优化？
追问：
- 路由懒加载
- 图片优化
- 分包
- CDN
- webpack优化
Webpack做过哪些优化？
追问：
- Tree Shaking
- Code Splitting
- 压缩
- 缓存
登录注册流程怎么实现？
追问：
- Token管理？
- 表单校验？
- 密码加密？
uni-app登录和Web登录有什么区别？
追问：
- 微信授权登录？
- App登录？
Vue表单校验如何实现？
复杂表单如何设计？
追问：
- 动态表单
- 表单组件封装
ECharts实现设备数据统计怎么做？
追问：
- 数据格式？
- 动态更新？
- 大数据量优化？
ECharts大量数据如何优化？
追问：
- sampling
- large模式
- 分页
- 数据降采样
40,000台设备数据如何展示？
追问：
- 为什么不卡？
- 前端做了什么优化？
日采集200万数据如何处理？
追问：
- 前端是否直接请求全部数据？
- 后端如何分页？
- 数据聚合？
实时监控数据如何更新？
追问：
- WebSocket？
- SSE？
- 定时轮询？
uni-app原理了解吗？
追问：
- 和微信原生开发区别？
- 和Taro区别？
uni-app如何调用原生能力？
uni-app如何适配不同平台？
# 简历的实现场景
# Trops Soccer App
1．负责BLE通信模块开发，实现设备扫描、连接、数据收发及异常恢复；使用单例+发布订阅模式管理蓝牙实例，提升通信稳定性与可维护性。
2．基于React Native与Native Module实现Android/iOS SDK接入，处理蓝牙权限及原生兼容问题。
3．基于SSE实现AI训练报告流式生成，结合缓存、增量更新和断线恢复，优化移动端实时展示体验。
4．集成WebView实现内嵌H5业务；实现H5邀请，通过H5分享链接打通Web与App，支持球员邀请。
5．采用Zustand管理客户端状态，结合TanStack Query 实现接口缓存与数据同步，优化页面性能。
6．完成 App 打包签名，完成 Google Play、App Store 材料准备与合规审核，保障应用双端正式上线。
# Trops智能足球数据管理系统
1．基于WebSocket实现脚环数据实时监控及自动断线重连机制，结合ECharts完成动态数据可视化，通过增量更新和渲染优化提升实时监控页面性能
项目中脚环设备会实时上传运动数据，我们通过 WebSocket 建立长连接，实现前端实时接收数据。
WebSocket 连接成功后，服务端会持续推送设备数据，前端接收到数据后进行格式转换，然后更新 ECharts 图表展示。
针对网络不稳定的问题，我们实现了自动重连机制，比如监听 WebSocket 的 close 和 error 事件，在断开后按照一定策略重新建立连接。
在性能优化方面，没有每次数据更新都重新渲染整个图表，而是采用增量更新方式，只更新变化的数据，同时控制更新频率，减少 React 状态频繁更新带来的性能问题。
2．搭建RBAC权限管理模块，基于套餐策略精细化管控球队、数据查看、高级功能访问权限。
项目中不同球队购买不同套餐，不同套餐拥有不同功能权限，所以设计了 RBAC 权限管理体系。
整体模型是用户、角色、权限三层关系。
后端返回用户对应的角色和权限列表，前端根据权限控制页面访问、菜单展示以及按钮级操作权限。
同时结合套餐策略，比如普通套餐只能查看基础数据，高级套餐可以访问更多数据分析功能，实现功能权限控制。
3．基于SSE实现AI训练报告实时输出，通过Markdown渲染、增量更新及数据缓存优化长文本展示性能。
AI训练报告生成时间比较长，如果等待接口全部返回，用户体验比较差。
所以采用 SSE 实现流式输出，服务端生成一部分内容后立即推送给前端，前端可以实时展示 AI 返回结果。
前端通过 SSE 接收数据，将返回内容进行增量拼接，然后使用 Markdown 渲染展示文本。
针对长文本展示性能问题，我们减少了频繁 setState 更新，通过批量更新和缓存机制降低渲染次数，提高页面流畅度。
4．开发AI对话交互模块，实现训练问答、数据解读，完成会话上下文管理，通过请求节流优化交互性能。
AI 对话模块主要用于帮助用户分析训练数据，比如询问运动表现、训练建议等。
前端负责聊天界面开发，包括消息列表展示、输入框、发送状态以及历史记录管理。
会话上下文方面，我们会保存当前会话 ID 和历史消息，在请求 AI 时携带上下文信息，让 AI 可以理解之前的对话内容。
为了避免用户快速连续发送请求导致接口压力，我们增加了请求节流控制，限制请求频率，提高交互稳定性。
5．负责球队、训练赛事配置、数据筛选等后台业务模块开发，实现表单校验、大数据表格分页筛选及 Excel 导入导出功能，兼容多浏览器环境。
后台主要用于球队和训练赛事管理。
我负责开发球队管理、赛事配置、数据筛选等业务页面。
表单部分使用组件库提供的 Form 能力，实现字段校验、错误提示和提交处理。
数据列表方面，针对大量数据场景，采用服务端分页和条件筛选，避免一次加载大量数据影响页面性能。
Excel 功能通过文件解析库实现数据导入导出，方便后台人员批量管理数据。
同时处理不同浏览器兼容问题，保证系统稳定运行。
# 地铁换乘小程序及后台
1．独立开发地铁路径规划、智能换乘导航、站点查询等核心业务模块。
这个项目主要是一个地铁换乘查询应用，我负责核心业务模块的开发。
在路径规划方面，我首先将地铁线路和站点数据进行结构化处理，把站点关系转换成图结构，然后根据用户输入的起点和终点计算推荐路线。
在换乘导航方面，会根据线路关系计算换乘站点，并展示乘坐线路、经过站点以及换乘信息。
站点查询主要通过关键词搜索和数据匹配实现，支持用户快速查找目标站点。
2．参与需求分析与页面架构设计，实现登录鉴权、路由守卫、细粒度动态权限体系搭建。
在项目开发过程中，我参与了需求分析和页面架构设计，根据业务功能拆分页面和公共组件。
登录鉴权方面，用户登录成功后获取 token，前端保存用户登录状态，并通过请求拦截器统一携带 token。
路由权限方面，通过路由守卫判断用户登录状态，没有权限的页面会进行拦截跳转。
动态权限主要采用 RBAC 模型，根据用户角色和权限列表控制页面访问权限以及按钮级权限展示。
3．优化移动端适配、页面加载与交互体验，提升系统稳定性与用户体验。
在移动端适配方面，我主要通过响应式布局、Flex 布局以及不同屏幕尺寸适配方案，保证页面在不同设备上的显示效果。
在页面性能方面，我优化了资源加载和组件渲染逻辑，例如减少不必要的重新渲染、图片懒加载、接口数据缓存等。
同时针对交互体验，优化了页面加载状态、错误提示和用户操作反馈，提高系统稳定性和使用体验。
4．实现全屏控制、新手引导、地图等通用功能。
全屏控制
我们主要通过监听浏览器 API 实现全屏切换。
进入全屏时调用
requestFullscreen()，退出时调用exitFullscreen()。同时监听
fullscreenchange事件，实时同步当前全屏状态，控制按钮显示。不同浏览器对 Fullscreen API 支持存在差异，所以需要做兼容处理，例如判断不同浏览器前缀。
新手引导
新手引导主要通过遮罩层、高亮区域和提示框实现。
我们会根据用户当前页面状态配置引导步骤，通过控制当前 step 显示对应的高亮元素和提示内容。
通常通过 DOM 元素选择器获取目标元素的位置，例如通过 id 或 ref 获取元素，然后计算元素的位置和大小，绘制遮罩区域。
我们会记录用户引导完成状态，例如存储在 localStorage 或后端用户信息中。
用户下一次进入页面时，根据状态判断是否展示。
地图
地图功能主要通过第三方地图 SDK 实现，例如高德地图、腾讯地图或者 Mapbox。
前端负责地图初始化、标记点展示、轨迹绘制和交互控制。
# 设备监控系统小程序及网站
1．完成用户登录注册模块开发，处理表单校验与状态管理。
登录注册模块主要通过表单组件实现，使用表单校验规则验证用户输入。
登录成功后保存 token，并通过状态管理维护用户信息和登录状态。
2．实现收益报告、排行榜业务页面及交互逻辑。
收益报告和排行榜主要通过接口获取数据，根据业务需求进行数据处理，然后通过组件化方式展示。
页面包含筛选、分页、Tab切换等交互逻辑。
3．基于ECharts开发统计图表，完成设备监控数据可视化。
我使用 ECharts 实现数据可视化，通过接口获取设备监控数据，转换成 ECharts option 配置进行展示。
同时处理图表自适应和数据更新，保证页面展示效果。
4．优化页面渲染逻辑，保障大数据量场景下功能流畅与使用体验。
针对大数据量场景，我主要从减少渲染次数、列表优化、接口分页和图表优化几个方向处理。
例如使用 React.memo、虚拟列表、数据分页和 ECharts 优化，提高页面响应速度。
# 通用能力
# 组件封装
相同结构，例如列表、卡片、弹窗等，我会抽离成公共组件。
相同结构、数据不同，会通过 props 传递数据。
相同结构，内部内容需要高度自定义，会通过 children 或 render props 扩展
假设有太多层的交接，直接使用contenx或者状态管理
# 常用的hooks
useState：管理状态，表单输入、控制显示隐藏 useEffect：处理副作用，页面初始化请求、定时器、监听事件、DOM操作 useMemo：缓存计算结果 useCallback：缓存函数，缓存函数引用，避免子组件重复渲染 useRef：保存变量/操作 DOM，操作DOM、保存旧值、保存定时器、WebSocket实例 useContext：跨组件通信，用户信息、语言、主题 useReducer：复杂状态管理，登录状态 useImperativeHandle：暴露子组件方法，父组件调用子组件方法 useLayoutEffect：同步执行副作用，需要避免闪烁、获取DOM尺寸、修改布局
自定义 Hook：抽离业务逻辑，提高复用，BLE、SSE、分页
React ├── 组件封装（Button、Form、Table、Modal、Select） ├── 组件通信（父子、兄弟、跨层、全局） ├── Hooks ├── 生命周期（创建、更新、销毁） ├── 渲染机制（React Fiber、Diff算法、key作用） └── 性能优化（react渲染层面、资源加载优化、网络请求优化、浏览器渲染层优化）
JavaScript ├── Event Loop（同步代码 、微任务 、宏任务） ├── 闭包（防抖、节流、Hook、 私有变量） ├── this（普通函数看调用对象、箭头函数继承外层this、call/apply/bind 改变this） └── 原型链
TypeScript ├── interface/type（对象类型、扩展；联合类型、交叉类型、工具类型） ├── 泛型（一个函数支持多种类型） └── 工具类型（Partial 可选 、Pick 选择字段 、Omit 删除字段 、Record 对象映射）
工程化 ├── Webpack/Vite（打包 、loader、 plugin、 bundle；ES Module、开发服务器、快速启动） ├── Git（需求拆分 、创建 feature分支、本地开发、提交代码、Code Review、合并 develop、测试、发布线上） ├── CI/CD（提交代码↓、自动测试↓、打包↓、部署） └── Docker（镜像 、容器 、Dockerfile、 部署）
网络 ├── HTTP ├── Axios（请求拦截器 、响应拦截器 、token、 错误处理） ├── WebSocket（建立连接、发送数据、接收消息、关闭连接） └── SSE
RN ├── Bridge（JS 和 Native 通信） ├── Native Module（蓝牙 相机 地图 支付） ├── BLE └── App发布
项目能力 ├── 架构设计（目录设计、模块划分、 组件复用、状态管理） ├── 性能优化（渲染优化 、网络优化 、资源优化 、数据优化） └── 业务拆解（需求分析 ↓ 功能拆分 ↓ 技术方案 ↓ 开发实现 ↓ 测试上线）