课程大纲-章节添加删除 （前端）

1、在api/chapter.js中新增接口方法

//添加章节
  addChapter(chapterInfo){
    return request({
      url: `/eduservice/educhapter/addChapter`,
      method: 'post',
      data:chapterInfo
    })
  },
  //删除章节
  deleteChapter(id){
    return request({
      url: `/eduservice/educhapter/${id}`,
      method: 'delete'
    })
  },
  //根据id查询章节信息
  getChapterInfo(id){
    return request({
      url: `/eduservice/educhapter/${id}`,
      method: 'get'
    })
  },
  //修改章节信息
  updateChapter(chapterInfo){
    return request({
      url: `/eduservice/educhapter/updateChapter`,
      method: 'post',
      data:chapterInfo
    })
  }

2、进入课程大纲，先要添加章节，点击章节添加按钮添加章节

（1）实现方案：点击添加章节按钮，展现添加对话框

（2）在course/chapter.vue中添加页面元素

<el-button type="text" @click="dialogChapterFormVisible = true">添加章节</el-button>

3、添加对话框

<!-- 添加和修改章节表单 -->
    <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
      <el-form :model="chapter" label-width="120px">
        <el-form-item label="章节标题">
          <el-input v-model="chapter.title"/>
        </el-form-item>
        <el-form-item label="章节排序">
          <el-input-number v-model="chapter.sort" :min="0" controls-position="right"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
      </div>
    </el-dialog>

4、调用接口实现添加功能

data() {
    return {
      courseId: "",
      saveBtnDisabled: false, // 保存按钮是否禁用
      allChapterVideo: [], //章节小节数据集合
      dialogChapterFormVisible: false, //章节添加修改表单是否展示
      chapter: {} //章节信息
    };
  },

  …
  methods: {
    //新增获取修改章节
    saveOrUpdate() {
      this.saveChapter();
    },
    //保存章节
    saveChapter() {
      this.chapter.courseId = this.courseId;
      chapter.addChapter(this.chapter).then(response => {
        //关闭添加章节对话框
        this.dialogChapterFormVisible = false;
        //提示
        this.$message({
          type: "success",
          message: "添加章节成功!"
        });
        //刷新页面
        this.getChapterVideoList();
      });
    },

5、删除章节功能

（1）在每个章节后添加删除按钮

<li v-for="chapter in allChapterVideo" :key="chapter.id">
          <p>{{chapter.title}}
            <span class="acts">
                <el-button type="text">添加课时</el-button>
                <el-button style="" type="text">编辑</el-button>
                <el-button type="text" @click="removeChapter(chapter.id)">删除</el-button>
            </span>
          </p>

注意：删除两行标签，否则会干扰章节后添加删除按钮的功能。

（2）在js里实现调用接口删除章节

//删除章节
    removeChapter(chapterId){
      this.$confirm("此操作将永久删除该章节, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //调用接口删除数据
          chapter.deleteChapter(chapterId).then(response => {
            
            this.$message({
              type: "success",
              message: "删除章节成功!"
            });
            //刷新数据
             this.getChapterVideoList();
          });
        })
    },