项目难点1动态多级菜单与面包屑匹配不完整问题在后台系统中因 Vue Router 的router.matched只能识别渲染链导致多级路由在动态菜单与面包屑中出现层级缺失。我通过解析当前 URL、拆分 path 片段、递归遍历动态路由树的方式构建出完整的层级结构解决隐藏路由、动态路由和多层嵌套导致的匹配失败问题。成果面包屑与侧边栏可正确显示任意多层嵌套路由100% 还原路由层级、避免缺少父级菜单完全兼容动态路由、hidden 路由、无组件路由大幅提升后台系统的稳定性与可维护性关键技术Vue / Vue Router路由树递归遍历动态路由生成与多级路径解析根据 path 自动构建导航层级✔ 简历可以这样写一句精简版解决了 Vue 动态多级路由中 breadcrumb / sidebar 层级丢失的问题通过 URL path 解析 路由树递归匹配构建完整导航链兼容隐藏路由、无组件节点等多种场景。 项目难点2PNG → WebP 图片批量压缩工具Web 后端 API项目名称PNG → WebP 图片批量压缩工具Web 后端 API项目周期3 周项目类型内部运维工具 / 企业后台管理项目描述开发一套可供运营人员使用的图片压缩工具支持单张图片或文件夹批量上传并将 PNG/JPG 图片转换为 WebP 格式保持原始目录结构。项目包含前端 Vue 页面和Python 后端 API提供上传、压缩、下载全流程功能并可部署在企业内网后台管理系统。核心职责 / 技术实现使用Vue 3 Element Plus实现前端文件选择、文件夹上传、上传进度条、文件列表、压缩结果展示和下载功能使用Python 3 Flask搭建后端 API实现文件接收、调用cwebp命令行工具进行图片压缩、生成 WebP 文件支持批量文件处理和目录结构保持自动生成下载链接及统计转换成功/失败/跳过数量前端假进度条动态显示压缩进度用户体验流畅考虑异常处理上传同名文件覆盖、非 PNG/JPG 文件跳过、转换失败提示提供完整的生产部署方案跨平台支持Windows/macOS/Linux、NginxGunicorn 或 Waitress 部署、目录权限和文件大小安全控制项目亮点 / 成就打通前端与 Python 后端接口实现运营人员无代码操作即可批量压缩图片完整交付文档运维可独立部署上线确保稳定性与安全性可用于后台管理系统提升图片管理和网站性能优化效率前端进度条实现平滑模拟增强用户操作反馈支持多文件、多文件夹上传同时保留原始目录结构技术栈前端Vue 3, Element Plus, JavaScript后端Python 3, Flask, subprocess 调用 cwebp工具libwebpcwebp, npm, Gunicorn/Waitress, Nginx部署跨平台Windows/macOS/Linux、Docker 可选