一、用戶列表

1、編寫api接口

//導(dǎo)入封裝后的axios
import {instance} from '@/util/request'
export default{
 ? getUsers:params=>instance.get('/users/getUsers',{params})
}

2、表格渲染

<template>
 ?<el-card>
 ? ?<!-- 
 ? ? ? ? ? ?當el-table元素中注入data對象數(shù)組后，
 ? ? ? ? ? ?在el-table-column中用prop屬性來對應(yīng)對象中的鍵名即可填入數(shù)據(jù)，
 ? ? ? ? ? ?用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、分頁

 <!-- 分頁區(qū)域 -->
 ? ? <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('修改后的數(shù)據(jù)',this.updateUserItem);
      const result=await this.$api.users.updateUsers(this.updateUserItem)
      console.log('resultss',result);
      if(result.code){
        this.$message.success(result.message)
        //模態(tài)框關(guān)閉
        this.updateDialogVisible=false
      }
    }
}

• 使用深淺拷貝解決修改中的一個問題

如上程序有一個問題，就是當修改的時候，在未點擊確認按鈕之前，當文本框中的內(nèi)容變化，table表格中對應(yīng)的行也在變化，頁面刷新后數(shù)據(jù)又還原了，實際上這樣是有問題的，解決方案就是對數(shù)據(jù)進行深拷貝

methods:{
    updateUser(args){
      //對數(shù)據(jù)進行深拷貝
      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()
        //模態(tài)框關(guān)閉
        this.updateDialogVisible=false
      }
    }
}

二、學(xué)員管理

1、增加學(xué)員

1.1、編寫api接口

• 首先在api/modules文件夾下創(chuàng)建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、獲取專業(yè)信息

• 首先在api/modules文件夾下新建subjects.js文件，在該文件下定義查詢專業(yè)的方法

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組件中獲取所有的專業(yè)并綁定到下拉列表中

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

<el-form-item label="專業(yè)">
   <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、通過專業(yè)獲取班級信息

這里通過watch監(jiān)聽器來完成文章來源地址http://www.zghlxwxcb.cn/news/detail-606466.html

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、增加學(xué)生

 methods:{
        async addStudentApi(){
            // console.log('學(xué)生對象',this.addStudentItem);
            const result=await this.$api.students.addStudents(this.addStudentItem)
            if(result.code){
                this.$message.success(result.message)
                //將表單中的數(shù)據(jù)清空
                this.addStudentItem.name=""
                this.addStudentItem.age=""
                this.addStudentItem.gender=""
                this.addStudentItem.subjectsId=""
                this.addStudentItem.classesId=""
                this.addStudentItem.image=""
                this.addStudentDialogVisible=false
            }
        }
   }

到了這里，關(guān)于學(xué)生管理系統(tǒng)-03項目案例（3）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！