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

相关推荐
敏编程1 分钟前
网页前端开发之HTML入门篇:表格标签 table
前端·html
&活在当下&4 分钟前
js 将文件 url 地址转成 Blob 文件流并下载
前端·javascript·vue.js
shix .7 分钟前
vue3中setup的作用是什么?
前端·javascript·vue.js
AIoT科技物语31 分钟前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
编程的幸36 分钟前
前端三件套(HTML + CSS + JS)
前端·css·html
挂科边缘1 小时前
基于YOLOv8 Web的安全帽佩戴识别检测系统的研究和设计,数据集+训练结果+Web源码
前端·人工智能·python·yolo·目标检测·计算机视觉
谢尔登2 小时前
【React】styled-components 基本使用
前端·javascript·css
王解2 小时前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
GIS程序媛—椰子2 小时前
【Vue 全家桶】4、Vue中的ajax(http请求方法)
前端·vue.js
捻tua馔...2 小时前
react中ref使用支持父调用子组件的方法
前端·javascript