前端银行外包面试宝典个人介绍面试官您好，我是黄伟，专注银行外包前端开发5年，核心技术栈为Vue3全家桶，熟练掌握银行前

个人介绍

面试官您好，我是黄伟，专注银行外包前端开发X年，核心技术栈为Vue3全家桶，熟练掌握银行前端开发的核心要点和外包项目的工作模式。

在过往银行外包项目中，我主要负责核心业务模块的前端开发、接口联调、安全加固和问题修复，重点落实了密码加密、敏感信息脱敏、防重复提交、路由权限控制等银行必备需求，严格遵循行内合规要求和代码规范，确保页面交互严谨、数据安全可控。

作为外包开发，我具备较强的沟通对接能力和快速适配能力，能快速理解行内需求和业务逻辑，高效配合行内团队完成需求评审、测试验证、上线验收等全流程工作，同时注重细节，主动排查潜在的安全隐患和体验问题，确保项目交付质量。我熟悉银行外包项目的时间节点管控和交付标准，能够承受一定的工作压力，高效完成各项开发任务，助力项目顺利推进

银行项目前端开发核心模块（全场景梳理）

银行前端和普通互联网前端完全不同，核心是安全、严谨、合规、高可用，所有模块都围绕资金交易、账户管理、风控、监管要求展开。

一、核心业务模块（最主要工作）

1. 账户与身份认证模块

银行最基础、最核心的入口

登录 / 登出、多因素认证（短信、人脸、U 盾、令牌）
身份核验、实名认证、人脸核身、OCR 识别身份证 / 银行卡
密码管理、安全问题、设备绑定、登录日志
个人 / 企业信息管理、资料修改、地址管理

2. 资金交易模块（核心中的核心）

所有和钱相关的页面、交互、校验

转账汇款（同行、跨行、对公、对私）
支付缴费（水电煤、话费、税费、物业费）
信用卡还款、账单查询、分期
大额交易校验、限额控制、交易密码
交易结果页、回执、凭证下载

3. 存款 / 理财 / 投资模块

银行盈利相关前端

活期 / 定期存款、存款产品购买
理财产品列表、详情、风险评估、购买 / 赎回
基金、贵金属、国债、保险代销页面
收益展示、持仓明细、交易记录

4. 贷款模块

额度申请、授信、征信授权
贷款产品、利率展示、还款计划
借据、合同签署（电子签章）
还款、逾期管理

5. 银行卡管理

储蓄卡 / 信用卡查询、挂失、冻结、解冻
限额设置、支付开关、闪控管理
换卡、补卡、邮寄进度查询

二、风控与安全模块（银行前端独有重点）

银行前端必须做安全，这是区别点：

防钓鱼、防篡改、敏感信息加密
交易风险提示、异常行为拦截
短信 / 邮件 / APP 推送风控提醒
登录环境检测、设备风险判断
合规弹窗、风险告知、用户协议确认

三、运营与服务模块

1. 消息与通知

站内信、交易推送、公告
营销活动、优惠提醒、到期提醒

2. 客服与帮助

在线客服、智能问答机器人
常见问题、使用指南、视频教程

3. 网点与服务

网点查询、ATM 查询、路线导航
预约开户、预约取号、排队查询

四、后台 / 管理端模块（给银行员工用）

很多银行前端项目是给内部员工用的，工作量极大：

员工登录、权限管理
客户信息管理、工单系统
业务审核、风控审核
报表统计、数据可视化（交易、资金、用户）
运营配置、活动上下架、公告发布

五、多端形态（银行前端会覆盖这些端）

PC 网银（最传统、最严谨）
手机银行 H5/APP 内嵌页（主流）
微信银行 / 支付宝银行小程序
银行内部管理系统（中后台）
智能柜台前端（大厅机器）
PAD 移动展业（客户经理办业务）

六、银行前端的技术特点（你必须知道）

安全要求极高：加密、防 XSS、防 CSRF、防劫持
交互极其严谨：每一步都有校验、提示、确认
合规要求强：必须展示风险提示、协议、费率
兼容性要求高：支持老旧浏览器、低版本手机
稳定性优先：不能崩溃、不能白屏、不能丢数据

银行项目前端（网银、手机银行、柜面系统等），主要做 客户 / 柜员交互层，核心是 安全、稳定、合规、体验好。

一、核心业务模块（最常开发）

1. 认证与安全中心（必做）

登录 / 登出、会话超时、设备绑定
短信验证码、人脸识别、指纹、令牌
密码 / 手势 / 人脸修改、找回、锁定
登录日志、异常提醒、风险拦截

2. 账户总览

多账户：储蓄卡、信用卡、定期、理财、贷款
余额、可用余额、冻结金额、昨日收益
账户详情、开户行、卡号脱敏、状态（正常 / 挂失）

3. 交易与流水（高频）

转账：同行 / 跨行、收款人管理、限额控制
缴费：水电、话费、信用卡还款
交易记录：筛选、分页、导出（Excel/PDF）
余额不足、重复提交、超时重试、状态轮询

4. 存款与理财

活期 / 定期 / 大额存单：存入、支取、转存
理财列表、风险测评、购买 / 赎回、持仓明细
基金、贵金属、外汇行情与交易

5. 贷款

我的贷款、额度、还款计划、提前还款
申请：资料填写、上传、进度查询
合同、借据、还款提醒

6. 信用卡

账单、还款日、最低还款、分期
额度、临时调额、锁卡、挂失、补卡
积分、权益、优惠券

7. 个人中心

实名认证、信息修改、地址管理
消息中心、推送、站内信
客服、意见反馈、帮助中心

8. 后台 / 柜员端（银行内部）

客户信息查询、开户、挂失、解冻
业务审核、大额交易复核
权限管理（RBAC）、操作日志、审计

前端必做业务模块（面试高频）

