项目简介

本项目为基于Springboot+Vue的前后端分离的项目，本项目分为三种权限：管理员、教师和学生
管理员功能：
登录、学院管理、班级管理、课程管理、学生管理、教师管理、修改密码；

教师功能：
登录、学院查看、班级查看、课程查看、学生管理、个人信息修改、修改密码；

学生功能：
登录、学院查看、班级查看、课程查看、教师查看、个人信息修改、修改密码；

开发环境

运行环境：推荐jdk1.8；
开发工具：eclipse以及idea（推荐）、vscode、node环境（16.X）；
操作系统：windows 10 8G内存以上（其他windows以及macOS支持，但不推荐）；
浏览器：Firefox(推荐)、Google Chrome(推荐)、Edge;
数据库：MySQL8.0(推荐)及其他版本（支持，但容易异常尤其MySQL5.7（不含）以下版本）；
数据库可视化工具：Navicat Premium 15（推荐）以及其他Navicat版本
是否maven项目：是

登录：
管理员：用户名：admin 密码：123456
教师：用户名：JS1240110 密码：123456
学生：用户名：JV20002 密码：123456

注意：后台运行后端口必须为8080（不用改，默认就是，如果改动的话需要在前台代码的axios中也需要同步修改）

项目技术

后端：SpringBoot、Mybatis、mysql
前端：Vue3、axios、TypeScript、ElementUI

运行截图

1.功能结构

-1.下载所得

2.项目结构

3.数据库模型

4.数据库

5.登录

6.首页

7.学院管理

8.班级管理

9.课程管理

10.教师管理

11.学生管理

12.修改密码

13.个人信息修改

14.教师和学生查看页面等

部分代码

<template>
    <div class="lg-contain">
        <h1 class="h_header">欢迎来到学生信息管理系统</h1>
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" type="text"  placeholder="请输入用户名"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item label="角色" prop="type">
                <el-radio-group v-model="ruleForm.type">
                    <el-radio label="1">管理员</el-radio>
                    <el-radio label="2">教师</el-radio>
                    <el-radio label="3">学生</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>

import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { login } from '@/request/common';
import { ElMessage } from 'element-plus'
import {useRouter} from 'vue-router';

const ruleFormRef = ref<FormInstance>()
//定义登录元素组件
const ruleForm = reactive({
    username: '',
    password: '',
    type:"1",
})
//校验
const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
})
const router = useRouter();
//提交表单
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            login(ruleForm).then(res=>{
                if(res.success){
                    ElMessage({
                        message: '登录成功',
                        type: 'success',
                    })
                    res.data.type = ruleForm.type;
                    console.log(res);
                    
                    //将登录信息保存在缓存中
                    localStorage.setItem("sessionUser",JSON.stringify(res.data.sessionEntity))
                    localStorage.setItem("token",res.data.token);
                    
                    //跳转首页
                    router.push("/")
                }else{
                    ElMessage.error(res.msg)
                }
               
            }).catch(err=>{
                console.log(err);
                
            });
        } else {
            return false
        }
    })
}
//重置表单
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>

<style scoped lang="scss">
.lg-contain{
    background: url("../../assets/login.jpg");
    width: 100%;
    height: 100%;
    padding:0.1px;
    background-size: cover;
}
.demo-ruleForm{
    background-color: #ffff;
    width: 500px;
    padding:50px;
    border-radius: 20px;
    margin: auto;
}
.h_header{
    text-align: center;
    margin:150px auto 80px;
}
</style>

运行及导入视频

下载源码

🍅文末点击卡片获取源码🍅

点击下方网站链接，所有资源都包含其中，可以直接通过编号搜索即可