基于Spring Boot+Vue的课堂管理系统(前后端分离)

该项目完全免费

介绍

基于Spring Boot+Vue的课堂管理系统。前后端分离。包含教师授课管理、学生选退课、聊天室、签到、笔记管理模块等。

技术架构
  • SpringBoot

  • MyBatis

  • Redis

  • WebSocket

  • VueCLI

  • Axios

  • Element UI

项目特点:

1、后台使用MyBatis连接数据库,编写后台服务器的请求接口。

2、整合WebSocket技术,配置聊天端口,将消息信息封装为对象,实现用户发送信息实时转发功能。

3、使用Redis缓存学生签到记录,学生端签到更新缓存数据,并将数据实时发送至教师端。

4、前端使用Vue CLI创建运行在Node服务器中,使用Element UI对界面进行布局和设计。

5、使用Vue Router来配置路由,实现跳转笔记详情传参,引入Mavon-Editor来实现使用MarkDown的语法来编辑笔记。

6、引入Axios并且配置代理服务器解决跨域请求问题。

7、使用js-cookie来存储用户登录状态。

文件说明

springboot 为后端项目

vue 为前端项目

启动教程
  1. 导入sql文件。sql/course_selection.sql

  2. 启动后端项目。

  3. 启动redis服务。

  4. 启动前端项目, 再前端项目文件夹输入 npm run serve

  5. 浏览器输入http://localhost:8081/

  6. 账号密码见数据库用户表

模块说明
  1. 课程管理模块:教师可以添加、编辑、删除课程;学生可以选课、退课。

  2. 聊天室:登录的用户进入聊天室,可以查看在线用户列表,实时进行聊天。

  3. 签到:教师端可以选择课程发起签到生成一个签到码,学生端若选择了此课程,输入签到码后完成签到,更新状态信息至教师端。

  4. 笔记管理:用户可浏览公开的笔记,可MarkDown的语法添加和编辑笔记。

实现效果

主页

相关推荐
环境栈笔记4 小时前
指纹浏览器安卓怎么用?从运行位置到功能验收,先把三种方案分清
前端·人工智能·后端·自动化
小小张说故事4 小时前
Python 的 list 为什么能装下任何类型?拆开 PyObject* 数组,以及它让你多付了多少内存
后端·python
小蒜学长5 小时前
基于SpringBoot 框架的自媒体新闻系统的设计与实现(代码+数据库+LW)
java·spring boot·后端·mysql数据库·自媒体新闻管理系统
Highcharts.js5 小时前
Highcharts 集成到 React 或 Vue 项目中时,如何高效地使用 TypeScript技巧?
vue.js·人工智能·react.js·typescript·前端框架·highcharts
IT_陈寒5 小时前
JavaScript实战技巧总结:深挖数组遍历的性能陷阱与实战解法
前端·人工智能·后端
余槐i5 小时前
PostgreSQL 加索引后查询反而更慢:优化器弃用索引的 3 种情形
spring boot·redis·mysql·postgresql·事务
Java后端的Ai之路14 小时前
CAS并发控制-从CPU指令到企业级乐观锁
vue.js·人工智能·python·cas·乐观锁
学长毕设15 小时前
基于springboot的食品仓库管理系统
java·spring boot·后端
滴滴答答哒15 小时前
ASP.NET Core + FaceRecognitionDotNet 人脸识别实战:DI 单例、特征向量持久化与 1:N 比对
后端·asp.net
captain37618 小时前
MyBatis操作数据库(入门2)
java·数据库·spring boot·后端·spring·mybatis