SpringBoot+Vue实现学生管理系统

news/2024/7/5 3:35:40

1.技术架构

前后端分离项目,后台:springBoot+mysql+mybatis

前端:vue框架

2.安装环境

IDEA/eclipse均可

jdk1.7或1.8

maven项目

mysql数据库版本为8.0.17

node

3.功能说明

用户角色:学生、家长或教师、管理员

学生:

1)查看自己的学生信息

2)查看自己的奖项信息

3)查看自己的日常表现

4)查看自己的学习成绩

5)查看并下载自己的试卷

教师:

1)查看自己所带学生的信息

2)查看自己所带学生的奖项信息

3)查看自己所带学生的日常表现信息

4)查看自己所带学生的学习成绩

5)查看并下载自己所带学生的试卷

管理员:

1)班级教师管理

2)班级管理

3)课程管理

4)学生管理

5)学生奖项管理

6)学生日常表现管理

7)教师管理

8)成绩管理

9)试卷管理

10)用户管理

前端部分代码展示:

login.vue   登录页面

<template><div id="Login"><h1>学生管理系统</h1><div style="height: 100%; width: 20%; margin: auto;"><el-form ref="form" :model="form"><el-form-item label="" style="margin-bottom: 0px; margin-top: 10px;"><el-input @change="code()" prefix-icon="el-icon-user" v-model="form.account" placeholder="请输入账号"></el-input></el-form-item><span class="L0" v-html="isCode"></span><el-form-item label="" style="margin-bottom: 10px; margin-top: 10px;"><el-input @change="pwd()" type="password" prefix-icon="el-icon-lock" v-model="form.password" placeholder="请输入密码"></el-input></el-form-item><span class="L0" v-html="isPwd"></span><el-form-item label=""   style="display:block;;margin-bottom: 10px; margin-top: 10px;"><el-select style="width:100%" @change="type()" v-model="form.type" placeholder="请选择身份类别"><el-option v-for="item in typeList" :key="item.id" :label="item.type" :value="item.id"> </el-option></el-select></el-form-item><span class="L0" v-html="isType"></span><el-form-item><el-button @click="login()" style="width: 100%" type="primary">登入</el-button></el-form-item></el-form></div></div></template><script>import axios from "axios";export default {name: "App",data() {return {form: {account: "",password: "",type:"",},isCode: "",isPwd: "",isType:"",role:{type:0,},typeList:[{id:1,type:'管理员'},{id:2,type:'家长/教师'},{id:3,type:'学生'},]}},methods: {code() {if (this.form.account.length != 0) {this.isCode = "";return true;} else {this.isCode = "账号不能为空"return false;}},pwd() {if (this.form.password.length != 0) {this.isPwd = "";return true;} else {this.isPwd = "密码不能为空"return false;}},type() {if (this.form.type.length != 0) {this.isType = "";return true;} else {this.isType = "身份类别不能为空"return false;}},login() {if (!this.code()) {return false}if (!this.pwd()) {return false}let _this = this;axios.post('http://localhost:8097/login',{account:this.form.account,password: this.form.password,type: this.form.type}).then(function(response) {_this.role.type=response.data.type;if (response.data.code == 200) {//存储数据_this.$store.commit('setUser',response.data.data)_this.$message({type: "success",message: response.data.msg})_this.skip();} else if (response.data.code == -1) {_this.$message.error(response.data.msg);}}).catch(function(error) {console.log(error);})},skip() {let u1 = this.$store.state.user;if(u1.type==1){this.$router.push({path: "/index"})}if(u1.type==2){this.$router.push({path: "/index2"})}if(u1.type==3){this.$router.push({path: "/index3"})}}},mounted() {console.log(this)}}
</script><style>#Login>h1 {padding-top: 180px;}.L0 {float: left;color: red;font-size: 12px;padding-left: 10px;}
</style>

student.vue

<template><div id="StudentList"><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/index' }">控制中心</el-breadcrumb-item><el-breadcrumb-item>学生信息</el-breadcrumb-item></el-breadcrumb><el-form :inline="true" class="demo-form-inline"><el-form-item label="学号:"><el-input v-model="number" placeholder="学号"></el-input></el-form-item><el-form-item label="班级:"><el-input v-model="clazzName" placeholder="班级"></el-input></el-form-item><el-form-item label="学生姓名:"><el-input v-model="name" placeholder="学生姓名"></el-input></el-form-item><el-form-item><el-button type="primary" @click="previous()">查询</el-button><el-button type="primary" @click="dialogFormVisible = true,estimate=false">新增</el-button><el-button type="primary" @click="AutoScore()">评分</el-button></el-form-item></el-form><el-dialog :visible.sync="dialogFormVisible" :close-on-click-modal='false' :close-on-press-escape='false':show-close='false'><h1 v-show="form.id == undefined" style="margin: auto; width: 20%; height: 50%; padding-bottom: 50px;">新增学生</h1><h1 v-show="form.id != undefined" style="margin: auto; width: 20%; height: 50%; padding-bottom: 50px;">修改学生</h1><div style="width: 80%; margin: auto;"><el-form :inline="true" :model="form" class="demo-form-inline"><el-form-item label="学号:"><el-input v-model="form.number" placeholder="学号"></el-input></el-form-item><p></p><el-form-item label="真实姓名:"><el-input v-model="form.name" placeholder="真实姓名"></el-input></el-form-item><p></p><el-form-item label="性别:"><el-radio v-model="form.sex" label="男">男</el-radio><el-radio v-model="form.sex" label="女">女</el-radio></el-form-item><p></p><el-form-item label="电话:"><el-input v-model="form.phone" placeholder="电话"></el-input></el-form-item><p></p><el-form-item label="QQ:"><el-input v-model="form.qq" placeholder="QQ"></el-input></el-form-item><p></p><el-form-item label="奖项/特长:"><el-input v-model="form.specialty" placeholder="奖项或特长"></el-input></el-form-item><p><span class="L1"></span></p><el-form-item  label="请选择年级:"><el-select v-model="form.gradeid" placeholder="请选择年级"><el-option v-for="grade in GradeList":key="grade.id":label="grade.name":value="grade.id"></el-option></el-select></el-form-item><p></p><el-form-item  label="请选择班级:"><el-select v-model="form.clazzid" placeholder="请选择班级"><el-option v-for="clazz in ClazzList":key="clazz.id":label="clazz.name":value="clazz.id"></el-option></el-select></el-form-item><p></p></el-form></div><div style="width: 70%; height: 100%; margin: auto;"><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false,form = {}">取 消</el-button><el-button type="primary" @click="isEstimate()">确 定</el-button></div></div></el-dialog><template text-align: center><el-table :data="StudentList.list" stripe style="width: 100%" type="index"><el-table-column prop="number" label="学号" width="80"></el-table-column><el-table-column prop="name" label="姓名" width="100"></el-table-column><el-table-column prop="sex" label="性别" :formatter="state" width="50"></el-table-column><el-table-column prop="phone" label="电话" width="120"></el-table-column><el-table-column prop="qq" label="QQ" width="100"></el-table-column><el-table-column prop="specialty" label="奖项/特长" width="100"></el-table-column><el-table-column label="评分" width="100" ><template slot-scope="scope">{{scope.row.score}}分</template></el-table-column><el-table-column  label="班级" width="180"><template slot-scope="scope">{{scope.row.gradeName}}{{scope.row.clazzName}}</template></el-table-column><el-table-column label="操作" fixed="right"><template slot-scope="scope"><el-button style="margin-left: 0px;" size="mini" type="primary" round@click="estimate=true,getStudent(scope.row.id)">编辑</el-button><el-popconfirm title="这是一段内容确定删除吗?"@confirm="delStudent(scope.row.id)"><el-button size="mini" type="primary" round slot="reference">删除</el-button></el-popconfirm></template></el-table-column></el-table></template><!--分页查询--><div class="block"><el-pagination @size-change="size" @current-change="previous" :current-page="StudentList.pageNum":page-sizes="[1, 2, 5, 10,20,50]" :page-size="StudentList.pageSize" :page-count="StudentList.pages"layout="total, sizes, prev, pager, next, jumper" :total="StudentList.total"></el-pagination></div></div>
</template><script>import axios from "axios";export default {name: "StudentList",data() {return {User: this.$store.state.user, //从vuex中获取当前登录用户StudentList: [], //表格中显示的数据form: {}, //新增、修改的数据ClazzList:[],//班级列表GradeList:[],//年级列表name: "", //学生真实姓名number:"",clazzName:"",dialogFormVisible: false,// visible: false,estimate: false,// pageNum: 1,// pageSize: 1,}},mounted() {this.getClazzAll();this.getGradeAll();},methods: {AutoScore(){axios.post("http://localhost:8097/student/score", {}).then((response) => {if (response.data.code == 200) {this.ClazzList = response.data.data;this.$message({type: "success",message: response.data.msg})this.getStudentList();} else  {this.$message.error(response.data.msg);}}).catch(function(error) {console.log(error);})},getClazzAll(){console.log(this.User);axios.post("http://localhost:8097/clazz/listAll", {}).then((response) => {if (response.data.code == 200) {this.ClazzList = response.data.data;} else  {this.$message.error(response.data.msg);}}).catch(function(error) {console.log(error);})},getGradeAll(){axios.post("http://localhost:8097/grade/listAll", {}).then((response) => {if (response.data.code == 200) {this.GradeList = response.data.data;} else  {this.$message.error(response.data.msg);}}).catch(function(error) {console.log(error);})},isEstimate(){if(!this.estimate){this.add();}else{this.edit();}},add() {axios.post("http://localhost:8097/student/add", {number: this.form.number,name: this.form.name,sex: this.form.sex,phone: this.form.phone,qq: this.form.qq,specialty: this.form.specialty,photo: this.form.photo,clazzid: this.form.clazzid,gradeid: this.form.gradeid,}).then((response) => {// this.UserInfo = {};this.form = {};this.dialogFormVisible = false;if (response.data.code == 200) {this.$message({type: "success",message: response.data.msg})} else  {this.$message.error(response.data.msg);}//从新查询this.getStudentList()}).catch(function(error) {console.log(error);})this.estimate=false;},edit(){//修改axios.post("http://localhost:8097/student/update", {id: this.form.id,number: this.form.number,name: this.form.name,sex: this.form.sex,phone: this.form.phone,qq: this.form.qq,specialty: this.form.specialty,photo: this.form.photo,clazzid: this.form.clazzid,gradeid: this.form.gradeid,}).then((response) => {this.form = {};this.dialogFormVisible = false;if (response.data.code == 200) {this.$message({type: "success",message: response.data.msg})} else{this.$message.error(response.data.msg);}this.previous(this.StudentList.pageNum)}).catch((error) => {console.log(error);})this.estimate=false;},getStudent(id) {axios.post("http://localhost:8097/student/get", {id: id,}).then((response) => {console.log(response.data)this.form = response.data.data;this.dialogFormVisible = true;}).catch((error) => {console.log(error);})},delStudent(id) {axios.post("http://localhost:8097/student/delete", {'id': id,}).then((response) => {this.visible = false;if (response.data.code == 200) {this.$message({type: "success",message: response.data.msg})} else  {this.$message.error(response.data.msg);}this.previous(1);}).catch((error) => {console.log(error)})},size(change) { //每页显示的条数发生改变// alert(change)this.StudentList.pageSize = change;this.getStudentList();},previous(prePage) { //单击页码、或者单击查询条件// alert("dd"+prePage)this.StudentList.pageNum = prePage;this.getStudentList();},//获取后台学生列表数据:多条件分页查询getStudentList() {axios.post("http://localhost:8097/student/list", {name: this.name,number:this.number,clazzName:this.clazzName,pageNum: this.StudentList.pageNum,pageSize: this.StudentList.pageSize}).then((response) => {this.StudentList = response.data.data;console.log(this.StudentList)}).catch(function(error) {console.log(error)})}},created() {this.getStudentList()}}
</script><style>.el-input {size: 300px;}.L1 {color: red;font-size: 12px;}
</style>

系统演示地址:

链接:https://pan.baidu.com/s/1WcBPo1qtsTcFvNFDfyajEA 
提取码:0kzo


http://lihuaxi.xjx100.cn/news/244072.html

相关文章

Python开发环境配置

好久没有写博客了&#xff0c;自从6月份毕业后&#xff0c;进入一家做书法、字画文化宣传的互联网公司&#xff08;www.manyiaby.com&#xff09;&#xff0c;这段时间一直在进行前端开发&#xff0c;对于后端的使用很少了&#xff0c;整天都是什么html、css、javascript、jque…

hdu 1247

Problem DescriptionA hat’s word is a word in the dictionary that is the concatenation of exactly two other words in the dictionary.You are to find all the hat’s words in a dictionary.InputStandard input consists of a number of lowercase words, one per li…

从虚拟化前端Bug学习分析Kernel Dump

前言 也许大家都知道&#xff0c;分析 Kernel Dump 有个常用的工具叫 Crash&#xff0c;在我刚开始学习分析 Kernel Dump 的时候&#xff0c;总是花大量的时间折腾这个工具的用法&#xff0c;却总是记不住这个工具的功能。后来有一次在参加某次内部分享的时候&#xff0c;有位大…

SpringBoot默认包扫描问题

SpringBootApplication注解默认扫描路径是&#xff1a; 自动扫描主程序所在包及其下面的所有子包里面的组件 在maven多模块项目中&#xff0c;如果想让扫描到&#xff0c;需要在子模块下面创建相同的包 如&#xff1a; 如果包名不同就需要使用ComponentScan注解来扫描 但是…

字母金字塔

s 65 h a 10 while a:s chr(s)h h sprint(h)s ord(s)s s 1a a - 1 a 26 s 65 h A u * (a 1) while a:print(u,h)s s 1s chr(s)h s h ss ord(s)u u[1:]a a - 1 转载于:https://www.cnblogs.com/wumac/p/5704035.html

IOS推送详解

为什么80%的码农都做不了架构师&#xff1f;>>> IOS推送详解 一.关于推送通知 推送通知&#xff0c;也被叫做远程通知&#xff0c;是在iOS 3.0以后被引入的功能。是当程序没有启动或不在前台运行时&#xff0c;告诉用户有新消息的一种途径&#xff0c;是从外部服务…

控制反转 IOC

2019独角兽企业重金招聘Python工程师标准>>> 控制反转&#xff08;Inversion of Control&#xff0c;缩写为IoC&#xff09;面向对象设计原则&#xff0c;降低代码耦合度 依赖注入&#xff08;Dependency Injection&#xff0c;简称DI&#xff09; 依赖查找&#xf…

若依配置多数据源

1.在application.yml配置新增的数据库 octmes:# 从数据源开关/默认关闭enabled: trueurl: jdbc:mysql://localhost:3306/octmes?useUnicodetrue&characterEncodingUTF-8username: rootpassword: root 2.在DataSourceType.java 设置数据库名称 /*** 主库*/MASTER,/*** 从…