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

最近项目总结 - 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 组件绑定 pagepageSizetotal 属性。
    • 处理删除某一项时,如果为当前页最后一项,则执行 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 的 responseTypeblob,使用 file-saver 库进行文件下载。
  • COS(对象存储服务)上传
    • 创建存储桶并配置跨域 CORS。
    • 使用 COS SDK 进行文件上传,并处理回调。

相关推荐
前端小趴菜0517 分钟前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~1 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.2 小时前
serviceWorker缓存资源
前端
RadiumAg3 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo3 小时前
ES6笔记2
开发语言·前端·javascript
yanlele3 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子4 小时前
React状态管理最佳实践
前端
烛阴5 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
小兵张健5 小时前
武汉拿下 23k offer 经历
java·面试·ai编程
中微子5 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端