vue基於element-ui製做的成績管理系統（四）我的信息

時間 2019-11-20

標籤 vue 基於 element 製做成績管理系統我的信息简体版

原文原文鏈接

1.在views文件夾下新建person-msg.vuevue

頁面佈局以下：es6

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

附我的信息請求接口：