登录认证账号密码、短信验证码、图形验证码、人脸识别、会话超时、单点登录
账户中心我的账户、银行卡列表、余额展示、卡号脱敏、账户状态管理
转账汇款行内转账、跨行转账、收款人管理、转账限额、重复提交拦截、结果轮询
交易流水 / 明细列表、筛选、分页、导出 Excel/PDF、日期范围选择
理财 / 基金 / 存款产品列表、风险测评、购买赎回、持仓、收益展示
信用卡账单、还款日、分期、额度、积分、权益
个人中心信息管理、消息中心、操作日志、安全设置
柜员后台 / 管理端客户信息、业务审核、权限控制、操作留痕

三、前端高频组件（你一定要会说）

表单校验（必填、格式、异步校验）
表格（多选、分页、合计、导出）
弹窗 / 步骤条（业务办理流程）
下拉选择器、级联选择
上传（身份证、银行卡、资料）
数字输入框（金额、保留两位小数）
日历、日期范围选择
懒加载、下拉刷新、上拉加载
加密键盘、密码框

二、前端技术与特殊要求

技术栈：Vue3/React + TS + Pinia/Vuex + Element Plus/AntD/Vant
架构：SPA、微前端、多端适配（PC/H5 / 小程序）
安全：
- 敏感信息加密传输
- 防 XSS、防 CSRF、签名 / 验签
- 输入严格校验、防注入
体验：
- 加载状态、骨架屏、错误重试
- 弱网 / 断网处理、数据缓存
- 操作确认、结果反馈、防重复提交

三、一句话总结

银行前端 = 账户 + 交易 + 理财 + 贷款 + 信用卡 + 安全认证 + 合规风控，特点：表单多、弹窗多、校验严、状态复杂、安全要求极高。

Vue3 + 银行项目面试高频题（高频到几乎必问）

Vue3 相比 Vue2 有哪些主要改进？
- 响应式从 defineProperty → Proxy
- 支持 Tree-shaking
- Composition API 更好逻辑复用
- 更小体积、更好 TS 支持
- 新生命周期（setup 替代 beforeCreate/created）
script setup 有什么优势？
- 更简洁
- 声明即导出，无需 return
- 更好 TS 类型推导
- 组件注册更简单
ref 和 reactive 的区别与使用场景？
- ref：基础类型、简单值
- reactive：对象 / 数组
- 注意：reactive 解构丢失响应式，用 toRefs
computed 和 watch 区别？
- computed 有缓存，依赖变化才更新
- watch 更适合异步、开销大操作
watch 和 watchEffect 区别？
- watch 需指定依赖
- watchEffect 自动追踪，立即执行一次

（2）Vue3 进阶高频

Vue3 响应式原理简单说一下（ Proxy 拦截 get/set，收集依赖，触发更新。）
**Vue3 自定义 hooks 怎么写？有什么好处？

- **把复用逻辑抽离，如 useRequest、useForm、useAuth。
- 好处：逻辑清晰、便于测试、减少组件臃肿。

**Vue3 中 v-if 和 v-for 优先级？**Vue3 中 v-if 优先级更高，不建议同标签使用。
setup 中怎么获取路由和 store？
- useRouter / useRoute
- usePinia + 对应 store
Vue3 父子组件通信方式？
- props / emit
- v-model
- defineExpose
- provide / inject
- mitt / pinia

（3）路由 & 权限（银行项目必问）

路由守卫有哪些？项目里怎么用？
- beforeEach 权限校验、登录判断
- afterEach 埋点、日志银行场景：未登录拦截、未授权页面拦截、敏感操作二次验证。
**动态路由怎么实现？

**后端返回菜单 → 前端过滤、addRoute 挂载。银行重点：按钮级权限、菜单权限、数据权限。

（4）Pinia 状态管理

Pinia 相比 Vuex 优势？
- 简洁，无 mutation
- 更好 TS
- 无需命名空间
- 天然支持组合式
Pinia 数据持久化怎么做？pinia-plugin-persistedstate 配合 localStorage/sessionStorage。银行注意：敏感信息不能存在本地。

（5）银行项目安全 & 业务必考题（非常重要）

**前端密码怎么加密？**登录密码、交易密码：RSA 公钥加密后传给后端。
XSS、CSRF 怎么防范？
- XSS：转义、CSP、不渲染危险 HTML
- CSRF：token、SameSite、Referer 校验银行项目必问。
敏感信息怎么处理？
- 手机号、身份证脱敏显示
- 禁止控制台打印
- 禁止 localStorage 存明文
**表单校验怎么做？**正则 + 异步校验（身份证、银行卡号 Luhn 算法）。
**交易防重复提交怎么实现？**按钮禁用 + 防抖 + 接口幂等 + 状态锁。
**银行项目常见性能优化？**路由懒加载、虚拟列表、图片懒加载、分包、gzip。

（6）工程化 & 打包

**Vite 为什么比 Webpack 快？**依赖预构建 + esbuild 编译 + 按需加载。
环境变量怎么管理？.env.development/.env.production/.env.test银行多环境：开发、联调、UAT、生产、灰度。
**代码规范怎么做？**ESLint + Prettier + Husky + lint-staged。

银行项目前端完整开发流程（行内 / 外包通用）

1. 需求阶段

产品 PRD、原型
参与需求评审（重点关注：合规、风控、安全提示）
输出前端评估（页面、接口、权限、加密点）

2. 设计与排期

UI 设计稿（蓝湖 / 摹客）
技术方案：路由、store、权限、加密方案
排期、拆分任务

3. 开发阶段（标准流程）

搭建 / 拉取项目骨架
配置路由、权限、axios 拦截器
封装通用 hooks：useRequest、useForm、useAuth
页面开发
表单校验、按钮权限、脱敏展示
加解密逻辑接入
联调后端接口

