• 基础语言:HTML5 / CSS3 / JavaScript (ES6+)
• 框架 / 库:Vue2 (vue-router, vuex/pinia) / React (hooks, Redux) / jQuery
• UI 组件库:Element UI / Ant Design / Vant / TailwindCSS
• 工程化工具:Webpack / Vite / Git / ESLint / Prettier
• 网络与服务:Axios / RESTful API / 了解 Node.js (Express)
• 其他:小程序开发 (uni-app, 原生) / ECharts / 响应式 + 移动端适配
1. CPE 管理系统(Vue2 全家桶)
项目描述:
面向运营商 / 企业网管的客户终端设备(CPE)集中管理平台,实现设备状态监控、远程配置下发、批量固件升级、告警管理等功能。
技术栈:
Vue 2 + Vue Router + Vuex + Element UI + Axios + WebSocket + ECharts
职责与成果(完整负责前端):
独立完成前端架构:从 0 到 1 搭建项目,设计基于 vue-cli 的目录结构,配置路由懒加载、环境变量及 axios 全局拦截器。
核心模块开发:实现设备列表(支持高级筛选、自定义列)、详情仪表板、配置模板管理、固件升级任务等页面。
实时通信:集成 WebSocket 接收设备状态推送(在线/离线/告警),利用 Vuex 管理设备全局状态,ECharts 展示实时趋势图。
性能与体验优化:针对设备列表上千条数据,封装基于 vue-virtual-scroller 的虚拟滚动组件;配置模板使用 vue-json-editor;批量操作通过异步任务轮询展示进度。
权限控制:基于后端返回的权限码,动态渲染菜单及按钮级控制(自定义指令 v-permission + Vuex)。
成果:
系统上线后稳定支撑 5000+ 设备管理,批量配置下发时间由原来单台操作节省 90%,运维效率显著提升。
2. 文档管理系统(React Hooks)
项目描述:
企业内部知识库与文档协作平台,支持文档上传/下载、在线预览、多级目录、全文检索、团队共享及操作日志。
技术栈:
React 16+ + React Router v5 + Redux + Ant Design + Axios + Webpack
职责与成果(完整负责前端):
独立搭建前端工程:使用 create-react-app 自定义配置,集成 less-modules、eslint、prettier;采用 React Router 配置动态路由权限。
文件管理模块:开发文件列表(缩略图/列表模式切换)、多级目录树组件;实现分片上传与断点续传(spark-md5 计算 hash,localStorage 记录进度),支持大文件(最大 2GB)上传。
在线预览:基于 react-file-viewer 和自定义 iframe 实现图片、PDF、txt 预览,Office 文件接入 kkFileView 服务。
搜索与权限:全文搜索(调用后端接口高亮展示关键字),按角色(创建者/部门/只读)控制文档访问与操作权限,使用 Redux 管理用户会话和文档状态。
性能优化:路由懒加载 + React.memo 避免不必要渲染;使用 webpack-bundle-analyzer 分析并拆包,首屏加载减少约 30%。