学生管理系统-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-pagination
       background
       layout="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=args
      this.getUsers()
    },
    changeCurrentPage(args){
       this.query.currentPage=args
       this.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.result
                this.addStudentItem.classesId=""
            }
        }
    }

1.4、上传图片

<el-upload
        class="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
            }
        }
   }