4. 自测与联调

自测：正常流程、异常流程、边界值
接口联调：参数、错误码、状态码
安全自测：明文、日志、重复提交

5. 提测与 Bug 修复

提测到测试环境
修复功能 Bug、体验 Bug、安全 Bug银行测试非常严：一笔交易要测几十条用例

6. 代码评审 & 合入

CR（Code Review）
合并到 develop/test 分支
禁止硬编码、禁止敏感信息提交

7. 灰度 / 上线

打包构建
部署到预发 → 灰度 → 生产
上线验证、监控

8. 运维与复盘

线上问题排查
日志、监控、性能分析
需求复盘

银行 Vue3 前端 10 道模拟面试题（标准答案版）

1. 你们银行项目用的什么技术栈？

**答：**项目采用 Vue3 + Vite + Element Plus 开发，状态管理用 Pinia，路由用 Vue Router4，接口用 Axios 封装，密码与敏感信息使用 RSA + AES 加密，代码规范用 ESLint + Prettier，多环境区分开发、测试、UAT、生产。

2. Vue3 响应式原理简单说下

**答：**Vue3 使用 Proxy 代理对象，拦截 get/set 等操作，在 get 时收集依赖，set 时触发依赖更新，实现响应式。相比 Vue2 的 Object.defineProperty，能监听数组、新增属性、删除属性，性能更好。

3. ref 和 reactive 区别，项目怎么选？

答：

ref 用于基础类型（string/number/boolean），访问需要 .value
reactive 用于对象和数组，不需要 .value，但解构会丢失响应式项目中：表单简单字段用 ref，复杂数据对象用 reactive，解构时用 toRefs。

4. 银行项目里路由权限怎么做？

答：

登录后获取用户角色 / 菜单列表
通过 addRoute 动态添加路由
全局路由守卫 beforeEach 校验是否登录、是否有权限
无权限跳 403 或登录页同时配合 按钮级权限指令，控制增删改查按钮显示隐藏。

5. Pinia 相比 Vuex 好在哪？

答：

去掉 mutation，action 支持同步异步
天然支持 TS，类型推导友好
不需要命名空间，模块更清晰
支持组合式 API，和 Vue3 更契合项目中用 pinia-plugin-persistedstate 做持久化，但敏感信息不存本地。

6. 银行前端密码怎么加密？为什么不能明文？

**答：**登录密码、交易密码使用 后端返回的 RSA 公钥加密，再传给后端。明文传输会被抓包，存在安全风险，银行等保要求必须加密，禁止明文传输、禁止明文打印日志。

7. 如何防止 XSS 和 CSRF？

答：

XSS：对用户输入转义，不直接使用 v-html，配置 CSP，过滤特殊字符
CSRF：接口携带 token，设置 SameSite，校验 Referer银行项目还会做环境检测、设备风险识别、异地登录提醒。

8. 交易按钮怎么防止重复提交？

答：

点击后立即 disabled 禁用按钮
接口添加防抖 / 节流
请求加全局 loading，同一请求未返回不能再次发起
后端做幂等校验，前端传唯一请求序列号

9. 敏感信息（身份证、手机号）怎么展示？

**答：**前端做脱敏处理：

手机号：138****1234
身份证：110***********1234同时禁止在控制台打印、禁止存在 localStorage，接口返回也只返回脱敏后字段。

10. 银行项目表单校验有哪些难点？

答：

银行卡号 Luhn 算法校验
身份证合法性校验（长度、校验位、出生日期）
金额输入限制：只能数字、两位小数、不能输入负数
联动校验：产品类型变，校验规则跟着变
提交前全表单校验，不通过阻止提交

银行项目 “难点 & 解决方案” 标准回答（面试加分）

1. 难点：权限体系复杂（菜单 + 按钮 + 数据权限）

**答：**项目权限粒度很细，不仅要控制菜单，还要控制按钮和数据范围。解决方案：

登录后拉取权限码，全局存储
封装自定义指令 v-permission 控制按钮显隐
动态路由根据权限过滤
数据权限通过接口参数控制展示范围最终实现完整的权限闭环。

2. 难点：交易流程严谨，校验多、弹窗多、状态复杂

**答：**转账、理财购买等流程步骤多、校验规则复杂。解决方案：

把校验逻辑抽成 hooks，统一管理
步骤状态用 Pinia 全局维护，避免组件间传值混乱
统一错误提示与异常处理，提升体验
边界值、异常流程全部覆盖自测，保证交易安全。

3. 难点：安全要求高，容易踩坑

**答：**银行对明文、日志、缓存要求非常严格。解决方案：

所有敏感字段前端加密，禁止 localStorage 存敏感信息
关闭 console 打印，禁止输出用户信息
做防重复提交、防篡改、超时机制
配合测试做安全扫描，及时修复风险点。

4. 难点：多人协作，代码规范混乱

**答：**项目人员多，容易风格不一致。解决方案：

统一 ESLint + Prettier 规则
使用 Husky 做提交前校验
公共逻辑抽成 hooks / 工具函数
定期 Code Review，保证代码质量。

技术基础面试题

面试官： 说一下Vue3相比Vue2的核心改进？

候选人： 第一，响应式从Object.defineProperty换成Proxy，能监听数组、新增删除属性，性能更好；第二，推出Composition API，逻辑复用更清晰；第三，打包体积更小，支持Tree-Shaking；第四，对TS支持更友好，生命周期优化，script setup语法更简洁高效。

面试官： ref和reactive的区别，项目里怎么使用？

候选人： ref用于基础数据类型，取值需要.value；reactive用于对象和数组，不需要.value，但是解构会丢失响应式，需要用toRefs处理。项目里表单单个字段用ref，复杂对象、表格数据用reactive。

面试官： watch和watchEffect的区别？

