系列文章目录
文章目录
前言
本系统主要用于对学软件的同学作为参考项目。帮助同学们更快速的开发自己的平台。实现高效开发的同时也能提高自己对知识点技术的掌握能力。
如果是从0-100写项目,这样编写程序对于时间不是很充裕的学生来说,无疑是开发不完的。因为这部分的开发不管是代码层面的逻辑考虑以及代码开发。更多的也是对于业务需求的了解,每个页面的设计,整体的体现风格形式的设计也至关重要!!!本项目断断续续开发了3个多月才开发完成。包括每个页面的样式,风格都是自己参考其他网站样式进行设计、开发。
这也是发表文章的意义,是想让大二/大三正在学习做项目的同学参考学习整体结构以及开发层次、代码规范以及理解业务逻辑,或者是大四的同学正在做项目的同学可以用于参考本项目中一些公共模块的代码,如登录/注册、管理端的增删改查、各用户端的页面设计、数据库的主外键设计、用户表字段信息等、聊天功能的实现、邮箱发送的集成等功能。
一、使用技术
该系统采用MySQL作为数据库,主要使用Spring Boot与Vue 3框架开发,利用Element-Plus、MyBatis-Plus和ECharts等组件来提高代码开发效率。同时,通过Redis、RabbitMQ和WebSocket等中间件实现系统性能和功能的优化。
该平台分为三个端:
(1)管理端:维护基础数据(包括用户、课程、题库等)、发布公告以及进行可视化数据分析。
(2)教师端:创建课程、布置作业、批量收取作业,以及进行知识问答(聊天),帮助学生解决问题。
(3)学生端:申请加入课程、提交作业、答题,以及进行知识问答聊天),向教师/学生进行询问。
二、亮点效果图展示
由于功能点较多,这里只将亮点功能进行展示。
2.1 ECharts数据可视化
管理端利用ECharts对关键数据进行可视化,例如每个课程下的学生数量、作业数等信息,以便管理员更直观地通过各种图形来分析数据。如下图所示:
2.2 邮件集成
当管理员发布公告或教师发布作业时,系统将封装数据信息并调用邮件接口,将详细内容发送至对应用户的QQ邮箱。如下图所示:
注:管理员发布的公告会发送给所有用户,而教师发布的作业会发送给该课程下的所有学生。
2.3 Redis作为数据缓存
对于用户而言,大约80%的操作都是在查询数据。为了减轻数据库的压力,系统会将已经查询过但没有更新过的数据存储在 Redis 中。这样,在下次查询时,系统可以直接从 Redis 中获取数据,而不必再访问数据库。由于 Redis 使用内存存储数据,因此查询速度也会更快。为保证redis和mysql中的数据保持同步:
查询时逻辑图:
更新时逻辑图:
2.4 WebSocket实现数据的实时同步
对于系统中统计在线人数和知识问答模块,使用WebSocket全双工通信的特点,一个用户进行操作后,可以主动向客户端发送数据,进而保持实时同步。如下图所示:
例如:用户在知识问答模块发送了一条消息,其他用户知识问答模块的消息也会进行实时同步。
2.6 定时任务并发存储数据
对于知识问答(聊天),考虑到用户发送消息太多,直接将数据插入Mysql中会影响数据库的响应,高峰期可能导致整个系统崩掉。部分代码如下图所示:
(1)将数据存到redis中。
(2)使用定时任务,每周日零点进行数据同步,创建多个线程,每个线程处理500条数据,并发执行。
三、部分页面展示
3.1 注册/登录
用户登录、注册页面如下图所示:
3.2 管理端首页
管理端首页如下图所示:
3.3 管理数据页面
以课程管理为例,如下图所示:
3.4 用户端首页
学生/教师端首页效果图,这里以教师端为例:如下图所示:
3.5 教师端发布作业
批量下载该班级下的所有学生的作业信息,如下图所示:
3.6 加入课程的信息页
教师是否同意该学生加入班级信息,如下图所示:
3.7 学生答题页
学生可进入学习页面,点击答题按钮后,调用的接口为“/question/random” get请求方式去随机选择题目展示,如下图所示:
当用户选择完答案后显示正确答案以及你选择的答案,还有对该题目有相应的解析。如下图所示:
3.8 用户查看课程列表
学生/教师对课程信息进行查看、搜索、加入效果图,如下图所示:
总结
本项目页面设计比较多,这里只简单展示了一些公用的页面效果。如果想要了解更多可以私信我。对于项目的意见或者实现的逻辑等都可以来一起讨论学习~ 但还是注意本项目只可作为参考学习。