项目实训记录（第14-15周）

前言

最近开始收尾工作了，把一些小的功能加上，然后就是漫长的改bug。如果没有bug，这个世界将会是多么美好。

---

一、搜索课程号

之前进入某一班级靠的是在one_class页面点击进入班级按钮进入的班级，现在加上可以直接点击班级概况的导航栏，并在上方搜索栏中输入课程号对某一具体班级进行作业、讨论、计分等功能。
one_class.vue页面代码如下：

<template>
  <div id="one_class">

    <el-container>
      <el-header>
        <el-row>
          <el-col :span="2">
          </el-col>
          <el-col :span="4">
            <el-input
                placeholder="请输入课程号"
                v-model="input"
                prefix-icon="el-icon-search"
                clearable>
            </el-input>
          </el-col>
          <el-col :span="2">      </el-col>
          <el-col :span="2">
            <el-button
                type="primary" plain
                @click="Search(input)">搜索课程
            </el-button>
          </el-col>

        </el-row>

      </el-header>
      <el-main>

        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="作业" name="homework">
            <div :is="currentView1" v-if="if_show" :cid="cid" keep-alive>
            </div>
          </el-tab-pane>
          <el-tab-pane label="讨论" name="discussion">
            <div :is="currentView2" v-if="if_show" :cid="cid"  keep-alive>
            </div>
          </el-tab-pane>
          <el-tab-pane label="分数" name="score">
            <div :is="currentView3" v-if="if_show" :cid="cid" keep-alive>
            </div>
          </el-tab-pane>

        </el-tabs>


      </el-main>
    </el-container>

  </div>

</template>

<script>
export default {
  name: "teacher_oneclass",

  components: {
    //以下方式引入路由是路由的懒加载，有利于页面优化
    homework: resolve => {
      require(['./tuopu.vue'], resolve)
    },
    discussion: resolve => {
      require(['./ArticleComment.vue'], resolve)
    },
    score: resolve => {
      require(['./score.vue'], resolve)
    }
  },
  data() {
    return {
      cid:'',
      my_user:'',
      input: '',
      activeName: 'second',
      currentView1: 'homework', //当前组件
      currentView2: 'discussion', //当前组件
      currentView3: 'score', //当前组件
      if_show:true

    }
  },

  created() {
    if(this.$route.query.cid!=null){
      this.cid=this.$route.query.cid
    }

    console.log(this.cid)
    this.my_user=this.$store.getters.id
    if(this.my_user===''){
      this.my_user=sessionStorage.getItem('teacher_id')
    }
  },

  methods: {
    Search(input) {
      this.cid=input
      console.log(input);
      console.log(this.cid);
      this.if_show = this.if_show?false:true;
      this.$nextTick(function(){//DOM变化回调函数：v-for渲染已完成
        this.if_show = this.if_show?false:true;
      })

    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },

}

</script>

<style scoped>

.el-row {
  margin-bottom: 20px;
&:last-child {
   margin-bottom: 0;
 }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

其中有一个很关键的逻辑是不能让一个人进入不属于自己的班级，如果只根据课程号进行跳转的话，那任意一个人就可以对任意一个班级进行任意操作了，所以这里要加上安全认证。

二、修正拓扑图

之前的生成的帮助老师查找学生的拓扑图不能拖动，调整了前段之后，拓扑图的边和点都能拖动了，看起来高级了一点

三、学生端一些功能的开发

在学生端，学生可以查看自己的讨论，作业，考试成绩的原始分数

四、修改bug

这真是整个开发工作里面最累的一件事。经常出现明明觉得原先在本地上好好的，但是到服务器上又有问题了。我怀疑了好久，是不是服务器有问题，但是后来都证实不是服务器有问题，就是我原先写的有问题，只不过原先在本地测试不充分，有一些情况没有测试到。这里举几个有代表性的例子：
1、前端本应该返回float的地方返回NaN，找了好久，后来才发现原来是后端出现了0/0的情况，所以返回了NaN。
2、理想情况下，数据库应该返回一个float的地方，因为数据库没有找到这个值，所以返回的是空值，但要是直接赋值给float变量就会报错。
3、后端传给前端对象类的时候，对象的各个属性都是什么意思一定要用注释写下来，我就因为讨论区的reply（2级讨论）的to和from属性不知道是什么意思了，导致找了好半天的错。