候选人： watch需要手动指定监听的数据源，不会立即执行；watchEffect会自动收集依赖，初始化就会执行一次，适合依赖不固定、需要自动监听的场景，比如表单联动、数据实时计算。

面试官： Vue3父子组件通信有哪些方式？

候选人： 常用props+emit、v-model、defineExpose、provide/inject，跨组件通信用Pinia，简单事件通信用mitt。

路由、状态管理专项题

面试官： 你们项目路由权限是怎么实现的？

候选人： 登录成功后获取用户角色和菜单权限列表，通过全局路由守卫beforeEach做登录校验、权限校验，无权限跳转403；通过addRoute动态挂载路由，同时封装自定义权限指令，控制页面按钮级别的显隐，完整实现菜单+按钮的权限管控。

面试官： Pinia相比Vuex有什么优势？

候选人： Pinia去掉了mutation，action支持同步异步，写法更简洁；天然支持TS，类型推导更友好；不需要命名空间，模块拆分更清晰；和Vue3组合式API完全契合，使用更灵活，项目里用持久化插件做非敏感数据缓存。

面试官： Pinia数据持久化需要注意什么？

候选人： 禁止存储密码、交易信息、身份证、手机号等敏感数据，只缓存用户基础信息、菜单权限等非敏感内容，敏感数据全部存在内存里，页面销毁就清空，符合银行安全规范。

银行安全、业务核心必考题

面试官： 银行项目密码、敏感信息怎么处理？

候选人： 登录密码、交易密码全部用后端返回的RSA公钥加密后再传输，绝对禁止明文传参；手机号、身份证号前端做脱敏展示，禁止控制台打印、禁止本地存储明文，所有敏感接口都做加密处理，符合等保要求。

面试官： 怎么防范XSS、CSRF攻击？

候选人： XSS方面，对用户输入内容做转义，不随意使用v-html，配置CSP策略，过滤特殊字符；CSRF方面，接口统一携带token，设置Cookie SameSite属性，校验请求来源，银行项目还会增加设备校验、环境检测、异地登录提醒。

面试官： 交易按钮怎么防止重复提交？

候选人： 第一，点击后立即禁用按钮，添加loading状态；第二，接口添加防抖，同一请求未完成不能再次发起；第三，前端生成唯一请求幂等号传给后端；第四，后端做幂等校验，多重保障避免重复交易。

面试官： 银行表单校验有哪些特殊要求？

候选人： 除了基础必填校验，还要做银行卡号Luhn算法校验、身份证合法性校验、金额格式限制（只能数字、两位小数、非负数）、联动规则校验，所有校验不通过绝对禁止提交，交易类表单必须二次确认弹窗。

面试官： 项目里遇到的最大难点是什么，怎么解决的？

候选人： 最大难点是银行权限体系复杂，需要同时控制菜单、按钮、数据权限，还有交易流程校验多、状态联动复杂。解决方案是封装统一的权限指令和工具函数，把校验逻辑抽成自定义Hooks，全局维护交易状态，拆分组件降低复杂度，全覆盖边界场景自测，保证业务稳定和安全合规。

工程化、项目流程题

面试官： 你们银行项目完整开发流程是什么？

候选人： 标准流程是需求评审→技术方案设计→开发搭建→页面开发→安全处理→接口联调→自测→提测→Bug修复→Code Review→预发布验证→灰度上线→线上监控，全程严格遵守银行合规和安全要求。

面试官： 项目怎么保证代码规范？

候选人： 项目配置ESLint+Prettier统一代码格式，Stylelint管控样式规范，用Husky做提交前校验，禁止不合规代码提交，同时定期做Code Review，保证团队代码风格统一、质量可控。

银行外包最爱问的技术点（高频 12 题）

1. 路由权限怎么做？

路由表配置权限字段
登录后获取角色权限
全局守卫判断是否允许进入
无权限跳 403

2. 按钮权限怎么实现？

自定义指令 v-permission
全局混入判断权限列表
满足则显示，不满足则隐藏或禁用

3. 怎么防止重复提交？

提交按钮立即 disable
请求加防抖
请求前生成唯一 key，接口返回前禁止再次发起
后端做幂等校验

4. 敏感信息怎么脱敏？

银行卡号：6228 **** **** 1234
身份证：1101********1234
手机号：138****1234
前端过滤器 / 指令统一处理

5. Axios 怎么封装？

请求拦截：加 token、加签名、加请求头
响应拦截：统一处理成功 / 失败提示
401 跳登录，500 提示系统异常
全局 loading、错误捕获

6. 表单校验怎么做？

必填校验
金额格式（最多两位小数）
手机号、身份证、银行卡号规则
异步校验（如账户合法性）

7. 转账状态不确定怎么处理？

提交后不直接判定成功失败
定时轮询查询结果接口
超时提示 “处理中，请稍后查询”

8. 登录过期怎么处理？

axios 拦截 401
清除 token & 缓存
跳转到登录页并提示登录已过期

9. 微前端在银行系统干嘛？

把存款、贷款、信用卡、运营后台等多个系统
整合到一个门户，独立部署、独立运行

10. 导出 Excel / 打印怎么实现？

前端：xlsx 库生成
后端：返回文件流，前端下载
表格分页数据全部导出

11. 银行项目安全点有哪些？

防 XSS：转义内容
防 CSRF：token 校验
密码、敏感信息加密传输
接口签名防篡改
操作日志留痕

12. 弱网 / 异常怎么处理？

断网提示
请求超时重试
异常状态页（空数据、错误、加载中）
防止页面卡死

Vue 基础（必问）

1. Vue2 和 Vue3 响应式区别

Vue2：Object.defineProperty 劫持对象属性，数组需重写方法，对象新增 / 删除属性不响应
Vue3：Proxy 代理整个对象，支持数组、对象新增删除，性能更好

2. ref 和 reactive 区别

