随着电子竞技产业的蓬勃发展和高校社团活动的日益丰富，电竞社团作为连接学生兴趣与专业实践的重要平台，其规模与管理复杂度不断提升。传统的人工记录、微信群通知等管理方式已难以满足成员管理、活动组织、设备调度及信息发布的高效需求。因此，设计并实现一个专业化、信息化的电竞社信息管理系统，对于提升社团运营效率、优化资源配置、增强成员体验具有重要的现实意义。本毕业设计旨在结合当前主流的企业级开发技术栈——SSM（Spring + Spring MVC + MyBatis）框架与现代化的前端框架Vue.js，构建一个基于Web的B/S架构电竞社信息管理系统，实现社团管理的数字化与智能化。
一、 系统设计
1. 系统架构设计
系统采用前后端分离的架构模式，以提高系统的可维护性、可扩展性和开发效率。
- 后端：采用经典的SSM框架组合。Spring作为核心容器，负责管理对象（Bean）的生命周期和依赖注入（IoC），提供事务管理、AOP等企业级服务；Spring MVC作为Web层框架，处理HTTP请求和响应，实现清晰的控制层逻辑；MyBatis作为持久层框架，通过XML或注解方式将Java对象与数据库记录进行灵活映射，执行高效的SQL操作。后端主要负责业务逻辑处理、数据持久化，并通过RESTful API接口为前端提供数据服务。
- 前端：采用Vue.js渐进式JavaScript框架。利用其响应式数据绑定和组件化开发的优势，构建用户界面。通过Vue Router管理前端路由，实现单页面应用（SPA）的流畅体验；使用Axios库与后端API进行异步通信。该架构使得前后端开发可以并行，且前端展示逻辑与后端业务逻辑解耦。
- 数据库：选用MySQL关系型数据库，用于存储社团成员、活动、设备、公告等结构化数据。
2. 功能模块设计
系统主要面向社团管理员、普通成员及访客（潜在新成员）三类用户，核心功能模块包括：
- 用户管理模块：实现成员注册、登录、权限认证（基于角色，如社长、部长、普通成员）。管理员可审核新成员、分配角色、维护成员基本信息（如游戏ID、擅长位置、联系方式）。
- 活动管理模块：涵盖活动的创建、发布、报名、签到、归档。支持发布内部训练赛、校内比赛、观赛活动等，成员可在线报名，管理员可导出报名名单并进行活动后的成果记录。
- 设备与物资管理模块：对社团共用的键鼠、耳机、电脑等设备进行入库登记、借用申请、归还审核、状态跟踪及损耗记录，实现资产的有效管理。
- 信息发布与交流模块：提供公告通知的发布与浏览（如比赛信息、训练安排）、战术资料库的上传与共享、以及简单的论坛版块供成员交流心得。
- 数据统计与看板模块：为管理员提供可视化数据看板，如成员活跃度统计、活动参与度分析、设备使用频率等，辅助决策。
3. 数据库设计
根据功能需求，设计核心数据表，例如：用户表（user）、角色表（role）、活动表（activity）、报名记录表（registration）、设备表（equipment）、借用记录表（borrow_record）、公告表（notice）等。通过外键关联确保数据的一致性和完整性。
二、 系统实现
- 开发环境搭建
- 后端：配置Java开发环境（JDK 1.8+）、Maven项目管理工具、集成开发环境（如IntelliJ IDEA）、Tomcat服务器。
- 前端：安装Node.js与npm包管理器，使用Vue CLI脚手架快速创建项目结构。
- 数据库：安装MySQL，并使用Navicat等工具进行管理。
- 后端实现关键点
- 使用Spring MVC的
@Controller和@RestController注解定义请求处理器，处理前端发送的GET、POST、PUT、DELETE请求。
- 利用MyBatis的Mapper接口和XML映射文件，编写数据访问层（DAO）代码，实现增删改查操作。
- 通过Spring的声明式事务管理（
@Transactional）保证关键业务操作（如同时更新多个表）的原子性。
- 设计统一的JSON响应格式和全局异常处理器，确保API接口的规范性和健壮性。
- 实现基于拦截器（Interceptor）或过滤器的用户登录状态与权限校验。
- 前端实现关键点
- 使用Vue CLI创建项目，并引入Element UI或View UI等组件库，快速构建美观且一致的UI界面。
- 通过Vue Router配置路由规则，实现页面跳转与导航守卫（如路由鉴权）。
- 创建可复用的Vue组件，如活动卡片、成员列表、设备表格等。
- 在Vue组件的
methods中使用Axios调用后端RESTful API，获取或提交数据，并利用Vue的响应式特性更新视图。
- 使用Vuex进行跨组件的状态管理，例如管理用户的登录状态、全局提示信息等。
- 系统集成与测试
- 前后端通过约定好的API接口进行联调。前端项目通过
npm run build打包成静态文件，可部署到Nginx服务器，或与后端项目集成（如将静态资源放入Spring Boot的static目录）。
- 进行功能测试、接口测试及简单的性能测试，确保各模块功能符合预期，系统运行稳定。
三、
本项目将计算机系统集成的思想贯穿于设计与实现全过程，成功整合了SSM后端技术栈与Vue.js前端技术栈，构建了一个功能完整、层次清晰的电竞社信息管理系统。该系统不仅解决了传统社团管理中的痛点，提升了管理效率，也为成员提供了便捷的在线服务平台。通过此毕业设计，实践了从需求分析、系统设计、编码实现到测试部署的完整软件开发流程，加深了对Java Web开发、前端工程化以及前后端分离架构的理解与应用能力，具备良好的示范价值和实际应用前景。未来可考虑引入更高级的功能，如集成第三方登录、通过WebSocket实现实时聊天、或利用数据分析技术进行更深度的社团运营洞察。
