最近项目总结 - 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 进行文件上传,并处理回调。