ref：支持所有类型，取值要 .value，可整体替换
reactive：只能对象 / 数组，不用 .value，不能整体替换
解构 reactive 会丢失响应式，ref 不会

3. watch 和 watchEffect 区别

watch：手动指定依赖，懒执行，可拿新旧值
watchEffect：自动收集依赖，立即执行，只能拿最新值

4. toRef /toRefs 作用

解决 reactive 解构丢失响应式问题
toRef：把对象一个属性转 ref
toRefs：把对象所有属性批量转 ref

5. computed 和 watch 区别

computed：计算属性，有缓存，依赖变才重新计算
watch：监听属性，无缓存，适合异步 / 复杂逻辑

6. Vue3 生命周期

setup 内部：

onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted

7. 组件通信

父子：props /emit
爷孙：provide /inject
兄弟：eventBus / 状态库
全局：pinia/vuex

8. v-if 和 v-show

v-if：真正销毁 / 创建，切换开销大
v-show：只是 display:none，初始化开销大

9. v-for 为什么要 key

给 Vue 标识节点，方便diff 算法复用节点，提升渲染效率
不要用 index 做 key（顺序变化会错乱）

10. 双向绑定原理

数据通过响应式更新视图
视图通过 input 事件同步数据
v-model 本质是 :value + @input

二、项目实战（银行高频）

1. 路由权限

路由配置 meta 权限字段
全局路由守卫判断权限
无权限跳 403 或登录页

2. 按钮权限

自定义指令 v-permission
登录后获取权限列表
匹配不上则隐藏 / 禁用按钮

3. axios 封装

请求拦截：加 token、签名、请求头
响应拦截：统一提示、错误处理
401 自动跳登录
全局 loading、防重复提交

4. token 过期

响应拦截判断 401
清除本地存储
跳转到登录页并提示

5. 防止重复提交

按钮点击后禁用
防抖节流
请求加唯一标识，未返回前禁止重复请求

6. 敏感信息脱敏

银行卡：6228 **** **** 1234
身份证：1101********1234
手机号：138****1234
封装过滤器或函数统一处理

7. 转账状态不确定

提交后不直接展示结果
轮询查询接口
超时提示 “处理中，请稍后查询”

8. 长列表优化

虚拟列表
分页加载
图片懒加载
减少不必要渲染

9. 导出 Excel

后端返回文件流
前端通过 a 标签下载
或用 xlsx 库导出

10. 文件上传

前端校验格式 / 大小
FormData 上传
进度条、预览、删除、限制上传数量

三、银行安全题（必考）

1. XSS

跨站脚本攻击，注入恶意脚本
防御：转义特殊字符、使用 textContent、CSP

2. CSRF

跨站请求伪造
防御：token 验证、SameSite、校验 referer

3. 接口签名

防止参数被篡改
按规则拼接参数 + 密钥加密生成 sign
后端验签

4. 敏感信息加密

密码、身份证、卡号用 RSA/AES 加密
不明文传输、不明文存 localStorage

5. 会话超时

后端设置过期时间
前端定时检测
超时自动退出登录

6. 为什么用 TS

类型约束，减少线上 bug
代码提示强，便于维护
银行系统要求严谨安全

JS 基础 & 手写题答案

1. 防抖（高频手写）

