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

一、用户列表

1、编写api接口

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

2、表格渲染

​

​

3、分页

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
      }
    };
  },
};

• 页面中进行布局

        
            
                
                
                
            
        
        
            
        
        
             搜索
        
    

5、注册

略

6、修改用户

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

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

• 为编辑按钮绑定事件

• 在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()
    }
}

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、上传图片

 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
            }
        }
   }