最近项目总结 - 2024最新版前端秋招面试短期突击面试题【100道】 ????

在这次项目总结中，我将介绍我参与的几个项目的背景、技术栈、项目架构以及在开发过程中遇到的亮点和挑战。这些经验不仅帮助我提升了技术能力，也让我更好地理解了团队协作和项目管理的重要性。

1. 大事件管理的后台管理系统

业务背景

这是一个针对大事件管理的后台管理系统，功能模块包括文章分类、文章管理、个人中心等。

技术栈

• 前端：ES6、Vue 3、Pinia、Vue Router、Vite、Axios、Element Plus、ESLint、Prettier
• 项目架构：单页应用（SPA）使用 Vue 3

项目亮点或问题

• 封装 Pinia：对 Pinia 进行了封装，增强了状态管理的灵活性和可维护性。
• 图片（文件）预览及上传：
  • 使用 el-upload 组件的 @change 事件获取上传文件的 raw 对象。
  • 通过 URL.createObjectURL 转换为 URL 进行预览，或使用 FileReader 读取文件内容。
  • 创建一个 FormData 对象，将文件添加到其中，并进行提交。
• 表格的分页渲染：
  • el-pagination 组件绑定 page、pageSize、total 属性。
  • 处理删除某一项时，如果为当前页最后一项，则执行 page - 1 的逻辑。
  • 表格自定义结构，通过 default 插槽获取到 row 值。
• 使用 Nginx 部署：
  • 使用 build 打包文件，配置云服务器，连接 Xftp 和 Xshell。
  • 使用 Xftp 上传 dist 打包文件，使用 Xshell 安装 Nginx，配置 Nginx。
• 侧边栏与面包屑：
  • 封装 sidebarItem 组件，通过 routes 获取路由信息，判断是否是一级路由并渲染侧边栏项。

---

2. 人力资源管理系统

业务背景

该项目是一个人力资源管理系统，包括主页、组织、角色、员工、权限等模块。

技术栈

• 前端：基于 Vue Element Admin 的二次开发，Vue 2、Vuex、Element UI、Vue Router

项目亮点或问题

• 配置代理跨域：在 config 文件中配置 proxy 代理，处理以 /api 开头的请求。
• 使用 Axios 封装 request：
  • 设置基础配置（baseURL，超时设置）。
  • 实现请求拦截器注入 token，响应拦截器处理错误提示。
• 权限鉴权封装：
  • 前置守卫：没有 token 不能进入主页并跳转到登录页。
  • 后置守卫：登录后不能再次进入登录页。
• 三种编辑模式：
  • 弹层编辑、行内编辑、路由跳转。
  • 通过设置 isEdit 控制当前行是否处于编辑状态，并处理数据修改和保存逻辑。
• 文件下载：设置 API 的 responseType 为 blob，使用 file-saver 库进行文件下载。
• COS（对象存储服务）上传：
  • 创建存储桶并配置跨域 CORS。
  • 使用 COS SDK 进行文件上传，并处理回调。

---