function debounce(fn, delay) {
  let timer = null
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

2. 节流

function throttle(fn, delay) {
  let flag = true
  return function (...args) {
    if (!flag) return
    flag = false
    setTimeout(() => {
      fn.apply(this, args)
      flag = true
    }, delay)
  }
}

3. 手机号脱敏

function maskPhone(phone) {
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

4. 金额格式化

function formatMoney(num) {
  return Number(num).toFixed(2)
}

5. 深拷贝简单版

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj
  const res = Array.isArray(obj) ? [] : {}
  for (let k in obj) {
    res[k] = deepClone(obj[k])
  }
  return res
}

六、工程化

跨域

开发环境：devServer 代理
生产：Nginx 反向代理

环境变量

.env.development / .env.production
通过 import.meta.env/process.env 获取

七、银行场景题一句话答案

转账流程表单填写 → 校验 → 加密提交 → 等待结果 → 轮询 → 展示成功 / 失败
多步骤表单暂存每步 change 存 localStorage/pinia，进入页面自动回填
弱网处理断网提示、请求重试、异常状态页、防止重复提交
分页搜索页码、页数、搜索条件作为参数请求接口，重新渲染列表

银行移动端（H5 / 小程序 / APP 内嵌页）前端都做什么

一、登录与安全模块（必做）

手机号快捷登录、密码登录、短信验证码
手势密码、指纹登录、面容登录
图形验证码、滑块验证
会话超时、异地登录提醒、强制下线
找回密码、重置密码、修改密码

二、账户总览模块

银行卡列表（储蓄卡、信用卡）
余额、可用余额、冻结金额、昨日收益展示
卡号脱敏、一键复制、开户行信息
账户挂失、解除挂失、升降级

三、转账汇款（核心业务）

行内转账、跨行转账
常用收款人管理、智能联想
转账限额展示与判断
转账结果页、处理中状态
转账撤销、转账备注
弱网 / 超时轮询查询结果

四、交易明细 / 流水

按时间、金额、类型筛选
上拉加载更多、下拉刷新
流水详情、订单号、对手信息
导出、分享、回显

五、生活缴费

话费充值、流量充值
水费、电费、燃气费
物业费、宽带、有线电视
缴费历史、常用缴费项

六、信用卡模块

账单查询、还款日提醒
账单分期、最低还款
额度管理、临时调额
积分查询、积分兑换
信用卡还款

七、存款 / 理财 / 基金

活期、定期、大额存单
风险测评问卷
理财产品列表、收益曲线
购买、赎回、持仓明细
基金行情、定投

八、贷款模块

我的贷款、还款计划
额度测算、申请借款
身份认证、人脸核验
资料上传（身份证、银行卡）
提前还款、逾期记录

九、个人中心

个人信息管理
消息中心、推送通知
安全设置（设备管理、登录保护）
客服、意见反馈
关于我们、版本更新

十、公共业务组件（移动端必做）

金额输入键盘（自定义数字键盘）
身份证 / 银行卡 / 手机号脱敏
上传身份证正反面、OCR 识别
多步骤表单（步骤条）
弹窗协议、阅读倒计时
下拉刷新、上拉加载
空页面、加载中、异常页面

十一、安全与风控相关（银行特别看重）

防重复提交
敏感数据加密
防截屏、防录屏提示
操作留痕、行为日志
风险交易拦截页面

我在银行移动端项目主要负责：

登录安全、账户总览、转账汇款、交易流水、生活缴费、信用卡、理财贷款、个人中心等 H5 页面开发，

熟练处理表单校验、脱敏展示、自定义键盘、多步骤流程、弱网处理、防重复提交、接口轮询等移动端常见需求。

Vue 中如何做移动端适配？

postcss-px-to-viewport 把 px 转 vw
或 amfe-flexible + rem 适配
禁止用户缩放：meta viewport

**移动端点击 300ms 延迟怎么解决？

使用 fastclick 或 meta 设置 viewport
现代浏览器默认已解决。 **H5 页面如何阻止下拉回弹 / 橡皮筋效果？

touchmove 阻止默认行为，或用 CSS overscroll-behavior

业务难点 & 高频题（银行必考）

1. 转账页面金额输入怎么处理？

只能输入数字和小数点
最多两位小数
禁止以小数点开头
禁止输入多个小数点
大数分隔显示 12,345.67

2. 移动端如何防止重复提交？

按钮立即 disabled
防抖控制
请求加唯一标识，未返回前禁止再次提交
后端做幂等

3. 转账 / 支付结果不确定怎么处理？

提交后进入处理中页面，定时轮询查询结果接口，超时提示 “处理中请稍后查询”。

4. 敏感信息如何脱敏？

手机号：138****1234
身份证：110***********1234
银行卡：6228 **** **** 1234封装成过滤器或函数统一使用。

5. 移动端自定义数字键盘怎么做？

自己写 div 模拟 0-9、小数点、删除
监听点击，拼接金额字符串
控制格式、光标位置目的：防止系统键盘被劫持、安全合规。

6. H5 如何实现人脸识别 / 活体检测？

一般是接入 SDK：

跳人脸 H5 页面
调用相机
按提示完成动作
前端拿到 success/fail 回调前端主要做页面展示、状态跳转、结果回传。

7. 多步骤表单怎么实现？

步骤条进度展示
每一步校验
数据存在 pinia/localStorage
支持返回修改、最终统一提交

8. 上传身份证 / 银行卡怎么做？

调用相册 / 相机
前端校验格式、大小
压缩图片
FormData 上传
回显、重传、删除

9. 弱网 / 接口异常怎么处理？

展示 loading / 错误页
失败重试按钮
断网提示
避免白屏、卡死

10. 登录过期 / 超时怎么做？

axios 拦截 401 → 清除 token → 跳登录页 → 提示 “登录已过期”。

三、安全类（银行特别爱问）

1. H5 页面如何防 XSS？

渲染内容用 v-text 或转义
不直接插入 innerHTML
禁止外链恶意脚本

2. 如何防 CSRF？

请求带上 token，后端校验。

3. 密码、敏感信息怎么传？

前端用 AES/RSA 加密，绝不明文传输。

4. 如何防止页面被截屏 / 录屏？

前端做不到完全禁止，但可以：

进入重要页面提示风险
关键操作增加水印
重要信息脱敏展示

四、CSS & 移动端坑点

1. 移动端 1px 边框怎么实现？

transform: scaleY (0.5)或使用 box-shadow 模拟。

2. 键盘弹起压住输入框怎么办？

scrollIntoView
监听 resize 调整高度
使用固定布局避免挤压

3. 移动端滚动不流畅？

-webkit-overflow-scrolling: touch;

4. 页面弹窗导致背景滚动穿透怎么解决？

弹窗打开时给 body 设置 overflow:hidden，或阻止 touchmove 默认。

五、手写题（现场常考）

1. 金额格式化（保留两位小数）

function formatMoney(val) {
  val = val.toString().replace(/[^0-9.]/g, '')
  if (val.split('.').length > 2) val = val.slice(0, -1)
  return Number(val || 0).toFixed(2)
}

2. 手机号脱敏

function maskPhone(phone) {
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
}

3. 防抖（搜索 / 输入用）

function debounce(fn, delay) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => fn(...args), delay)
  }
}

六、面试官最爱问的 “场景题”

转账过程中接口超时了你怎么处理？ 不提示失败，进入处理中，轮询查询结果。
用户在转账时切后台 / 锁屏回来怎么办？ 检查登录态，超时则重登，未超时继续操作。
为什么银行 H5 喜欢用自定义键盘？ 安全，防止第三方键盘劫持、记录密码。
列表数据很多怎么优化？ 下拉刷新、上拉加载、分页、图片懒加载。

银行移动端 H5 难点 + 标准回答（面试直接背）

1. 安全要求高（加密、签名、防篡改）

**问题：**银行项目对安全要求极高，密码、身份证、银行卡不能明文传输。

你的回答：

前端使用 RSA 加密敏感字段，接口参数做 MD5/SHA 签名，防止被抓包篡改。
本地不存明文，token 存在内存或安全存储。
做 XSS 过滤、禁止执行外部脚本、关闭调试弹窗。
会话超时自动退出，异地登录强制下线。

2. 防重复提交、交易一致性

**问题：**转账、缴费容易重复点击，弱网下会重复扣款。

