学生管理系统-03项目案例（3）

一、用户列表

1、编写api接口

//导入封装后的axios
import {instance} from '@/util/request'
export default{getUsers:params=>instance.get('/users/getUsers',{params})
}

2、表格渲染

<template><el-card><!-- 当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。--><el-table :data="list" stripe border height="600"><el-table-column prop="username" label="用户名" align="center" /><el-table-column prop="phone" label="电话" align="center"/><el-table-column prop="email" label="邮箱" align="center"/><el-table-column prop="auth" label="角色" align="center"><template slot-scope="scope"><el-tag :type="scope.row.auth==1?'primary':'success'">{{scope.row.auth==1?"超级管理员":scope.row.auth==2?"普通管理员":""}}</el-tag></template></el-table-column><el-table-column prop="image" label="头像" align="center"><template slot-scope="scope"><el-avatar :size="50" :src="scope.row.image"></el-avatar></template></el-table-column><el-table-column label="操作" align="center"><template slot-scope="scope"><el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button><el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button></template></el-table-column></el-table></el-card>
</template>
​
<script>
export default {data() {return {list: [],total: 0,};},methods: {async getUsers() {const result = await this.$api.users.getUsers();console.log("result", result.data);this.list = result.data.result;this.total = result.data.total;},},created() {this.getUsers();},
};
</script>
​
<style>
</style>

3、分页

 <!-- 分页区域 --><el-paginationbackgroundlayout="sizes, prev, pager, next, jumper, ->, total, slot":total="total":page-size="query.pageSize":current-page="query.currentPage":page-sizes="[5,10,15,20]"@size-change="changePageSize"@current-change="changeCurrentPage"></el-pagination>

export default {data() {return {list: [],total: 0,query:{pageSize:5,currentPage:1}};},methods: {async getUsers() {const result = await this.$api.users.getUsers(this.query);console.log("result", result.data);this.list = result.data.result;this.total = result.data.total;},changePageSize(args){this.query.pageSize=argsthis.getUsers()},changeCurrentPage(args){this.query.currentPage=argsthis.getUsers()}},created() {this.getUsers();},
};

4、搜索功能

• 首先在data中的query对象中添加type和value属性

export default {data() {return {query:{type:'',value:'',pageSize:5,currentPage:1}};},
};

• 页面中进行布局

<el-form :inline="true"><el-form-item><el-select placeholder="请选择类型" v-model="query.type"><el-option label="用户名" value="username"></el-option><el-option label="手机号" value="phone"></el-option><el-option label="邮箱" value="email"></el-option></el-select></el-form-item><el-form-item><el-input placeholder="请输入值" v-model="query.value"></el-input></el-form-item><el-form-item><el-button icon="el-icon-search" type="primary" @click="getUsers">搜索</el-button></el-form-item></el-form>

5、注册

略

6、修改用户

• 在api接口中编写修改方法

import {instance} from '@/util/request'
export default{updateUsers:data=>instance.put('/users/updateUsers',data)
}

• 为编辑按钮绑定事件

<template slot-scope="scope"><el-button type="primary" size="mini" icon="el-icon-edit" @click="updateUser(scope)">编辑</el-button>     
</template>

• 在data中定义

data(){return{updateDialogVisible:false,updateUserItem:{username:'',auth:1}}
}

• 在methods中定义一个修改方法

methods:{async updateUserApi(){console.log('修改后的数据',this.updateUserItem);const result=await this.$api.users.updateUsers(this.updateUserItem)console.log('resultss',result);if(result.code){this.$message.success(result.message)//模态框关闭this.updateDialogVisible=false}}
}

• 使用深浅拷贝解决修改中的一个问题

如上程序有一个问题，就是当修改的时候，在未点击确认按钮之前，当文本框中的内容变化，table表格中对应的行也在变化，页面刷新后数据又还原了，实际上这样是有问题的，解决方案就是对数据进行深拷贝

methods:{updateUser(args){//对数据进行深拷贝this.updateUserItem={...args.row}this.updateDialogVisible=true},async updateUserApi(){const result=await this.$api.users.updateUsers(this.updateUserItem)if(result.code){this.$message.success(result.message)//重新渲染列表页面this.getUsers()//模态框关闭this.updateDialogVisible=false}}
}

二、学员管理

1、增加学员

1.1、编写api接口

• 首先在api/modules文件夹下创建students.js文件，在该文件中编写增加的方法

import {instance} from '@/util/request'
export default{addStudents:data=>instance.post('/students/addStudents',data)
}

• 在api文件下的index.js中对studnets模块进行汇总

import users from "./modules/users";
import students from "./modules/students";
export default{users,students
}

1.2、获取专业信息

• 首先在api/modules文件夹下新建subjects.js文件，在该文件下定义查询专业的方法

import {instance} from '@/util/request'
export default{getSubjects:params=>instance.get("/subjects/getSubjects",{params})
}

• 然后在api/index.js中进行汇总

import users from "./modules/users";
import students from "./modules/students";
import subjects from "./modules/subjects";
export default{users,students,subjects
}

• 在studentList.vue组件中获取所有的专业并绑定到下拉列表中

export default {data(){return{addStudentDialogVisible:false,subjectsAllList:[]}},methods:{openAddDialog(){this.addStudentDialogVisible=true},handleCloseAddStudentDialog(){this.addStudentDialogVisible=false},//获取所有的专业async getAllSubjects(){const result=await this.$api.subjects.getSubjects()console.log('所有专业',result.data.result);this.subjectsAllList=result.data.result}},created(){this.getAllSubjects()}
}

<el-form-item label="专业"><el-select><el-option v-for="item in subjectsAllList" :key="item._id" :label="item.name" :value="item._id"></el-option></el-select>
</el-form-item>

1.3、通过专业获取班级信息

这里通过watch监听器来完成

watch:{'addStudentItem.subjectsId':{handler:async function(newVal){let result=await this.$api.classes.getClassesBySubjectsId(newVal)this.classesBySubjectList=result.data.resultthis.addStudentItem.classesId=""}}}

1.4、上传图片

<el-uploadclass="avatar-uploader"action="http://www.zhaijizhe.cn:3005/images/uploadImages":show-file-list="false":on-success="handleAvatarSuccess":before-upload="beforeAvatarUpload"><img v-if="addStudentItem.image" :src="addStudentItem.image" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload>

 methods:{handleAvatarSuccess(args){console.log('args',args);this.addStudentItem.image=`http://www.zhaijizhe.cn:3005${args.data[0]}`},beforeAvatarUpload(file){const isJPG = file.type === 'image/jpeg';const isLt2M = file.size / 1024 / 1024 < 2;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG 格式!');}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 2MB!');}return isJPG && isLt2M;}},

1.5、增加学生

 methods:{async addStudentApi(){// console.log('学生对象',this.addStudentItem);const result=await this.$api.students.addStudents(this.addStudentItem)if(result.code){this.$message.success(result.message)//将表单中的数据清空this.addStudentItem.name=""this.addStudentItem.age=""this.addStudentItem.gender=""this.addStudentItem.subjectsId=""this.addStudentItem.classesId=""this.addStudentItem.image=""this.addStudentDialogVisible=false}}}