# 基于Spring Boot+Vue的学生课堂信息管理系统

**Repository Path**: dawnshout/classroom-manager

## Basic Information

- **Project Name**: 基于Spring Boot+Vue的学生课堂信息管理系统
- **Description**: 基于Spring Boot+Vue的学生课堂信息管理系统。前后端分离。包含教师授课管理、学生选退课、聊天室、签到、笔记管理模块等。
- **Primary Language**: Java
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2023-07-05
- **Last Updated**: 2023-08-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于Spring Boot+Vue的学生信息管理系统


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

### 技术架构
-    Spring Boot
-    MyBatis
-    Redis
-    WebSocket
-    VueCLI
-    Axios
-    Element UI


### 技术简介
-    Spring Boot

            设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。
- MyBatis

        一款优秀的持久层框架,它支持自定义 SQL、存储过程以及高级映射。
        MyBatis 免除了几乎所有的 JDBC 代码以及设置参数和获取结果集的工作。

- Redis

          远程字典服务，是一个开源的使用ANSI C语言编写、支持网络、
      可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。
        安装教程https://blog.csdn.net/X_lsod/article/details/123263429
        下载地址https://github.com/tporadowski/redis/releases
- WebSocket

          WebSocket是一种在单个TCP连接上进行全双工通信的协议，使得浏览器具备了实时双向通信的能力
        
- VueCLI

            VueCLI是一个官方发布vue.js项目脚手架,使用 VueCLI 可以快速搭建 vue 开发环境,以及对应的 webpack 配置。
- Axios

       一个基于promise的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)
-    Element UI

            一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架


### 项目特点：
- 后台使用MyBatis连接数据库，编写后台服务器的请求接口。
- 整合WebSocket技术，配置聊天端口，将消息信息封装为对象，实现用户发送信息实时转发功能。
- 使用Redis缓存学生签到记录，学生端签到更新缓存数据，并将数据实时发送至教师端。
- 前端使用Vue CLI创建运行在Node服务器中，使用Element UI对界面进行布局和设计。
- 使用Vue Router来配置路由，实现跳转笔记详情传参，引入Mavon-Editor来实现使用MarkDown的语法来编辑笔记。
- 引入Axios并且配置代理服务器解决跨域请求问题。
- 使用js-cookie来存储用户登录状态。


### 文件说明
```
classroom-manager 为后端项目  
classroom-manager-front 为前端项目
```
### 启动教程
1. 导入sql文件。sql/course_selection.sql。可以使用sqlyog的导入-执行脚本，导入后记得F5。
2. 配置数据库账密和地址。
3. 启动后端项目。
4. 在前端文件夹 npm install
5. 启动前端项目:在前端文件夹 npm run serve
6. 浏览器 localhost:8081
7. 测试用账号密码见数据库用户表
8. 如果ide版本不同，可以删除或重写.idea


### 模块说明
1. 课程管理模块：教师可以添加、编辑、删除课程；学生可以选课、退课。
2. 聊天室：登录的用户进入聊天室，可以查看在线用户列表，实时进行聊天。
3. 签到：教师端可以选择课程发起签到生成一个签到码，学生端若选择了此课程，输入签到码后完成签到，更新状态信息至教师端。
4. 笔记管理：用户可浏览公开的笔记，可MarkDown的语法添加和编辑笔记。

### 实现效果
主页
![输入图片说明](imgs/index.png)
![输入图片说明](imgs/addCourse.png)
![输入图片说明](imgs/optCourse.png)
![输入图片说明](imgs/chatroom.png)
![输入图片说明](imgs/signin.png)
![输入图片说明](imgs/signed.png)
![输入图片说明](imgs/editnote.png)

### 项目说明
#### 本项目 https://gitee.com/dawnshout/classroom-manager.git
#### 原项目 https://gitee.com/ty-z/classroom-manager.git