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

相关推荐
Json_1817901448025 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
大数据编程之光31 分钟前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome