创新项目实训纪实——总结与反思

一、项目概述

在本次小组项目中，我们共同开发了一个"基于大模型的算法教学与评测一体化平台"，该平台旨在为算法学习者提供一个集教学、练习、评测于一体的综合性学习环境。平台采用前后端分离架构，前端使用Vue.js框架实现，后端基于SpringBoot构建，数据库采用MySQL。我主要负责前端的主页页面、博客显示界面和个人信息界面的搭建，以及后端用户管理模块的开发，包括用户登录、注册、注销功能和管理员对用户的管理操作等功能。

二、工作内容总结

1. 前端开发部分

在前端开发中，我负责了平台三大核心页面的设计与实现：

（1）主页开发
主页作为平台的门户，我设计了简洁明了的布局结构，包含导航栏、轮播图展示平台特色、推荐阅读、热门博客展示等功能区域，还有随机每日一题和排行榜的功能。通过Vue Router实现了页面间的无缝跳转，与后端进行数据交互。特别注重了响应式设计，确保在不同设备上都能良好展示。

（2）博客界面
博客界面分为列表页和详情页两部分。列表页实现了分页加载、分类筛选、搜索等功能；详情页则包含文章内容展示、评论区和相关推荐。使用marked.js实现了Markdown格式的解析渲染，为用户提供了良好的阅读和写作体验。

（3）个人信息界面
该界面用于展示用户基本信息，我实现了信息编辑、头像上传、密码修改等功能模块，通过表单验证确保了数据的合法性，同时记录了该用户发布的博客和算法题解等，用户可以对这些进行增删和修改。

2. 后端开发部分

在后端开发中，我主要负责用户管理相关功能的实现：

（1）用户基础功能

• 注册功能：实现了用户名和密码校验，密码加密存储（使用MD5）。

• 登录功能：首先也是接收userloginrequest用于前后端传输用户登录数据，然后在账号密码不为空的情况下调用userService.userLogin() 完成登录逻辑。

• 注销功能：通过前端移除session实现安全退出。

（2）管理员功能

• 用户列表分页查询与条件筛选。

• 用户信息修改与账户状态管理（启用/禁用）。

• 普通用户与管理员角色权限分配与管理。

三、技术实现亮点

1. 前端组件化开发：通过Vue的组件化思想，将重复使用的UI元素（如导航栏、分页控件）抽象为独立组件，提高了代码复用性和可维护性。

2. 响应式设计：利用Flex布局和CSS媒体查询，使前端界面能够自适应不同屏幕尺寸，提升了移动端用户体验。

3. 友好的交互设计：通过Element UI组件库和自定义动画效果，增强了界面交互的流畅性和视觉反馈。

四、个人收获与成长

1. 技术能力的全面提升

（1）Vue.js 深入实践

• 组件化开发思维：通过搭建主页、博客和个人信息界面，我深入理解了 Vue 的组件化思想，学会了如何合理拆分 UI 为可复用的组件（如导航栏、卡片列表、分页控件等），提高了代码的模块化程度。

• 路由控制（Vue Router）：通过实现动态路由、导航守卫，我学会了如何控制页面访问权限（如未登录用户跳转至登录页），增强了前端的安全性。

（2）SpringBoot 后端开发实战

• JWT 认证机制：从零实现了基于 Token 的无状态登录，掌握了 JWT 的生成、校验、刷新流程，并解决了 Token 过期自动刷新的问题。

• Spring Security 整合：通过配置 Security 过滤器链，实现了基于角色的权限控制（如普通用户和管理员的接口访问限制）。

• RESTful API 设计：按照 REST 规范设计了用户管理接口（如 /api/users 的 GET/POST/PUT/DELETE），并采用统一响应格式（code、message、data）。

• 分层架构思想：Controller 层：只负责参数校验和路由转发（如 UserController）；Service 层：处理业务逻辑（通过 userService 调用）；DTO/VO 分离：UserAddRequest/UserUpdateRequest 用于接收参数（DTO），LoginUserVO/UserVO 用于返回前端（VO）

（3）工程化与团队协作

• 前后端联调经验：通过 Swagger 接口文档和 Postman 测试，提高了与后端同学的协作效率，减少了沟通成本。

