基于Vue+SpringBoot的学生管理系统

项目简介

功能描述：

本系统采用前后端分离技术，利用Spring Boot框架完成数据库数据的管理，利用Vue框架完成界面与前端开发，通过路由端口连接。

功能包括：课程信息的条件查询、录入、修改和删除；课程表的录入、修改；管理员和学生的信息的新增、修改、删除和条件分页查询；成绩信息的查询以及管理员可以录入和修改成绩；管理员、学生可以使用用户名和密码登录系统；管理员可以采用摄像监控观察学生行为并记录不安全行为。

参考git地址：

前端仓库：StudentManagerSystem-WEB_Vue: 学生管理系统Vue框架前端代码  

后端仓库：StudentManagerSystem-API_SpringBoot: 学生管理系统springboot框架及数据库代码 

完成功能：

1. 前端管理员、学生、登录页面搭建
2. 后端数据库增删改查功能完善
3. 连接前后端，优化界面
4. 摄像头界面、课表、成绩、学生信息增删改查功能
5. 部署所有模块，连接成一个完整的整体

任务简述

序号	完成功能与任务	描述
1	课程、成绩、学生信息管理功能	使用Spring Boot框架搭建管理，设计完成各类的增删改查功能，并同步到连接的MySQL1数据库。
2	摄像头监控功能	使用了videoElement，通过连接摄像头传输视频数据流上传到服务端进行界面展示。
3	登录功能	使用Element-UI对登陆界面优化，对用户名、密码进行验证，并增加验证码登录验证功能。
4	前后端制作	使用vue和axios一起实现Ajax功能。
5	数据库设计	采用MySQL数据库，表设计符合第三范式，使用Navicat进行管理设计。
6	路由连接	通过异步接口(JSONP)进行端口连接。

功能详解

1. *课程、成绩、学生信息管理功能

对课程的信息进行管理，以及管理员进行课程的查询。

关联任课信息、学生获取上课信息，管理员可以针对课程表信息进行编辑，实现排课功能。

管理员可以录入或修改对应权限的成绩信息，学生可以查询对应的成绩信息。

2. *摄像头监控功能：

在组件的 data 函数中定义了一个 videoStream 变量，用于存储获取到的视频流对象。

在 startVideo 方法中调用 navigator.mediaDevices.getUserMedia() 方法请求获取摄像头视频流。若成功获取到视频流对象，将其赋值给 videoStream，并将 video 元素(srcObject) 的媒体流设置为该对象，从而在页面上播放摄像头视频流。若无法获取到视频流，则在 console 中打印错误信息。

在 stopVideo 方法中，通过调用 videoStream.getTracks() 可获取视频流中的所有轨道(track)对象，再通过对每个 track 对象调用 stop() 方法停止轨道。最后将 videoStream 和视频元素(srcObject) 赋值为null，释放视频流和清空页面上的视频播放。

<template>

    <div class="video-container">

      <h3>摄像头界面</h3>

      <video ref="videoElement" autoplay></video>

      <div class="button-container">

        <el-button type="primary" style="font-size: 18px;" @click="startVideo">打开摄像头</el-button>

        <el-button type="danger" style="font-size: 18px;" @click="stopVideo">关闭摄像头</el-button>

        </div>

    </div>

   

  </template>

  <script>

  export default {

    data() {

      return {

        videoStream: null

      };

    },

    methods: {

      startVideo() {

        navigator.mediaDevices.getUserMedia({ video: true, audio: false })

          .then(stream => {

            this.videoStream = stream;

            this.$refs.videoElement.srcObject = stream;

          })

          .catch(error => {

            console.error('无法访问摄像头：', error);

          });

      },

      stopVideo() {

        if (this.videoStream) {

          this.videoStream.getTracks().forEach(track => track.stop());

          this.videoStream = null;

          this.$refs.videoElement.srcObject = null;

        }

      }

    }

  };

  </script>

<style>

.video-container {

  display: flex;

  flex-direction: column;

  justify-content: center; /* 垂直剧中显示 */

  align-items: center; /* 水平剧中显示 */

  height: 80vh;

}

