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
5586
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
