基于springboot+VUE+ElementUI大学生交友系统的设计与实现
1. 绪论
1.1 应用背景及意义
1.1.1 应用背景
- 随着移动互联网的爆炸式增长与全民社交时代的到来，人们在海量信息中获取有效信息的效率正在下降。
- 通信技术的不断发展，社交方式发生了巨大的变化。人们开始在线社交平台来拓展人际关系和结交新朋友。尤其是对于大学生这一群体，他们正处于信息化高速发展的时代，同时充满活力和好奇心，渴望结交新朋友，拓展人际关系。然而，在现实生活中，由于学业压力、性格原因等多种因素，许多大学生在交友方面存在困难。因此，能否给大学生提供一个交友平台，成为了一个值得关注的问题。
1.1.2 研究意义
- 在中国，计算机网络技术的迅速发展，尤其是在中国人口众多，宅男宅女日益增多的背景下，中国的网络交友网站应运而生，而且日益增多。
- 尽管当前市场上已经存在多种交友平台和系统，但任然没有出现针对特定地区的有针对性的交友系统。此外，一些社交平台所使用的系统也无法保证用户的安全与隐私，不够安全和稳定，界面和操作方式也可能不尽如人意，无法满足现代用户的高标准需求。本课题所研究的交友系统使用的都是现在较为流行的技术，通过优良的系统界面和良好的界面反馈来提高用户体验，并且通过Token加密的方式来保证系统的信息安全性，Springboot和Vue的使用大大减少了系统的部署与维护难度。作为一名即将毕业的大四学生，通过设计与实现交友系统这一毕业设计课题，可以很好的积累自己的关于即时通讯的项目经验、增强自己的代码能力，这对于未来在职业道路上的发展和就业具有重要的意义，确保我能够跟进开发技术潮流的发展，能够更好地适应快速变化的工作环境和技术要求。
1.2课题的研究内容
- 系统使用后端Springboot框架、前端Vue js框架和mysql数据库开发，其中通讯层面选择axios+WebSocket进行通讯层的开发。
- 系统一共设计了二个角色：分别为管理员和用户。用户可以在登录后可在首页试用以下功能：查看自己的好友、聊天记录与个人空间，也可修改或者查看个人信息、退出登录；管理员在普通角色的功能基础上还可以进行用户管理、群聊管理和空间管理。
1.3 系统采用的相关技术
1.3.1后端框架——Spring Boot
- Spring使Java编程对每个人来说都更快、更容易、更安全。Spring对速度、简单性和生产力的关注使其成为世界上最受欢迎的Java框架。其设计目的在于简化Spring应用的创建，运行，部署等。Springboot提供了面向切面编程、自动装配、微服务等特性，这些特性很好的保证了Springboot开发web系统的简易性，同时Springboot还可以集成了许多技术，同时得益于maven的集成，可以很好的运用插件。
1.3.2通讯框架——WebSocket
- Web Socket协议是HTML5提出的一种全新的协议，旨在为Web应用程序提供高效、双向、实时的通信能力。它不同于传统的HTTP协议，只要建立连接后，就可以实现基于流的消息传输。WebSocket协议支持Web浏览器与Web服务器之间的数据交互，通过较低的性能开销，实现客户端与服务器的实时数据传输。区别于传统的轮询，实时应用需要使用低延迟协议。与轮询方法相比，web套接字方法在呈现实时数据方面更好。可以为大量不同用户的订阅请求提供实时消息推送服务。web套接字为全双工通信提供了低时延、低网络吞吐量的解决方案。他可以很好的提升性能的情况下实现即时通讯的效果。
1.3.3前端框架——Vue.js
- Vue.js是基于 JavaScript 的渐进式框架。基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。采用自底向上增量开发的设计方式, 是更加灵活、开放的解决方案, 架构更加简单, 适合开发人员快速掌握其全部特性并投入使用, 还便于与第三方库或既有项目整合。通过与Vite的配合，可以很好的实现前端项目的开发与部署。Vue.js的功能特性，如：指令的存在可以简化JavaScript操作dom的操作、路由可以很好的设计前端项目页面的链接、双向数据绑定使的数据展示更方便、组件化开发使得组件能够更好的复用、状态管理可以用来缓存重要的数据、模板渲染等功能可以简化项目的开，同时它支持集成各种插件用来简化开发。
1.3.4前端UI——Element-UI
- Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。Element-UI组件库是由阿里巴巴开发的一套UI库。作为前端开发者可以很好的采用Elementui，因为Element-UI拥有丰富的UI组件，其中的组件也支持响应式布局，在vue中使用Elementui也是非常方便，可以立马上手开发。
1.3.5关系型数据库——MySQL
- MySQL是一种关系型数据库，得益于其开源的设计以及支持多种编程语言的特性，许多个人开发者也会采用Mysql进行开发。
1.3.6持久层框架——Mybatis
- Mybatis作为一种可以与springboot集成的持久层框架，通过与Springboot集成起来，可以大大的简化springboot项目对数据库的操作难度，同时得益于mybatis的存在，sql文件的规范性也得到了很大的提升。
1.4 开发工具及相关版本
- 表1-1开发工具及版本信息表
- 开发工具
- 版本信息
- Visual Studio Code
- 2023.1
- Idea
- 2023.2.3
- Springboot
- 3.2
- WebSocket
- 13
- Navicat
- 14.09
- Vue.js
- 3.7.14
- MySQL
- 8.0.24
2. 系统分析
2.1可行性分析
2.1.1 技术可行性
- 大学生交友系统通过Springboot框架来搭建后端，能够与WebSocket、Mysql进行无缝的集成，同时本系统采用Token来保证用户信息的安全性。
- 前端方面，Vue.js和ElementUI的结合使用，可以实现高效、响应式的前端页面开发，同时也提高了开发效率。
2.1.2 经济可行性
- 本系统主要基于开源技术进行开发，因此开发成本相对较低。
- 系统运行后，服务器等硬件设备的购买和维护也是一笔可观的费用，但相对于传统社交平台来说，成本较低。
2.1.3 操作可行性
- 本系统操作简单，用户只需注册账号，登录系统后即可使用。
- 管理员和用户角色设计合理，可以满足不同用户的需求。
2.2 系统需求分析
2.2.1 系统的目标需求概述
- 提供一个安全、高效的交友平台，帮助大学生拓展人际关系，提高交友效率。
- 提供即时通讯功能，方便用户进行在线交流。
- 提供群聊功能，方便用户进行群体交流。
- 提供个人空间功能，方便用户展示自己，结交志同道合的朋友。
2.2.2 系统的功能分析
- 用户注册、登录功能
- 添加好友功能
- 创建群聊功能
- 聊天功能
- 好友管理功能
- 群聊管理功能
- 动态发布与浏览功能
- 个人空间功能
- 用户与群聊管理功能（管理员）
2.2.3 系统的主要业务流程
- 用户注册流程
- 用户登录流程
- 添加好友流程
- 创建群聊流程
- 聊天流程
- 好友管理流程
- 群聊管理流程
- 动态发布与浏览流程
- 个人空间浏览与发布流程
3. 系统设计
3.1系统架构设计
- 系统采用前后端分离的架构设计，后端使用Springboot框架进行开发，前端使用Vue.js和ElementUI进行开发。
- 系统使用WebSocket进行实时通讯，保证信息的即时性。
- 系统使用MySQL数据库进行数据存储，保证数据的安全性和可靠性。
3.2功能设计
- 用户注册与登录功能
- 添加好友功能
- 创建群聊功能
- 聊天功能
- 好友管理功能
- 群聊管理功能
- 动态发布与浏览功能
- 个人空间功能
- 用户与群聊管理功能（管理员）
3.3数据库设计
3.3数据库设计
####3.3.1 数据库使用的技术
- MySQL
- Springboot的JPA
3.3.2 数据表的结构设计
- 用户表
- 好友表
- 群聊表
- 聊天记录表
- 动态表
- 用户与群聊管理表（管理员）
3.3.3 数据表的逻辑设计
- 用户表：用户ID、用户名、密码、邮箱、手机号等
- 好友表：好友ID、用户ID、好友ID、好友关系（双向）
- 群聊表：群聊ID、群聊名称、群聊描述、创建者ID
- 聊天记录表：聊天记录ID、发送者ID、接收者ID、消息内容、发送时间
- 动态表：动态ID、用户ID、动态内容、发布时间
- 用户与群聊管理表（管理员）：用户ID、群聊ID、管理权限
4. 系统实现
4.1 系统环境搭建
4.1.1 后端搭建
- 安装Java开发环境
- 安装Maven
- 创建Springboot项目，引入相关依赖
4.1.2 前端搭建
- 安装Node.js
- 创建Vue.js项目，引入相关依赖
4.2 系统功能实现
4.2.1 大学生交友系统用户登录
- 用户输入用户名和密码，点击登录按钮
- 后端验证用户名和密码是否正确
- 验证成功，跳转到首页；验证失败，提示用户重新输入
4.2.2 大学生交友系统首页
- 展示用户头像、昵称、好友列表、群聊列表
- 提供添加好友、创建群聊等功能按钮
- 展示动态发布和浏览区域
4.2.3 个人信息
- 用户可以查看和修改自己的个人信息
- 包括头像、昵称、性别、年龄、生日、所在学校等
4.2.4 聊天管理
- 提供好友列表和群聊列表
- 点击好友或群聊，展示聊天记录
- 支持发送文本、图片、语音等消息
4.2.5 好友管理
- 展示好友列表
- 提供添加好友、删除好友、修改好友关系等功能
4.2.6 群聊管理
- 展示群聊列表
- 提供创建群聊、删除群聊、修改群聊信息等功能
4.2.7 动态管理
- 用户可以发布动态，展示在个人空间和首页
- 支持图片、文字、视频等多种格式
- 提供点赞、评论、转发等功能
5. 系统测试
5.1 系统测试概述
5.1.1系统测试的方案
- 单元测试：对每个功能模块进行测试，确保其正常运行。
- 集成测试：将多个功能模块组合在一起进行测试，确保它们之间能够正常交互。
- 系统测试：对整个系统进行测试，确保所有功能正常运行。
5.1.2系统测试的意义
- 确保系统功能完整、稳定运行。
- 发现并修复系统中的缺陷和问题。
- 提高系统的可靠性和用户体验。
5.2 系统测试过程
5.2.1 系统测试用例
- 用户注册与登录测试
- 添加好友测试
- 创建群聊测试
- 聊天测试
- 好友管理测试
- 群聊管理测试
- 动态发布与浏览测试
- 个人空间测试
5.2.2 系统测试工具及结果
- 使用JMeter进行性能测试
- 使用Selenium进行自动化测试
- 使用Postman进行接口测试
- 测试结果：系统各项功能正常运行，性能良好，满足需求。
5.3 总结
- 系统测试是确保系统质量的重要环节。
- 通过系统测试，可以发现并修复系统中的缺陷和问题。
- 系统测试可以提高系统的可靠性和用户体验。
6. 结束语
- 通过本课题的研究与实践，我们成功设计并实现了一个基于springboot+VUE+ElementUI的大学生交友系统。
- 该系统具有功能完善、操作简单、安全性高等特点，能够满足大学生的交友需求。
- 在未来的工作中，我们将继续优化系统功能，提高用户体验，为用户提供更好的服务。
致谢
- 感谢我的指导老师邓宏涛，他给予了我很多宝贵的建议和指导，帮助我顺利完成这个课题。
- 感谢我的同学和朋友们，他们给予了我很多支持和鼓励，让我更有信心完成这个课题。
参考文献
- [1] Spring Boot官网
- [2] Vue.js官网
- [3] WebSocket官网
- [4] MySQL官网
- [5] ElementUI官网
- [6] MyBatis官网