video {

  width: 80%; /* 设置宽度占满父容器 */

  height: auto; /* 自适应高度 */

  max-width: 640px; /* 设置最大宽度以便在宽屏幕上能够正常显示 */

  border-radius: 20px; /* 圆角半径 */

  border: 5px solid #007bff; /* 边框颜色和宽度 */

  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); /* 阴影效果 */

}

.button-container {

  display: flex;

  justify-content: space-between; /* 按钮水平平均分布 */

  margin-top: 10px; /* 顶部间隔 */

  margin-left: 20px; /* 左边间隔 */

  margin-right: 20px; /* 右边间隔 */

}

</style>

3. *登录功能

采用Vue框架搭建，输入对应账号密码以及验证码传输数据，从数据库中读取并验证，验证通过则进入对应权限身份界面，否则提示报错信息。

<template>

  <div id="login" :style="note" style="background-size: 76%;">

    <div class="loginForm">

      <div style="text-align: center; padding: 7vw 0 0 0; font-size: 18px">

        <!-- <h2 style="color: white">学生成绩管理系统</h2> -->

      </div>

      <el-tabs

        type="border-card"

        v-model="tabName"

        @tab-click="tabClick"

        style="height: 440px"

      >

        <el-tab-pane label="学生" name="student">

          <Form class="flip" ref="student_tab"></Form>

        </el-tab-pane>

        <!---<el-tab-pane label="教师" name="teacher">

          <Form ref="teacher_tab"></Form>

        </el-tab-pane>-->

        <el-tab-pane label="管理员" name="admin">

          <Form ref="admin_tab"></Form>

        </el-tab-pane>

      </el-tabs>

    </div>

  </div>

</template>

<script>

import Form from "./form";

import "../../common/css/star.css";

export default {

  data() {

    return {

      starClass: "star",

      starArr: "",

      keyLabel: "学生",

      tabName: "student",

      loading: false,

      note: {

        backgroundImage: "url(" + require("../../assets/home.jpg") + ")",

      },

      starSty: "",

    };

  },

  methods: {

    tabClick(data) {

      if (data.label !== this.keyLabel) {

        this.flip();

        this.keyLabel = data.label;

      }

      if (data.label === "学生") {

        this.$refs.student_tab.clearForm(2);

        this.$refs.student_tab.getCookies();

      } else if (data.label === "管理员") {

        this.$refs.admin_tab.clearForm(0);

        this.$refs.admin_tab.getCookies();

      }

    },

    flip() {

      let flip = document.querySelector(".el-tabs");

      flip.style.transition = "0.3s";

    },

  },

  components: {

    Form,

  },

};

</script>

<style>

* {

  margin: 0;

  padding: 0;

}

html,

body,

#app,

.login {

  height: 100%;

}

#login {

  height: 100%;

  width: 100%;

  padding-left: 33%;

}

</style>

<style scoped>

.el-tabs {

  /*3d效果*/

  transform-style: preserve-3d;

  /*-webkit-perspective: 1000px;*/

  transition: 0.8s;

}

.loginForm {

  width: 400px;

  /* margin: 0 580px 0 580px; */

}

.title {

  padding: 10px 10px;

}

.oblique {

  background-color: #d5d5d5;

  transform: rotate(120deg);

  box-sizing: border-box;

}

</style>

4. 前后端制作

采用Vue3框架，methods将后端数据赋值给前端data，然后element-ui组件通过v-for/bind/model和插值表达式{{}}显示前端data的值，最后进行vue和element-ui组件的数据交互。

        1.数据库设计

采用MySQL数据库，使用Navicat进行管理设计。

采用DAO技术为访问提供接口。

        2.路由连接

#server.port=9121
server.port=8000

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/student_manager_system?characterEncoding=utf8&allowPublicKeyRetrieval=true&useSSL=false&serverTimezone=UTC
jdbc.username=root
jdbc.password=123456

mybatis_config_file=mybatis-config.xml
mapper_path=/mapper/*/**.xml