Vue（+ element UI + Django）编写学生管理页面 Vue

【Vue（+ element UI + Django）编写学生管理页面】初学vue的时候写的，采用的是npm形式引入vue和element-ui，后端逻辑使用Django来写的，对于测试开发学习些测试平台，是个很好的入门文章。
写完后台的样子如下：

文章图片

html代码：

Document - 锐客网src="https://cdn.jsdelivr.net/npm/vue">src="https://unpkg.com/element-ui/lib/index.js">src="https://unpkg.com/axios/dist/axios.min.js"> 学习信息管理系统 slot="title">班级管理 slot="title">学生信息 slot="title">讲师信息 slot="title">课程管理首页学生信息查询全部添加导入Excel 导出Excel 批量删除文章图片 slot="footer" class="dialog-footer"> 确定取消学习信息管理系统版权所有：2020-09-22 src="https://www.it610.com/article/js/index.js">

js代码：

const app = new Vue({ el: '#app', data() { //校验学号是否存在！ const rulesSNo = (rule, value, callback) => { if (this.isEdit) { callback(); } axios.post( this.baseURL + "sno/check/", { sno: value, } ) .then((res) => { if (res.data.code === 200) { if (res.data.exists) { callback(new Error("学号已经存在！")) } else { callback(); } } else { callback(new Error("校验学号后端出现异常")) } } ) .catch(); }return { msg: 'hello, vue!!!', students: [], // 学生数量 pageStudents: [], //分页后的每页学生数量 selectStudents: [], //选择复选框选择时选中的学生 baseURL: "http://127.0.0.1:8000/",total: 0, currentpage: 1, pagesize: 10, inputStr: "", dialogVisible: false, dialogTitle: "", isEdit: false, isView: false, studentForm: { sno: "", name: "", gender: "", birthday: "", mobile: "", email: "", address: "", image: "", imageUrl: "", }, rules: { sno: [ { required: true, message: "学号不能为空", trigger: "blur" }, { pattern: /^[9][5]\d{3}/, message: "学号必须是95开头的五位数", trigger: "blur" }, { validator: rulesSNo, trigger: "blur" }, ], name: [ { required: true, message: "姓名不能为空", trigger: "blur" }, { pattern: /^[\u4e00-\u9fa5]{2,5}$/, message: "姓名必须是2到5个汉字", trigger: "blur" }, ], gender: [ { required: true, message: "性别不能为空", trigger: "change" }, ], birthday: [ { required: true, message: "出生日期不能为空", trigger: "change" }, ], mobile: [ { required: true, message: "手机号码不能为空", trigger: "blur" }, { pattern: /^[1][35789]\d{9}$/, message: "手机号码必须要符合规范", trigger: "blur" }, ], email: [ { required: true, message: "邮箱地址不能为空", trigger: "blur" }, { pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, message: "邮箱地址必须要符合规范", trigger: "blur" }, ], address: [ { required: true, message: "家庭地址不能为空", trigger: "blur" }, ], }, } }, mounted() { //获取所有学生信息 this.getStudents(); }, methods: { //获取所有学生的信息 getStudents: function () { //记录this的地址 let that = this //使用Axios实现Ajax请求 axios .get(that.baseURL + "student/") .then(function (res) { //把数据给students if (res.data.code == 200) { //把数据给students that.students = res.data.data; that.total = res.data.data.length; that.getPageStudents(); //提示 that.$message({ showClose: true, message: '数据加载成功', type: 'success' }); } else { that.$message({ showClose: true, message: '错了哦，这是一条错误消息', type: 'error' }); } }) .catch(function (err) { console.log(err); }); }, //获得当前页的数据 getPageStudents() { //清空pageStudents中的数据 this.pageStudents = []; for (let i = (this.currentpage - 1) * this.pagesize; i < this.total; i++) { this.pageStudents.push(this.students[i]); if (this.pageStudents.length == this.pagesize) break; } }, //查询全部 getAllStudents() { this.inputStr = ""; this.getStudents(); }, //根据学号查询 getImageBySno(sno) { for (oneStudent of this.students) { if (oneStudent.sno == sno) { return oneStudent.image; } } }, //添加学生信息 addStudent(row) { this.dialogTitle = "添加学生信息"; this.dialogVisible = true; }, //查看学生信息 viewStudent(row) { this.dialogTitle = "查看学生信息"; this.dialogVisible = true; this.isView = true; this.studentForm = JSON.parse(JSON.stringify(row)); this.studentForm.image = this.getImageBySno(row.sno); this.studentForm.imageUrl = this.baseURL + 'media/' + this.studentForm.image; }, //更新学生信息 updateStudent(row) { this.dialogTitle = "更新学生信息"; this.dialogVisible = true; this.isEdit = true; this.studentForm = JSON.parse(JSON.stringify(row)) this.studentForm.image = this.getImageBySno(row.sno); this.studentForm.imageUrl = this.baseURL + 'media/' + this.studentForm.image; }, closeDialogForm(formName) { //重置表单校验 this.$refs[formName].resetFields(); //清空 this.studentForm.sno = ""; this.studentForm.name = ""; this.studentForm.gender = ""; this.studentForm.birthday = ""; this.studentForm.mobile = ""; this.studentForm.email = ""; this.studentForm.address = ""; this.studentForm.image = ""; this.studentForm.imageUrl = ""; this.dialogVisible = false; this.isEdit = false; this.isView = false; }, submitStudentForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { if (this.isEdit) { //修改 this.sumbitUpdateStudent(); } else { //添加 this.submitAddStudent(); }alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, //添加到数据库的函数 submitAddStudent() { let that = this; axios .post(that.baseURL + 'student/add/', that.studentForm) .then(res => { //执行成功 if (res.data.code === 200) { // 获取所有学生信息 that.students = res.data.data; // 获取记录条数 that.total = res.data.data.length; // 获取分页信息 that.getPageStudents(); //提示 that.$message({ message: '数据修改成功', type: 'success' }); // 关闭dialo弹窗 this.closeDialogForm('studentForm'); } else { that.$message.error(res.data.msg); } }) .catch(err => { console.log(err); that.$message.error("修改时获取后端数据异常"); }) }, //修改更新到数据库 sumbitUpdateStudent() { let that = this; axios .post(that.baseURL + 'student/update/', that.studentForm) .then(res => { //执行成功 if (res.data.code === 200) { // 获取所有学生信息 that.students = res.data.data; // 获取记录条数 that.total = res.data.data.length; // 获取分页信息 that.getPageStudents(); //提示 that.$message({ message: '数据加载成功', type: 'success' }); // 关闭dialo弹窗 this.closeDialogForm('studentForm'); } else { that.$message.error(res.data.msg); } }) .catch(err => { console.log(err); that.$message.error("获取后端数据异常"); }) }, deleteStudent(row) { //等待确认 this.$confirm('是否确认删除学生信息【学号：' + row.sno + '\t姓名：' + row.name + '】', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { //确认删除响应事件 let that = this //调用后端接口 axios.post(that.baseURL + 'student/delete/', { sno: row.sno }) .then(res => { //执行成功 if (res.data.code === 200) { // 获取所有学生信息 that.students = res.data.data; // 获取记录条数 that.total = res.data.data.length; // 获取分页信息 that.getPageStudents(); //提示 that.$message({ message: '数据删除成功', type: 'success' }); } else { that.$message.error(res.data.msg); } }) .catch(err => { console.log(err); that.$message.error("删除数据时后端数据异常： " + str(err)); }); this.$message({ type: 'success', message: '删除成功!' }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, //批量删除 deleteStudents(row) { //等待确认 this.$confirm('是否确认删除' + this.selectStudents.length + '个学生信息吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { //确认删除响应事件 let that = this //调用后端接口 axios.post(that.baseURL + 'students/delete/', { student: that.selectStudents }) .then(res => { //执行成功 if (res.data.code === 200) { // 获取所有学生信息 that.students = res.data.data; // 获取记录条数 that.total = res.data.data.length; // 获取分页信息 that.getPageStudents(); //提示 that.$message({ message: '数据批量删除成功', type: 'success' }); } else { that.$message.error(res.data.msg); } }) .catch(err => { console.log(err); that.$message.error("删除数据时后端数据异常： " + err); }); this.$message({ type: 'success', message: '删除成功!' }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); }, //选择学生头像后点击确定触发的事件 uploadPicturePost(file) { let that = this; // 定义一个formdata的类 let fileReq = new FormData(); //把照片传进去 fileReq.append('avatar', file.file); //使用Axios发起Ajax请求 axios({ method: 'post', url: that.baseURL + 'upload/', data: fileReq }).then(res => { //根据code判断是否成功 if (res.data.code === 200) { that.studentForm.image = res.data.name; that.studentForm.imageUrl = that.baseURL + 'media/' + res.data.name; that.$message({ message: '上传头像成功', type: 'success' }); } else { //失败提示 that.$message.error(res.data.msg); } }).catch(err => { console.log(err); that.$message.error("上传头像时后端数据异常： " + err); }); }, //查询学生信息 queryStudents() { // 使用ajax请求，post传递inputstr let that = this axios .post( that.baseURL + "student/query/", { inputstr: that.inputStr } ) .then(function (res) { if (res.data.code == 200) { that.students = res.data.data; that.total = res.data.data.length; that.getPageStudents(); //提示 that.$message({ showClose: true, message: '数据加载成功', type: 'success' }); } else { that.$message({ showClose: true, message: '错了哦，这是一条错误消息', type: 'error' }); } }) .catch(function (err) { console.log(err); that.$message({ showClose: true, message: err, type: 'error' }); }); }, //上传excel文件 uploadExcelPost(file) { let that = this; let fileReq = new FormData(); fileReq.append('excel', file.file); //使用Axios发起Ajax请求 axios({ method: 'post', url: that.baseURL + 'excel/import/', data: fileReq }).then(res => { //根据code判断是否成功 if (res.data.code === 200) { that.students = res.data.data; that.total = res.data.data.length; //分页 that.getPageStudents(); //弹出框体显示结果 this.$alert('本次导入完成，成功：' + res.data.success + " 失败： " + res.data.error, '导入结果展示', { confirmButtonText: '确定', }); //打印失败明细 console.log("本次导入失败的学号： ") console.log(res.data.errors) } else { //失败提示 that.$message.error(res.data.msg); } }).catch(err => { console.log(err); that.$message.error("导入exccel时后端数据异常： " + err); }); }, //导出excel exportToExcel() { let that = this; axios.get(that.baseURL + 'excel/export/') .then(res => { if (res.data.code === 200) { let url = that.baseURL + 'media/' + res.data.name; console.log(url) //下载 window.open(url); } else { //失败提示 that.$message.error(res.data.msg); } }) .catch(err => { console.log(err); that.$message.error("导出exccel时后端数据异常： " + err); }); }, //分页时修改每页的行数 handleSizeChange(size) { this.pagesize = size; this.getPageStudents(); }, //调整当前的页码 handleCurrentChange(pageNumber) { this.currentpage = pageNumber; this.getPageStudents(); }, handleSelectionChange(data) { this.selectStudents = data console.log(this.selectStudents) }, }, })

css代码

html, body, #app, .el-container { margin: 0px; padding: 0px; height: 100%; } .el-header { background-color: #b3c0d1; color: #333; text-align: left; line-height: 80px; font-size: 36px; font-weight: bold; }.el-footer { background-color: #b3c0d1; color: #333; text-align: center; line-height: 30px; }.el-aside { background-color: #d3dce6; color: #333; text-align: center; line-height: 200px; }.el-main { background-color: #e9eef3; color: #333; }body > .el-container { margin-bottom: 40px; }.el-container:nth-child(5) .el-aside, .el-container:nth-child(6) .el-aside { line-height: 260px; }.el-container:nth-child(7) .el-aside { line-height: 320px; }.el-dialog .avatar-uploader .el-upload { border: 1px dashed #d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; } .el-dialog .avatar-uploader .el-upload:hover { border-color: #409EFF; } .el-dialog .avatar-uploader-icon { font-size: 28px; color: #8c939d; width: 178px; height: 178px; line-height: 178px; text-align: center; } .el-dialog .avatar { width: 178px; height: 178px; display: block; }

后端代码：
https://download.csdn.net/download/tt75281920/13203474