1.章节介绍

前一篇介绍了教师管理模块，这一篇编写学生管理模块，需要的朋友可以拿去自己定制。：）

2.获取源码

源码是捐赠方式获取，详细请QQ联系我：）！

3.实现效果

学生列表

修改学生

4.模块代码

页面布局

<template><div><!-- 面包屑导航区 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item>首页</el-breadcrumb-item><el-breadcrumb-item>学生管理</el-breadcrumb-item><el-breadcrumb-item>学生列表</el-breadcrumb-item></el-breadcrumb><!-- 卡片视图 --><el-card><!-- 搜索 添加 --><el-row :gutter="20"><el-col :span="6"><el-inputplaceholder="请输入学生姓名"v-model="queryInfo.query"clearable@clear="getStudentList"><el-buttonslot="append"icon="el-icon-search"@click="getStudentList"></el-button></el-input></el-col><el-col :span="8"><el-button type="primary" @click="addDialogVisible = true">添加学生</el-button><el-button @click="exportData" type="success" icon="el-icon-download">导出数据</el-button><el-upload:show-file-list="false"accept="application/vnd.ms-excel"action="http://localhost:9000/api/student/upload":on-success="fileUploadSuccess":on-error="fileUploadError":disabled="fileUploadBtnText == '正在导入'":before-upload="beforeFileUpload"style="display: inline; margin-left:10px;"><el-buttontype="success":icon="uploadBtnIcon":loading="fileUploadBtnText == '正在导入'"><i class="fa fa-lg fa-level-up"></i>{{ fileUploadBtnText }}</el-button></el-upload></el-col></el-row><!-- 学生列表区域 --><el-table :data="studentList" border stripe><!-- stripe: 斑马条纹border：边框--><el-table-column type="index" label="序号"></el-table-column><el-table-column prop="studentNo" label="学号"></el-table-column><el-table-column prop="studentName" label="姓名"></el-table-column><el-table-column prop="gradeName" label="班级"></el-table-column><el-table-column prop="gender" label="性别"><template slot-scope="scope">{{ scope.row.gender == "F" ? "女" : "男" }}</template></el-table-column><el-table-columnprop="idno"label="身份证"width="200px"></el-table-column><el-table-column prop="phone" label="联系方式"></el-table-column><el-table-column prop="enrollDate" label="入学日期"><template slot-scope="scope">{{ moment(scope.row.enrollDate).format("YYYY-MM-DD") }}</template></el-table-column><el-table-column prop="address" label="家庭地址"></el-table-column><el-table-column prop="remark" label="备注"></el-table-column><el-table-column prop="createTime" label="创建时间" width="150px"><template slot-scope="scope">{{ moment(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}</template></el-table-column><el-table-column prop="updateTime" label="更新时间" width="150px"><template slot-scope="scope">{{ moment(scope.row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}</template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttontype="primary"icon="el-icon-edit"size="mini"circle@click="showEditDialog(scope.row.id)"></el-button><el-buttontype="danger"icon="el-icon-delete"size="mini"circle@click="removeById(scope.row.id)"></el-button></template></el-table-column></el-table><!-- 分页区域 --><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="queryInfo.pageNo":page-size="queryInfo.pageSize"layout="total, prev, pager, next, jumper":total="total"></el-pagination></el-card><!-- 添加学生的对话框 --><el-dialogtitle="添加学生":visible.sync="addDialogVisible"width="30%"@close="addDialogClosed"><!-- 内容主体 --><el-form:model="addForm"ref="addFormRef":rules="addFormRules"label-width="100px"><el-form-item label="学号" prop="studentNo"><el-input v-model="addForm.studentNo"></el-input></el-form-item><el-form-item label="姓名" prop="studentName"><el-input v-model="addForm.studentName"></el-input></el-form-item><el-form-item label="班级" prop="gradeId"><el-select v-model="addForm.gradeId" placeholder="请选择"><el-optionv-for="item in gradeList":key="item.id":label="item.gradeName":value="item.id"></el-option></el-select></el-form-item><el-form-item label="性别" prop="gender"><el-radio v-model="addForm.gender" label="F">女</el-radio><el-radio v-model="addForm.gender" label="M">男</el-radio></el-form-item><el-form-item label="身份证" prop="idno"><el-input v-model="addForm.idno"></el-input></el-form-item><el-form-item label="联系方式" prop="phone"><el-input v-model="addForm.phone"></el-input></el-form-item><el-form-item label="入学日期" prop="enrollDate"><el-date-pickerv-model="addForm.enrollDate"type="date"placeholder="选择日期"></el-date-picker></el-form-item><el-form-item label="家庭地址" prop="address"><el-input v-model="addForm.address"></el-input></el-form-item><el-form-item label="备注" prop="remark"><el-input v-model="addForm.remark"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="addDialogVisible = false">取 消</el-button><el-button type="primary" @click="add">确 定</el-button></span></el-dialog><!-- 修改学生的对话框 --><el-dialogtitle="修改学生信息":visible.sync="editDialogVisible"width="30%"@close="editDialogClosed"><!-- 内容主体 --><el-form:model="editForm"ref="editFormRef":rules="editFormRules"label-width="70px"><el-form-item label="学号"><el-input v-model="editForm.studentNo"></el-input></el-form-item><el-form-item label="姓名"><el-input v-model="editForm.studentName"></el-input></el-form-item><el-form-item label="班级" prop="gradeId"><el-select v-model="editForm.gradeId" placeholder="请选择"><el-optionv-for="item in gradeList":key="item.id":label="item.gradeName":value="item.id"></el-option></el-select></el-form-item><el-form-item label="性别" prop="gender"><el-radio v-model="editForm.gender" label="F">女</el-radio><el-radio v-model="editForm.gender" label="M">男</el-radio></el-form-item><el-form-item label="身份证" prop="idno"><el-input v-model="editForm.idno"></el-input></el-form-item><el-form-item label="联系方式" prop="phone"><el-input v-model="editForm.phone"></el-input></el-form-item><el-form-item label="学生姓名" prop="studentName"><el-input v-model="editForm.studentName"></el-input></el-form-item><el-form-item label="入学日期" prop="enrollDate"><el-date-pickerv-model="editForm.enrollDate"type="date"placeholder="选择日期"></el-date-picker></el-form-item><el-form-item label="家庭地址" prop="address"><el-input v-model="editForm.address"></el-input></el-form-item><el-form-item label="备注" prop="remark"><el-input v-model="editForm.remark"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="editDialogVisible = false">取 消</el-button><el-button type="primary" @click="editUser">确 定</el-button></span></el-dialog></div>
</template>

数据和事件

<script>
export default {data() {return {fileUploadBtnText: "导入数据",uploadBtnIcon: "el-icon-upload2",// 班级列表gradeList: [],// 获取学生列表查询参数对象queryInfo: {query: "",// 当前页数pageNo: 1,// 每页显示多少数据pageSize: 10},studentList: [],total: 0,// 添加学生对话框addDialogVisible: false,// 学生添加addForm: {studentNo: "",studentName: "",gradeId: "",gender: "F",idno: "",phone: "",address: "",remark: "",enrollDate: ""},// 学生添加表单验证规则addFormRules: {studentNo: [{ required: true, message: "请输入学号", trigger: "blur" },{min: 2,max: 10,message: "学生名的长度在2～10个字",trigger: "blur"}],studentName: [{ required: true, message: "请输入学生姓名", trigger: "blur" },{min: 2,max: 50,message: "学生姓名的长度在2～50个字",trigger: "blur"}],gradeId: [{ required: true, message: "请输入所属班级", trigger: "blur" }]},// 修改学生editDialogVisible: false,editForm: {},// 编辑学生表单验证editFormRules: {studentNo: [{ required: true, message: "请输入学号", trigger: "blur" }],studentName: [{ required: true, message: "请输入学生姓名", trigger: "blur" }]}};},created() {this.getStudentList();// 加载院系列表this.getGradeList();},methods: {fileUploadSuccess() {this.enabledUploadBtn = true;this.uploadBtnIcon = "el-icon-upload2";this.fileUploadBtnText = "导入数据";this.$message.success("数据导入成功！");this.getStudentList();},fileUploadError() {this.enabledUploadBtn = true;this.uploadBtnIcon = "el-icon-upload2";this.fileUploadBtnText = "导入数据";},beforeFileUpload(file) {this.enabledUploadBtn = false;this.uploadBtnIcon = "el-icon-loading";this.fileUploadBtnText = "正在导入";},// 导出数据exportData() {this.$http({method: "GET",url: "student/export",params: {},responseType: "blob"}).then(res => {/* 方式1，文件名随机let blob = new Blob([res.data], { type: "application/vnd.ms-excel" });let url = window.URL.createObjectURL(blob);window.location.href = url;*//* 方式2，支持IE10；文件名自定义*/let blob = new Blob([res.data], { type: "application/vnd.ms-excel" }); // 将服务端返回的文件流（二进制）excel文件转化为bloblet fileName = "学生列表.xls";if (window.navigator && window.navigator.msSaveOrOpenBlob) {// IEwindow.navigator.msSaveOrOpenBlob(blob, fileName);} else {let objectUrl = (window.URL || window.webkitURL).createObjectURL(blob);let downFile = document.createElement("a");downFile.style.display = "none";downFile.href = objectUrl;downFile.download = fileName; // 下载后文件名document.body.appendChild(downFile);downFile.click();document.body.removeChild(downFile); // 下载完成移除元素// window.location.href = objectUrlwindow.URL.revokeObjectURL(objectUrl); // 只要映射存在，Blob就不能进行垃圾回收，因此一旦不再需要引用，就必须小心撤销URL，释放掉blob对象。}}).catch(err => {console.log(err);});},async getStudentList() {const { data: res } = await this.$http.get("student/list", {params: this.queryInfo});if (res.code !== 200) {return this.$message.error("获取学生列表失败！");}this.studentList = res.data.records;this.total = res.data.total;},async getGradeList() {const { data: res } = await this.$http.get("grade/listAll", {});if (res.code !== 200) {return this.$message.error("获取院系列表失败！");}this.gradeList = res.data;},// 监听 pageSize改变的事件handleSizeChange(newSize) {// console.log(newSize)this.queryInfo.pageSize = newSize;this.getStudentList();},// 监听 页码值 改变事件handleCurrentChange(newSize) {// console.log(newSize)this.queryInfo.pageNo = newSize;this.getStudentList();},// 监听 添加学生对话框的关闭事件addDialogClosed() {this.$refs.addFormRef.resetFields();},// 添加学生add() {// 提交请求前，表单预验证this.$refs.addFormRef.validate(async valid => {// console.log(valid)// 表单预校验失败if (!valid) return;const { data: res } = await this.$http.post("student/modify",this.addForm);if (res.code !== 200) {this.$message.error("添加学生失败！");return;}this.$message.success("添加学生成功！");// 隐藏添加学生对话框this.addDialogVisible = false;this.getStudentList();});},// 编辑学生信息async showEditDialog(id) {const { data: res } = await this.$http.get("student/" + id);if (res.code !== 200) {return this.$message.error("查询学生信息失败！");}this.editForm = res.data;this.editDialogVisible = true;},// 监听修改学生对话框的关闭事件editDialogClosed() {this.$refs.editFormRef.resetFields();},// 修改学生信息editUser() {// 提交请求前，表单预验证this.$refs.editFormRef.validate(async valid => {// console.log(valid)// 表单预校验失败if (!valid) return;const { data: res } = await this.$http.post("student/modify", {id: this.editForm.id,studentNo: this.editForm.studentNo,studentName: this.editForm.studentName,gradeId: this.editForm.gradeId,gender: this.editForm.gender,idno: this.editForm.idno,phone: this.editForm.phone,enrollDate: this.editForm.enrollDate,address: this.editForm.address,remark: this.editForm.remark});if (res.code !== 200) {this.$message.error("更新学生信息失败！");}// 隐藏添加学生对话框this.editDialogVisible = false;this.$message.success("更新学生信息成功！");this.getStudentList();});},// 删除学生async removeById(id) {const confirmResult = await this.$confirm("确定删除该学生?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).catch(err => err);// 点击确定 返回值为：confirm// 点击取消 返回值为： cancelif (confirmResult !== "confirm") {return this.$message.info("已取消删除");}const { data: res } = await this.$http.post("student/remove/" + id);if (res.code !== 200) return this.$message.error("删除学生失败！");this.$message.success("删除学生成功！");this.getStudentList();}}
};
</script>

Vue+SpringBoot+ElementUI实战学生管理系统-10.学生管理模块相关推荐

Vue+SpringBoot+ElementUI实战学生管理系统-9.教师管理模块
1.章节介绍前一篇介绍了班级管理模块,这一篇编写教师管理模块,需要的朋友可以拿去自己定制.:) 2.获取源码源码是捐赠方式获取,详细请QQ联系我 :)! 3.实现效果教师列表修改教师 4.模块 ...
Vue+SpringBoot+ElementUI实战学生管理系统-8.班级管理模块
1.章节介绍前一篇介绍了专业管理模块,这一篇编写班级管理模块,需要的朋友可以拿去自己定制.:) 2.获取源码源码是捐赠方式获取,详细请QQ联系我 :)! 3.实现效果班级列表修改班级 4.模块 ...
c语言学生管理系统结点,学生管理系统(数据结构课程设计之完整代码)
<学生管理系统(数据结构课程设计之完整代码)>由会员分享,可在线阅读,更多相关<学生管理系统(数据结构课程设计之完整代码)(14页珍藏版)>请在人人文库网上搜索. 1.数据结构 ...
【024】Vue+Springboot+mysql员工考勤管理系统(多角色登录、请假、打卡)(含源码、数据库、运行教程、实验报告)
前排提示:项目源码已放在文末基于Vue+Springboot+mysql员工考勤管理系统(多角色登录.请假.打卡) 开发环境:Springboot+Mysql+Vue+Nodejs+Maven+JD ...
JAVA JSP学生信息档案管理系统JSP学生管理系统JSP学生档案管理系统JSP学生信息管理系统
JAVA JSP学生信息档案管理系统JSP学生管理系统JSP学生档案管理系统JSP学生信息管理系统 protected void doGet(HttpServletRequest req, HttpS ...
Vue+SpringBoot进销存管理系统源码【源码免费分享】
淘源码-国内专业的免费源码下载平台 Vue+SpringBoot进销存管理系统源码源码免费分享,需要学习可私信我. 系统介绍: 这是一款面向中小企业的供销链管理系统,基于J2EE快速开发平台Jeec ...
vue后台管理系统之日志管理模块
前端的后台的日志管理模块功能的实现 (使用的是elementUI框架) 这是日志管理模块实现的效果图 <div class="log-header&q ...
java-ArrayList实现一个电商管理系统的商品库存管理模块
java-ArrayList实现一个电商管理系统的商品库存管理模块实现一个电商管理系统的商品库存管理模块商品(Goods)包含如下属性信息: 编号(int no) 商品名(String name ...
解剖档案管理系统平台的管理模块介绍
你们所熟悉的办公管理系统有什么管理模块呢?相信大家拿出手机进去就知道了.而档案管理系统平台又有什么管理模块呢?为什么那么多人使用?下面盘点以下: 1.文件管理 2.档案管理 3.综合知识管理 4.OA ...

Vue+SpringBoot+ElementUI实战学生管理系统-10.学生管理模块

1.章节介绍

2.获取源码

3.实现效果

学生列表

修改学生

4.模块代码

页面布局

数据和事件

Vue+SpringBoot+ElementUI实战学生管理系统-10.学生管理模块相关推荐

最新文章

热门文章