你的回答：

点击后立即 disable 按钮，加防抖控制。
全局封装 请求锁，同一订单号未返回前禁止重复请求。
后端做幂等，前端根据交易流水号轮询状态。
避免前端直接判断成功失败，统一以查询接口为准。

3. 弱网、异常处理

**问题：**网络差、超时、接口异常导致页面卡死。

你的回答：

封装 axios 统一处理超时、异常、断网提示。
关键交易（转账 / 缴费）进入 处理中页面，不直接展示结果。
提供 重试按钮，避免白屏和无反馈。
弱网下做轻量交互，减少大图和请求量。

4. 自定义安全数字键盘

**问题：**不能用系统键盘，防止被劫持监听。

你的回答：

封装了自定义安全键盘组件，支持数字、小数点、乱序键盘。
控制金额只能输入数字，最多两位小数，自动格式化。
处理光标定位、删除、输入长度限制。
解决 iOS/Android 键盘弹出、页面滚动冲突问题。

5. 复杂多步骤表单

**问题：**开户、贷款、信用卡流程长，数据容易丢失。

你的回答：

每一步表单实时 暂存到 Pinia 或 localStorage。
支持返回修改、重新进入页面自动回填。
做全字段校验、联动校验、异步校验（如卡号合法性）。
协议加倒计时，必须读完才能勾选下一步。

6. 敏感信息脱敏

**问题：**卡号、身份证、手机号必须脱敏展示。

你的回答：

封装全局过滤器 / 函数：
- 手机号：138****1234
- 身份证：1101********1234
- 银行卡：6228**** ****1234
复制、分享、截图场景也做脱敏。
日志和缓存严禁出现明文。

7. WebView 兼容性问题

**问题：**工行农行 App webview 版本低，iOS/Android 差异大。

你的回答：

处理键盘弹起顶起页面、底部按钮被遮挡问题。
修复橡皮筋回弹、滚动穿透、fixed 定位异常。
针对老旧 webview 做兼容样式，避免布局错乱。
统一弹窗、输入框、选择器交互规范。

8. 风控验证多，体验难平衡

**问题：**短信、人脸、滑块验证频繁，容易中断流程。

你的回答：

风控跳转后支持原路返回，保留表单数据。
验证失败自动重试，不丢失流程状态。
合理设计 loading 和提示，不影响体验。

9. 证件上传 & OCR

**问题：**身份证上传模糊、过大、格式不对。

你的回答：

前端做压缩、尺寸限制、格式校验。
接入 OCR 识别，自动填充姓名、身份证号。
处理反光、模糊、横屏拍摄等异常场景。

10. 交易状态多，容易展示错误

**问题：**转账 / 理财 / 贷款状态非常复杂。

你的回答：

后端返回状态码，前端做状态映射统一展示文案。
处理：处理中、成功、失败、待复核、过期、撤销等场景。
避免写死逻辑，提高可维护性。

银行移动端 H5 面试真题（高频・场景化・带标准答案）

适合工行 / 农行 / 建行外包面试，直接背。

一、安全与加密（必问）

问：银行 H5 如何防范 XSS、CSRF？答：XSS 用 DOMPurify 清洗输入、禁止 innerHTML、CSP 策略；CSRF 用 SameSite=Strict、防伪造 Token、校验 Referer/Origin。
问：敏感信息（密码、卡号）如何传输与存储？答：前端 RSA/AES 加密后传输，仅存密文；Token 放内存或 HttpOnly Cookie，禁用明文与本地存储。
问：如何实现接口防篡改与防抓包？答：参数 SHA256 签名 + 时间戳防重放；强制 HTTPS + 证书校验；关键接口加设备指纹与灰度拦截。

二、弱网与异常（高频）

问：弱网 / 断网时如何保证交易不重复、不失败？答：按钮禁用 + 防抖 + 请求锁；唯一订单号 + 后端幂等；“处理中” 中间态 + 轮询查询状态，前端不盲判成功。
问：接口超时 / 失败的重试策略有哪些？答：指数退避 + 最大重试次数；非幂等操作（支付）仅一次重试；失败时给重试按钮并提示原因。

三、自定义安全键盘（银行特色）

问：为什么不用系统键盘？如何实现自定义数字键盘？答：系统键盘易被劫持 / 监听；自定义乱序 / 随机键盘，限制金额两位小数，处理光标与删除，兼容 iOS/Android 键盘顶起。
问：自定义键盘遇到的兼容性问题怎么解决？答：统一封装组件，针对老旧 WebView 做样式兼容，处理 fixed 定位与滚动冲突，监听键盘弹起调整布局。

四、复杂表单与多步骤（必问）

问：开户 / 贷款流程长，数据丢失如何处理？答：实时暂存到 Pinia / 内存，支持返回修改与恢复；全字段联动校验，协议阅读倒计时 + 强制勾选。
问：如何做异步校验（如卡号合法性）？答：输入防抖 + 远程校验；失败时高亮提示并阻断下一步；前端与后端双重校验。

五、WebView 兼容性（高频）

问：农行 / 工行 App WebView 老旧的兼容性问题有哪些？答：键盘顶页面、fixed 异常、滚动穿透、橡皮筋回弹；用 viewport + 弹性布局适配，做样式降级与特性检测。
问：iOS 与 Android 差异如何处理？答：统一交互规范，针对系统差异做 hack；用 PostCSS/Autoprefixer 自动兼容，测试覆盖主流机型。

六、状态管理与体验（高频）

问：转账 / 理财状态多，如何避免展示错误？答：后端状态码 + 前端映射统一文案；处理 “处理中 / 成功 / 失败 / 待复核” 全场景，用状态机管理避免逻辑混乱。
问：如何平衡风控严格与用户体验？答：风控跳转后保留表单数据，支持原路返回；失败自动重试，合理设计 Loading 与提示，减少中断。

