今天给大家介绍的是一个基于springboot和Vue的宿舍管理系统,宿舍作为大学生活中不可缺少的一部分,是每个大学生都要接触的场所,所以制作一个宿舍管理系统是很有实际意义的。
使用的技术
后端:JAVA开发语言,SpringBoot框架,MySql数据库
前端:vue页面
实现的功能
实现了学生管理、楼层管理、宿舍管理、用户管理、系统管理和个人信息管理
部分代码展示
<template>
<div>
<el-button
style="margin-top:20px;margin-bottom:10px;"
@click="showAddStudent"
type="success"
>添加</el-button>
<el-button
type="warning"
@click="deleteStudents"
:disabled="this.ids.length === 0"
>
批量删除
</el-button>
<div style="display: flex;justify-content: space-between">
<el-input
placeholder="请输入学生姓名进行搜索"
prefix-icon="el-icon-search"
clearable
@clear="initStudent"
style="width: 350px;margin-right: 10px"
v-model="keyword"
@keydown.enter.native="initStudent"
>
</el-input>
<el-button
icon="el-icon-search"
type="primary"
@click="initStudent"
>
搜索
</el-button>
</div>
<el-table
:data="studentList"
stripe
style="width: 100%"
ref="multipleTable"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
width="55"
>
</el-table-column>
<el-table-column
v-if="false"
prop="id"
label="id"
align="center"
>
</el-table-column>
<el-table-column
prop="studentNo"
label="学号"
align="center"
width="150"
>
</el-table-column>
<el-table-column
prop="studentName"
label="姓名"
align="center"
width="100"
>
</el-table-column>
<el-table-column
prop="sex"
label="性别"
align="center"
width="70"
>
<template slot-scope="scope">
<span v-if="scope.row.sex == 1">男</span>
<span v-else>女</span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="dorm.id"
label="dormId"
v-if="false"
>
</el-table-column>
<el-table-column
align="center"
prop="dorm.name"
label="宿舍"
width="120"
>
</el-table-column>
<el-table-column
align="center"
label="操作"
width="300"
>
<template slot-scope="scope">
<el-button
icon="el-icon-edit"
size="mini"
@click="showEditStudent(scope.row)"
type="primary"
>编辑</el-button>
<el-button
icon="el-icon-delete"
size="mini"
@click="deleteStudent(scope.row)"
type="danger"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
style="margin-top:20px;"
@size-change="handleSizeChange"
@current-change="changePage"
:page-sizes="pageSizes"
:page-size="pageSize"
:current-page="currentPage"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="50%"
>
<el-form
ref="studentForm"
:model="student"
:rules="studentFormRules"
label-width="70px"
>
<el-form-item
label="学号"
prop="studentNo"
>
<el-input v-model="student.studentNo"></el-input>
</el-form-item>
<el-form-item
label="姓名"
prop="studentName"
>
<el-input v-model="student.studentName"></el-input>
</el-form-item>
<el-form-item
label="性别"
prop="sex"
>
<el-radio-group v-model="student.sex">
<el-radio :label="1">男</el-radio>
<el-radio :label="0">女</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="宿舍"
prop="dormId"
>
<el-select
v-model="student.dormId"
placeholder="请选择所属宿舍"
clearable
>
<el-option
v-for="dorm in dormList"
:key="dorm.id"
:label="dorm.name"
:value="dorm.id"
>
</el-option>
</el-select>
</el-form-item>
</el-form>
<span
slot="footer"
class="dialog-footer"
>
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button
type="primary"
@click="addOrEditStudent"
>确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
this.pageSize = val;
this.initStudent();
},
changePage(e) {
this.currentPage = e;
this.initStudent();
},
handleSelectionChange(row) {
this.ids = row;
},
initStudent() {
this.loading = true;
const params = {
page: this.currentPage,
size: this.pageSize
};
if (this.keyword != null && this.keyword != "") {
params.name = this.keyword;
}
this.getRequest("/api/student/list", params).then(resp => {
this.loading = false;
if (resp) {
this.studentList = resp.data;
this.total = resp.total;
}
});
},
initDorm() {
this.getRequest("/api/dorm/all").then(resp => {
if (resp) {
this.dormList = resp;
}
});
},
emptyStudent() {
this.student = {
studentNo: "",
studentName: "",
sex: 1,
dormId: null
};
},
showAddStudent() {
this.title = "添加学生";
this.emptyStudent();
this.dialogVisible = true;
},
showEditStudent(data) {
this.title = "编辑学生";
this.student = data;
this.student.dormId = data.dormId;
this.dialogVisible = true;
},
addOrEditStudent() {
if (this.student.id) {
this.$refs["studentForm"].validate(valid => {
if (valid) {
this.postRequest("/api/student/add", this.student).then(resp => {
if (resp) {
this.dialogVisible = false;
this.initStudent();
}
});
}
});
} else {
this.$refs["studentForm"].validate(valid => {
if (valid) {
this.postRequest("/api/student/add", this.student).then(resp => {
if (resp) {
this.dialogVisible = false;
this.initStudent();
}
});
}
});
}
},
deleteStudent(data) {
this.$confirm(
"此操作将永久删除【" + data.studentName + "】这行数据, 是否继续?",
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}
)
.then(() => {
this.postRequest("/api/student/del", [data]).then(resp => {
if (resp) {
this.$message({
type: "info",
message: resp.msg
});
this.initStudent();
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
},
deleteStudents() {
this.$confirm("此操作将永久删除选择数据, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.postRequest("/api/student/del", this.ids).then(resp => {
if (resp) {
this.$message({
type: "info",
message: resp.msg
});
this.ids = [];
this.initStudent();
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
}
},
mounted() {
this.initStudent();
this.initDorm();
},
data() {
return {
ids: [],
student: {
studentNo: "",
studentName: "",
sex: 1,
dormId: 0
},
studentList: [],
dormList: [],
pageSizes: [5, 10, 25, 50],
pageSize: 5,
total: 0,
currentPage: 1,
keyword: "",
dialogVisible: false,
title: "",
// 添加表单的验证规则对象
studentFormRules: {
studentNo: [
{ required: true, message: "请输入学号", trigger: "blur" },
{ min: 10, max: 10, message: "长度 10 个字符", trigger: "blur" }
],
studentName: [
{ required: true, message: "请输入姓名", trigger: "blur" },
{ min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
],
sex: [{ required: true, message: "请选择性别", trigger: "blur" }]
}
};
}
};
</script>
演示视频
基于springboot和Vue的宿舍管理系统