SpringBoot+Vue 实现的课程管理平台 (源码分享,经典毕设项目)

项目概述

这里给大家分享一个前后端分离的项目,该项目是一个课程管理系统,项目主要分为教师端和学生端,教师可以添加课程,设置,以及对学生进行打分,学生可以查看课程列表进行选课,并可以检查自己的所选课程,以及查看动态生成的课表。
成绩部分未完善、该项目可以作为模板二次开发,不建议直接使用是之前练手的项目部分功能接口以及数据库有瑕疵

项目效果图

学生模块

登录首页

在这里插入图片描述
用户注册
在这里插入图片描述
学生登录首页

在这里插入图片描述
学生选课入口

在这里插入图片描述
本人课程列表与课表展示页面

在这里插入图片描述
我的成绩
在这里插入图片描述

用户信息

在这里插入图片描述

教师模块

登录

在这里插入图片描述

教师端首页

在这里插入图片描述
所授课程页面
ps: 点击所授课程有时候列表出不来 ctrl +r 刷新一下就可以了

在这里插入图片描述
课程对应学生列表以及打分页面
注:所授课程页面点击学生列表按钮跳转至该页面
在这里插入图片描述

录取课程
在这里插入图片描述

用户信息

在这里插入图片描述

源码

登录部分源代码分享


<template>
  <el-main>
    <el-form 
      :model="ReginForm"
      class="regform"
      label-width="0">
      <h3>教师登录</h3>
      <el-form-item prop="username">
        <el-input 
          type="text"
          v-model="ReginForm.username"
          placeholder="工号">
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input 
          type="password"
          v-model="ReginForm.password"
          placeholder="密码">
        </el-input>
      </el-form-item>

<!-- 
      <img :src="src" id="img-vcode" @click="getImage" :key="key">
            <label>
                <div class="label-text">验证码:</div>
                <input type="text" v-model="ReginForm.code"  name="vcode" style="width: 100px">
            </label> -->
      <el-form-item >
        <el-button 
          type="success" 
          class="submitBtn"
          round
          @click.native.prevent="submit">
          教师端登录
        </el-button>
        <el-button 
          type="primary"
          class="resetBtn" 
          round
          @click.native.prevent="reset">
          重置
        </el-button>
        <hr>
        <p>返回学生登录  <span class="to" @click="tologin">点我</span></p>
      </el-form-item>
    </el-form>
  </el-main>
</template>
<script>
const axios = require('axios');
export default {
  data () {
    return {
      ReginForm: {
        username: '84656',//工号
        password: '123456',//密码
        code:'',
      },
    }
  },
  created(){
        //this.getImage();//获取验证码
    },      
  methods: {

    // ...
    submit () {
          axios.post('/teacher/login',this.ReginForm)
                    .then(response=>{     
                                console.log(response);
                                console.log(response.data);               
                                if(response.data.msg=='username is null'){
                                       this.$message.warning("用户名错误");
                                       return;
                                }
                                if(response.data.msg=='password is error'){
                                    this.$message.warning("密码错误");
                                    return;
                                }
                                if(response.data.msg=='success'){
                                    console.log('conso');
                                    console.log(response.data.data);
                                    window.sessionStorage.setItem('flag','ok');
                                    window.sessionStorage.setItem("teacherList",JSON.stringify(response.data.data));
                                    console.log("session");
                                    console.log(window.sessionStorage.getItem("teacherList"));
                                    this.$message.success("登陆成功!!!")
                                    this.$router.push({path:'/thome'});
                                   }     
                        })
    }, 
    //重置
    reset () {
      this.$refs.ReginForm.resetFields()
    },
    //返回登录页
    tologin () {
      this.$router.push('/login')
    }
  }
}
</script>
<style scoped>
.regform {
  margin: 150px auto;
  width: 400px;
  height: 300px;
  background: #fff;
  box-shadow: 0 0 10px #B4BCCC;
  padding: 30px 30px 0 30px;
  border-radius: 25px; 
}
.submitBtn {
  width: 65%;
}
.to {
  color: #FA5555;
  cursor: pointer;
}
</style>

代码使用说明

帮助

猜你喜欢

转载自blog.csdn.net/pgcdnameming/article/details/127260614