七、图片 / OCR 与性能（常问）

问：证件上传（身份证 / 人脸）如何压缩与校验？答：前端压缩（WebP / 质量压缩）、限制尺寸与大小；校验格式 / 清晰度；配合 OCR 识别并防反光 / 逆光。
问：银行 H5 的性能优化手段？答：懒加载 + 资源压缩 + CDN；HTTP/2 多路复用减少请求；骨架屏 + 缓存策略；弱网下轻量交互，减少大图与请求。

银行前端项目最常用的公共组件

1. 表单类（最多）

金额输入框限制数字、两位小数、千分位、最大金额、禁止非法输入
手机号 / 身份证 / 银行卡输入框自动格式化空格、长度校验、Luhn 校验、脱敏
验证码输入框短信验证码、数字验证码、自动聚焦、自动跳转
协议勾选组件阅读倒计时、必须勾选才能下一步、多行协议滚动
搜索框防抖搜索、历史记录、清空、联想提示

2. 安全类（银行特色）

自定义安全数字键盘数字键盘、随机乱序键盘、金额键盘、密码键盘
脱敏展示组件手机号、身份证、银行卡、姓名脱敏过滤器 / 指令
防重复提交按钮自带 loading、防抖、请求锁、禁用状态

3. 弹窗与反馈

通用弹窗提示框、确认框、结果弹窗、强提示弹窗
**底部弹出框（ActionSheet）**选择银行卡、选择账户、选择转账方式
全局 Toast / Loading成功、失败、处理中、加载状态
错误页 / 空状态页无数据、网络异常、系统异常、暂无流水

4. 业务流程类

步骤条组件开户、贷款、信用卡、风险测评多步骤流程
卡片组件银行卡展示、账户卡片、理财卡片
折叠面板交易详情、账单详情、流水展开收起

5. 列表与滚动

下拉刷新 + 上拉加载交易流水、明细列表、历史记录
通用表格还款计划、费率明细、资产列表
无限滚动列表长流水优化

6. 上传与 OCR

图片上传组件身份证、银行卡、人脸拍照上传
图片压缩 / 裁剪压缩大小、方向矫正、质量控制
OCR 结果回显自动填充姓名、身份证号、卡号

7. 权限与安全控制

权限按钮组件v-permission 按钮显隐、禁用控制
会话超时弹窗自动检测、倒计时、强制退出

8. 工具类组件

日期选择器账单日期、交易时间筛选
地区选择器开户行、省市区选择
数字滚动动画余额变化、收益变化动画
水印组件页面防截屏水印、客户号水印

前端银行外包面试宝典

个人介绍

银行项目前端开发核心模块（全场景梳理）

一、核心业务模块（最主要工作）

1. 账户与身份认证模块

2. 资金交易模块（核心中的核心）

3. 存款 / 理财 / 投资模块

4. 贷款模块

5. 银行卡管理

二、风控与安全模块（银行前端独有重点）

三、运营与服务模块

1. 消息与通知

2. 客服与帮助

3. 网点与服务

四、后台 / 管理端模块（给银行员工用）

五、多端形态（银行前端会覆盖这些端）

六、银行前端的技术特点（你必须知道）

一、核心业务模块（最常开发）

1. 认证与安全中心（必做）

2. 账户总览

3. 交易与流水（高频）

4. 存款与理财

5. 贷款

6. 信用卡

7. 个人中心

8. 后台 / 柜员端（银行内部）

前端必做业务模块（面试高频）

三、前端高频组件（你一定要会说）

二、前端技术与特殊要求

三、一句话总结

Vue3 + 银行项目 面试高频题（高频到几乎必问）

（2）Vue3 进阶高频

（3）路由 & 权限（银行项目必问）

（4）Pinia 状态管理

（5）银行项目安全 & 业务必考题（非常重要）

（6）工程化 & 打包

银行项目前端完整开发流程（行内 / 外包通用）

1. 需求阶段

2. 设计与排期

3. 开发阶段（标准流程）

4. 自测与联调

5. 提测与 Bug 修复

6. 代码评审 & 合入

7. 灰度 / 上线

8. 运维与复盘

银行 Vue3 前端 10 道模拟面试题（标准答案版）

1. 你们银行项目用的什么技术栈？

2. Vue3 响应式原理简单说下

3. ref 和 reactive 区别，项目怎么选？

4. 银行项目里路由权限怎么做？

5. Pinia 相比 Vuex 好在哪？

6. 银行前端密码怎么加密？为什么不能明文？

7. 如何防止 XSS 和 CSRF？

8. 交易按钮怎么防止重复提交？

9. 敏感信息（身份证、手机号）怎么展示？

10. 银行项目表单校验有哪些难点？

银行项目 “难点 & 解决方案” 标准回答（面试加分）

1. 难点：权限体系复杂（菜单 + 按钮 + 数据权限）

2. 难点：交易流程严谨，校验多、弹窗多、状态复杂

3. 难点：安全要求高，容易踩坑

4. 难点：多人协作，代码规范混乱

技术基础面试题

路由、状态管理专项题

银行安全、业务核心必考题

工程化、项目流程题

银行外包最爱问的技术点（高频 12 题）

1. 路由权限怎么做？

2. 按钮权限怎么实现？

3. 怎么防止重复提交？

4. 敏感信息怎么脱敏？

5. Axios 怎么封装？

6. 表单校验怎么做？

7. 转账状态不确定怎么处理？

8. 登录过期怎么处理？

9. 微前端在银行系统干嘛？

10. 导出 Excel / 打印怎么实现？

11. 银行项目安全点有哪些？

12. 弱网 / 异常怎么处理？

Vue 基础（必问）

1. Vue2 和 Vue3 响应式区别

Vue3 + 银行项目面试高频题（高频到几乎必问）