面试总结

随机代码
10 阅读6分钟

1，elementui/antdesign 表格表单二次封装

项目中因为后台管理系统表格非常多，如果每一个页面都写一遍el-table会导致代码重复，配置不统一，修改成本高。所以我会封装通用的table组件，通过配置驱动渲染表格。 核心是通过column配置动态生成表格列，并统一处理分页，请求，loading,空状态等逻辑

性能优化

从三个层面，加载性能，运行性能，构建性能

  1. 资源压缩， gzip ,服务器开启 nginx gzip

  2. 图片优化 webp,懒加载，cdn

  3. 路由懒加载

  4. cdn 三方库 vue,react echarts走cdn

  5. 减少dom操作，v-if ,v-show,key

  6. 虚拟列表优化，vue-virtual-scroll-list

  7. 防抖节流

  8. 避免重复渲染 computed , memo

构建性能 通常打包体积大于500kb 或者 首屏加载慢，页面数量多

  1. 代码切割，splitChunks
  2. Tree Shanking 去掉未使用的代码
  3. elment-ui 按需加载 babel-plugin-import

项目难点

低代码平台

项目中我们开发了低代码，商户可以根据自己的产品配置缴费项目

  1. 表单JSON配置, 通过json配置来描述页面结构
  2. 动态渲染页面，根据json动态渲染组件
  3. 组件动态
  • 如何实现动态组件，维护一个组件映射表
  • 表单数据如何管理，一般可以维护一个统一的对象，但是我使用的是原数据

大文件上传

设备保修，视频上传，文件过大 问题，上传失败，网络中断，用户体验差。所以使用分片上传

  1. file.slice() 切片
  2. promise.all 并发上传
  3. uploadedChunks 断点续传
  4. md5计算

在项目开发中我比较注重工程化，比如封装组件，低代码配置开发，以及前端性能优化。

后台管理系统整体架构

  • vue - vue-router- pinia/vuex - axios - ui库 - 构建
  • 核心模块：登入认证-权限控制-动态路由-组件封装-接口请求-全局状态
  • 登入认证设计 获取token 携带token 通过本地存储在请求拦截中获取并携带
  • 权限控制，用户-角色-权限-菜单
  • 动态路由 动态菜单+动态路由
  • 请求层封装

一、低代码平台（2分钟回答模板）

你可以这样讲：

在扫码富缴费通项目中，我们实现了一套低代码表单配置系统，主要解决不同缴费项目表单结构不同的问题。例如物业缴费需要房号、姓名，而停车费需要车牌号，如果每个场景都开发一个页面维护成本会很高。

所以我们基于 VForm 表单设计器实现了可视化配置，通过拖拽组件生成 JSON Schema，然后把 Schema 存入数据库。用户扫码进入小程序后，前端会根据 Schema 动态渲染表单页面。

在实现过程中我们对 VForm 做了一些二次开发，比如新增业务组件（如金额输入、缴费类型选择），并增强了 Schema 的解析能力，支持字段校验、字段权限控制以及组件联动等功能。

这样系统就从传统的 代码驱动页面转变成 配置驱动页面，新增缴费项目只需要配置表单，不需要重新开发页面，大大提高了系统的扩展性和开发效率。

二、大文件上传（2分钟回答模板）

你可以这样讲：

在另一个项目中我们实现了大文件上传功能，因为有些文件可能达到几百MB甚至1GB，如果直接上传容易失败，所以我们采用了分片上传方案。

具体流程是：前端先把文件按固定大小进行切片，例如每片5MB，然后通过并发请求上传每个分片。服务器收到分片后会临时保存，并记录上传状态，当所有分片上传完成后再进行文件合并。

同时我们还实现了 断点续传和秒传机制。断点续传是通过记录已上传分片，用户重新上传时只需要上传缺失分片；秒传是通过计算文件的 MD5 hash，如果服务器已经存在该文件就直接返回成功，不需要重新上传。

通过这种方式可以显著提高大文件上传的稳定性和效率。

三、Vue后台系统架构（2分钟回答模板）

你可以这样讲：

我们的后台管理系统是基于 Vue 构建的，整体架构主要包括 权限系统、组件化设计和工程化管理。

在权限方面，我们实现了 动态路由 + 按钮权限控制。用户登录后后端返回可访问的菜单和权限列表，前端根据权限动态生成路由，并通过指令控制按钮是否显示。

在组件设计上，我们对常用组件进行了二次封装，比如对 Element UI 和 Ant Design 的表格和表单进行封装，统一处理分页、查询、表单校验等逻辑，提高开发效率。

在工程化方面，我们使用 Vite 构建项目，并对接口请求进行了统一封装，包括请求拦截、token处理和错误提示，同时通过模块化管理代码结构，使系统更容易维护和扩展。

ECharts

在项目中我们使用 ECharts 做数据可视化，比如折线图、柱状图和饼图。为了提高复用性，我封装了一个通用的 Chart 组件，通过 props 传入 option 配置来渲染图表。同时在组件内部处理了 resize 自适应和组件销毁时的 dispose，避免内存泄漏。在数据更新时通过 setOption 进行增量更新。如果数据量比较大，也可以通过 sampling 或 progressive 进行性能优化。

Nginx

前端项目上线时一般会通过 Nginx 部署打包后的 dist 文件，并通过 try_files 解决 Vue history 路由刷新 404 的问题。在生产环境中我们会保留多个版本目录，例如 release_1、release_2，然后通过软链接指向当前版本，这样如果新版本出现问题可以快速回滚。另外我们会通过文件 hash 解决浏览器缓存问题，HTML 设置不缓存，而 JS 和 CSS 设置长缓存，从而保证用户可以及时加载到最新版本

avatar
文章
阅读
粉丝