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

相关推荐
腾讯TNTWeb前端团队2 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
uhakadotcom5 小时前
视频直播与视频点播:基础知识与应用场景
后端·面试·架构
范文杰5 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪5 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪5 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy6 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom7 小时前
快速开始使用 n8n
后端·面试·github
uhakadotcom7 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom7 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom7 小时前
React与Next.js:基础知识及应用场景
前端·面试·github