前端面试erp项目常问问题

一、 项目经验与业务理解类(必问)

这类问题考察你是否真正参与过 ERP 核心模块开发,而非只做简单的页面展示。

1. 你在 ERP 项目中负责了哪些模块?具体做了什么?
回答思路 :挑 2-3 个核心模块(如采购管理、库存管理、财务管理、生产工单 ),讲清「需求场景 + 技术实现 + 解决的业务痛点」。
示例 :"我负责库存管理模块,包括库存台账查询、出入库单录入、库存预警功能。其中核心是解决海量库存数据的分页与筛选性能 问题,我用了前端虚拟列表 + 接口防抖,把 10 万条数据的渲染时间从 3s 降到了 200ms;另外针对出入库单的表单联动(如选择商品自动带出规格、单价),封装了通用的联动组件,提升了其他模块的复用率。"

2. ERP 系统中,前端如何处理复杂的表单业务?(如采购单、销售单)
回答思路 :从 表单设计、数据联动、校验、提交、回显 五个维度展开。

(1)表单拆分 :复杂表单拆分为子表单组件(如基础信息、商品明细、结算信息),降低耦合;

(2)数据联动 :通过 watch/computed 实现字段联动(如选仓库后过滤商品、数量变化自动算金额);

(3)校验规则 :封装通用校验函数(如手机号、税号、金额格式),支持实时校验 + 提交前统一校验;

(4)提交优化 :大表单分批次提交(如基础信息和商品明细分开接口),添加加载状态防止重复提交;

(5)回显处理 :编辑页从接口获取数据后,处理空值、枚举值映射(如 0→未审核,1→已审核)。

3. ERP 中的权限管理你是怎么做的?前端如何控制页面、按钮级别的权限?
回答思路 :结合后端返回的权限数据,从 路由、页面、按钮 三层控制。

核心实现:

(1)路由权限 :登录后获取用户权限列表,通过 router.beforeEach 拦截,无权限则跳 403;动态生成路由(addRoute),避免无权限路由注册;

(2)页面权限 :根据用户角色(如管理员、采购专员),控制页面某些模块的显示 / 隐藏(如 v-if="permission.includes('stock:edit')");

(3)按钮权限 :封装 v-permission 指令,传入权限码(如 stock:delete),指令内部判断用户权限,无权限则移除按钮或置灰;

数据权限:前端配合后端,在接口请求时携带用户的数据范围(如只能看本部门的单据),后端返回对应数据。

二、技术栈与核心难点类

这类问题考察你解决 ERP 项目技术痛点的能力,比如大数据渲染、性能优化、状态管理。

1. ERP 系统数据量很大(如几万条单据列表),前端如何优化渲染性能?
回答思路 :从 数据请求、列表渲染、缓存 三个层面优化,这是 ERP 面试的高频重点。

(1)请求层 :分页查询(后端分页 + 前端分页)、筛选条件防抖(500ms 延迟)、只请求必要字段(避免返回冗余数据);

(2)渲染层 :使用虚拟列表(如 vue-virtual-scroller/react-window),只渲染可视区域的 DOM;列表懒加载,滚动到底部自动加载下一页;

(3)缓存层 :列表数据缓存到 sessionStorage,相同筛选条件下直接复用,避免重复请求;

(4)其他优化 :关闭列表的 watch 深度监听、避免复杂的单元格计算(如用 computed 缓存计算结果)。

2. ERP 中大量的表单和列表,你是如何做组件复用的?
回答思路 :提炼通用组件 + 封装业务组件,区分「通用型」和「业务型」。

(1)通用基础组件 :封装 BaseInput、BaseSelect、BaseTable,支持自定义 props(如校验规则、下拉选项、列配置);

(2)业务通用组件 :针对 ERP 高频场景,封装 GoodsSelector(商品选择器,带模糊搜索、分类筛选)、DateRangePicker(日期范围选择,支持快捷选项如「近 7 天」「本月」)、BillStatusTag(单据状态标签,统一样式);

(3)页面级复用:相同的表单结构(如出入库单),抽离为 BillForm 组件,通过传入模板配置(如不同单据的字段差异)实现复用。

3. ERP 项目的状态管理你是怎么设计的?用 Vuex/Pinia/Redux 解决了什么问题?
回答思路 :按模块划分状态,区分「全局状态」和「页面状态」,避免状态混乱。

(1)全局状态 :用户信息、权限列表、全局字典(如商品分类、单据状态枚举),存在 Pinia/Vuex 中,所有模块共享;

(2)业务模块状态 :如库存模块的「当前选中仓库」「筛选条件」,按模块拆分 store(如 stockStore),避免全局 store 臃肿;

(3)页面级状态 :如表单的临时数据、列表的分页参数,直接存在组件内部(ref/useState),无需放入全局 store;

(4)解决的问题 :避免了组件之间的 props 层层传递(如商品选择器选择后,同步到父表单),统一管理全局字典的加载与更新。

4. ERP 中如何处理数据的导入导出?比如 Excel 导入商品信息。
回答思路 :讲清「前端解析 Excel + 数据校验 + 批量提交」的流程。

(1)导入 :使用 xlsx 库解析用户上传的 Excel 文件,转为 JSON 数据;对解析后的数据做前端校验(如必填项、数据格式、重复项),生成校验报告(哪些行有误);校验通过后,批量提交到后端(分批次提交,避免单次请求数据过大);

(2)导出 :后端返回导出接口(通常是下载链接),前端触发下载;或前端用 xlsx 生成 Excel(适合少量数据),注意处理大文件导出(前端生成易卡顿,建议后端生成);

(3)体验优化:添加导入导出的进度条,失败时给出明确的错误提示。

三、 性能与稳定性类

ERP 系统是企业核心系统,对稳定性和性能要求高,面试官会关注这类问题。

1. 前端如何保证 ERP 系统的稳定性?比如接口请求失败、网络异常怎么处理?
回答思路 :从 请求拦截、错误处理、降级方案 展开。

(1)请求拦截 :封装 Axios 请求拦截器,统一添加 token、处理请求参数;响应拦截器统一处理错误(如 401 跳转登录、403 无权限提示);

(2)错误重试 :对非核心接口(如统计数据)添加失败重试(1-2 次),核心接口(如提交单据)不重试,避免重复提交;

(3)离线处理 :关键操作(如单据录入)可结合 localStorage 做本地缓存,网络恢复后自动同步到后端;

兜底提示:接口报错时,给出友好提示(如「服务器繁忙,请稍后重试」),并记录错误日志(接入 Sentry),方便排查问题。

2. ERP 系统的首屏加载如何优化?
回答思路 :结合之前提到的静态资源优化、路由懒加载、接口优化,针对 ERP 特点补充。
核心要点 :

(1)路由懒加载 :按模块拆分路由(如 /purchase /stock),只加载当前页面的 JS 代码;

(2)预加载核心数据 :登录后提前加载全局字典(如枚举值),缓存到 store,避免各页面重复请求;

(3)骨架屏 :列表 / 表单页面添加骨架屏,减少用户等待的感知;

(4)静态资源优化 :JS/CSS 压缩、CDN 部署、第三方库按需引入(如 Element UI 按需加载组件)。

四、 场景设计类

这类问题考察你的业务设计能力,面试官会给出一个具体场景,让你设计解决方案。

1. 如果让你设计一个 ERP 的「单据审批」模块,前端需要考虑哪些点?

回答思路:从 流程设计、权限、交互、状态 四个维度展开。

(1)流程支持 :支持多级审批(如专员→主管→经理),前端根据后端返回的审批节点,动态渲染审批按钮(同意 / 驳回);

(2)权限控制 :不同角色看到的按钮不同(如审批人能同意,申请人只能撤回);

(3)交互体验 :审批时支持填写意见;审批状态实时更新(可结合 WebSocket 实现推送);

(4)状态管理:单据的审批状态(待审批、审批中、已同意、已驳回)需要和后端保持一致,避免前端状态错乱。

相关推荐
AiMan16 分钟前
腾讯ima还是不可以导出左侧所有对话,只能单条导出,方法不对吗
前端
去伪存真19 分钟前
并发量一高就装死?Agent 全链路“防猝死”手册
前端·agent
Moment21 分钟前
AI 编程时代,聊聊我的 Mac mini 双屏桌面
前端·后端
AiMan33 分钟前
先确认能不能一次把Microsofat Copilot所有内容打包一个文件导出
前端
时间的拾荒人35 分钟前
Redis 入门详解:核心特性、重要文件与全局命令实战
开发语言·redis·面试
总要学点什么36 分钟前
第97篇:三维数据加载-城市建筑白模自定义着色器——让一条光带沿高度扫上去,快慢却由帧率说了算
前端·gis·webgl·cesium·着色器·空间分析·白模
上海懒图科技1 小时前
工厂厂区电子地图定位导航:厂区人车精准定位,安全合规双保障
前端·arcgis·vue
西安小哥1 小时前
端侧跑大模型,真正的门槛不在参数量:一次 596 秒到 10 秒的压缩路径复盘
前端·人工智能
陈随易2 小时前
Cloudflare 出钱,Vite 团队挑人,44 个维护者分 30 万美元
前端·后端·程序员
恋猫de小郭2 小时前
Flutter THLC 的 WebView 滚动终于从 70 FPS 提升到 120 FPS
android·前端·flutter