谷粒学院80——课程大纲管理前端实现

我们可以采用之前课程列表的方法实现前端，即直接使用模板。下面我们通过自己写底层来实现课程大纲的树形结构展示。

新建chapter.js。

export default {
  // 根据课程id获取章节、小节信息
  getChapterVideo(courseId) {
    return request({
      url: '/eduservice/edu-chapter/getChapterVideo' + courseId,
      method: 'get'
    })
  }
}

chapter.vue.

<script>
import chapter from "@/api/edu/chapter.js";
export default {
  data() {
    return {
      saveBtnDisabled: false,
      chapterVideoList:[],
      courseId:''
    };
  },
  methods: {
    //跳转到上一步
    previous() {
      this.$router.push({ path: "/course/info/1" });
    },
    next() {
      //跳转到第三步
      this.$router.push({ path: "/course/publish/1" });
    },
    getChapterVideo(){
      chapter.getChapterVideo(this.courseId)
        .then(resp => {
          this.chapterVideoList = resp.data.list
        })
    }
   
  },
  created() {
    if(this.$route.params && this.$route.params.id) {
      this.courseId = this.$route.params.id
    }
    this.getChapterVideo()
  },
};
</script>

增加ui组件展示数据。

.<template>
  <div class="app-container">
    <h2 style="text-align: center">发布新课程</h2>
    <el-steps
      :active="2"
      process-status="wait"
      align-center
      style="margin-
bottom: 40px;"
    >
      <el-step title="填写课程基本信息" />
      <el-step title="创建课程大纲" />
      <el-step title="最终发布" />
    </el-steps>
    
      <ul>
      <li v-for="chapter in chapterVideoList" :key="chapter.id">
        <p>
          {{ chapter.title }}
        </p>

        <ul>
          <li v-for="video in chapter.children" :key="video.id">
            {{ video.title }}
          </li>
        </ul>
      </li>
    </ul>


    <el-form label-width="120px">
      <el-form-item>
        <el-button @click="previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next"
          >下 一步</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

记得后端接口添加@CrossOrigin注解解决跨域问题，测试效果如下。