vue基于element-ui制作的成绩管理系统（四）个人信息

最新推荐文章于 2025-06-12 00:41:19 发布

转载最新推荐文章于 2025-06-12 00:41:19 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ycc-521/p/9597502.html

文章标签：

#javascript #ui #ViewUI

1.在views文件夹下新建person-msg.vue

页面布局如下：

<el-row>
  <el-col :span="24">
    <div v-if="Teacherform">
      <h4 class="title">教师信息</h4>
　　　　//渲染教师信息
      <el-table :data="teacherData" border style="width: 100%" >
        <el-table-column prop="id" label="账号"></el-table-column>
        <el-table-column prop="tname" label="姓名"></el-table-column>
        <el-table-column prop="tsex" label="性别"></el-table-column>
        <el-table-column prop="tdepart" label="部门"></el-table-column>
        <el-table-column prop="class_cno" label="课程名"></el-table-column>
        <el-table-column prop="passwd" label="密码"></el-table-column>
        <el-table-column prop="role" label="角色"></el-table-column>
      </el-table>
    </div>
    <div v-if="Studentform">
      <h4 class="title">学生信息</h4>
　　　　//渲染学生信息
      <el-table :data="studentData" border style="width: 100%" >
        <el-table-column prop="id" label="学号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
        <el-table-column prop="major" label="专业"></el-table-column>
        <el-table-column prop="depart" label="院系"></el-table-column>
        <el-table-column prop="term" label="学期"></el-table-column>
        <el-table-column prop="year" label="年级"></el-table-column>
        <el-table-column prop="passwd" label="密码"></el-table-column>
        <el-table-column prop="role" label="角色"></el-table-column>
      </el-table>
    </div>
  </el-col>
</el-row>

<script>
  import Main from '../api.js';   //引用接口js,所有请求的接口都在这个里面
    export default {
        name: "person-msg",
        data(){
          return{
            teacherData:[],
            studentData:[],
            Teacherform:false,
            Studentform:false
          }
        },
        mounted(){
          this.init();   //页面初始化加载
        },
        methods:{
          init(){
            var id = sessionStorage.getItem('userId');   //获得用户登录信息的id和role
            var role = sessionStorage.getItem('userRole');
　　　　　　　　//传id和role给后台
            this.$http.get(Main.getPersonmsg(id,role)).then(res => {
             let {errCode,errMsg,dataList}= res.data;
             if(errCode==0){
　　　　　　　　　//如果是教师，显示教师信息
               if(role==1){
                 this.Teacherform = true;
                 const teacherArray=dataList;
                 this.teacherData=teacherArray;
               }else{
                 this.Studentform = true;
                 const studentArray=dataList;
                 this.studentData = studentArray;
               }
             }else{
               this.$message.error(errMsg)
             }
            }, response => {
              this.$message.error('error submit!!');
              return false;
            });
          }
       }
    }
</script>

附个人信息请求接口：