• Docker 部署尝试：虽然最终未采用，但我初步学习了 Docker 容器化部署，为后续的学习打下基础。

---

2. 工程思维与问题解决能力

（1）从功能实现到系统设计

• 初期我只关注单个功能的实现（如登录按钮点击事件），但后期逐渐学会从系统角度思考，比如：

  • 数据流管理：如何让 Vuex 状态与 localStorage 同步，避免页面刷新后数据丢失。

  • 错误边界处理：对网络请求、表单提交等操作增加 loading 状态和错误提示，提升用户体验。

  • 可扩展性：在设计数据库时预留 role、status 等字段，便于后续权限系统升级。

（2）Debug 能力显著提升

• 前端调试：熟练调试分析 Vue 组件渲染、网络请求和性能瓶颈。

• 后端日志分析：通过 Logback 打印详细日志，结合异常全局处理（@ControllerAdvice），快速定位 BUG。

---

3. 团队协作与沟通能力

• API 接口约定：与后端同学共同制定接口规范（如状态码、数据格式），减少联调时的歧义。

• 需求理解与调整：在个人信息页开发中，与产品经理沟通后，将原本复杂的“学习数据看板”简化为更清晰的进度条+徽章系统。

• 代码 Review 习惯：通过 GitHub MR 接受队友的代码审查，学会了编写更清晰的提交信息（Commit Message）和注释。

---

五、不足与改进方向（详细版）

1. 代码质量与规范

（1）问题

• 风格不统一：初期未使用 ESLint + Prettier，导致部分代码缩进、命名不一致（如驼峰式 vs 短横线命名）。

• 冗余代码：有些组件存在重复逻辑（如表单验证），未及时抽离为 mixin 或 composable。

• 类型安全不足：未引入 TypeScript，导致一些运行时错误无法在编译阶段发现。

（2）改进措施

• 引入代码规范工具：配置 ESLint（Airbnb 规则）和 Prettier，实现自动格式化。

2. 性能优化不足

（1）问题

• 前端渲染性能：

  • 博客列表未分页加载，一次性请求全部数据，导致首屏延迟。

  • 图片未压缩，头像上传后直接显示原图，浪费带宽。

• 后端查询效率：

  • 用户管理页面的列表查询未优化 SQL，全表扫描影响性能。

  • 频繁查询数据库获取用户信息，未合理使用缓存（如 Redis）。

（2）改进措施

• 前端优化：

  • 实现无限滚动（infinite scroll）或分页加载。

  • 使用 webp 格式压缩图片，并采用 CDN 加速。

• 后端优化：

  • 对高频查询接口添加 Redis 缓存。

  • 使用 MyBatis-Plus 的 QueryWrapper 优化 SQL，避免 SELECT *。

3. 测试覆盖率低

（1）问题

• 前端测试：仅手动测试了核心流程（如登录、博客发布），未编写 Jest 单元测试。

• 后端测试：用户管理模块的 Service 层逻辑缺乏 JUnit 测试，边界条件（如空列表、异常输入）覆盖不全。

（2）改进措施

• 前端：针对核心组件（如登录表单）编写 Jest + Vue Test Utils 单元测试。

• 后端：使用 Mockito 模拟数据库操作，确保 Service 层逻辑正确性。

• E2E 测试：引入 Cypress 或 Postman 自动化测试，覆盖关键用户流程。

4. 项目文档不完善

---

六、总结

通过本项目，我不仅掌握了 Vue + SpringBoot 全栈开发 的核心技能，更重要的是培养了 工程化思维 和 问题解决能力。未来我会深入性能优化，学习 Webpack 打包优化、数据库索引优化等高级技巧。强化测试与安全：实践 TDD 开发模式，研究 OWASP 安全最佳实践。探索新技术：尝试微服务（Spring Cloud）或 SSR（Nuxt.js），提升架构设计能力。

这段经历让我意识到，优秀的开发者不仅要实现功能，更要关注代码质量、性能和可维护性。我会持续迭代改进，朝着更高水平迈进！

项目实训到这就告一段落了，回想起来是忙碌又充实的，收获颇丰，也为编程能力的进步打下了基础，让我对软件工程这个专业有了更真实的感受，很珍惜也很感谢这次机会~