Mooc項目開發筆記（十四）：章節管理前後端實現

一、章節管理後端接口開發

1、新增章節

在EduChapterController中添加如下內容

    @ApiOperation("添加章節")
    @PostMapping("add")
    public R addChapter(@RequestBody EduChapter chapter) {
        chapterService.save(chapter);
        return R.ok();
    }

2、根據id查詢

在EduChapterController中添加如下內容

    @ApiOperation("根據id查詢章節信息")
    @GetMapping("{id}")
    public R getChapterById(@PathVariable String id) {
        EduChapter chapter = chapterService.getById(id);
        return R.ok().data("chapter", chapter);
    }

3、更新章節

在EduChapterController中添加如下內容

    @ApiOperation("更新章節信息")
    @PostMapping("update")
    public R updateChapter(@RequestBody EduChapter chapter) {
        chapterService.updateById(chapter);
        return R.ok();
    }

4、刪除章節

在EduChapterController中添加如下內容

    @ApiOperation("刪除章節信息")
    @DeleteMapping("{id}")
    public R deleteChapter(@PathVariable String id) {
        boolean success = chapterService.deleteChapter(id);
        if (success) {
            return R.ok();
        } else {
            return R.error();
        }
    }

EduChapterService層：接口

boolean deleteChapter(String id);

EduChapterService層：實現

    /**
     * 刪除章節信息
     * 只有章節中沒有小節的情況下才能刪除
     * @param id
     */
    @Override
    public boolean deleteChapter(String id) {
        QueryWrapper<EduVideo> wrapper = new QueryWrapper<>();
        wrapper.eq("chapter_id", id);
        Integer cnt = videoMapper.selectCount(wrapper);
        if (cnt > 0) {
            throw new CustomException(20001, "章節中有小節，請先刪除小節！");
        }
        int delete = baseMapper.deleteById(id);
        return delete > 0;
    }

5、修改實體類

在EduChapter.class和EduChapter.class中，將創建和更新加上TableField註解用於時間的自動注入

    @ApiModelProperty(value = "創建時間")
    @TableField(fill = FieldFill.INSERT)
    private Date gmtCreate;

    @ApiModelProperty(value = "更新時間")
    @TableField(fill = FieldFill.INSERT_UPDATE)
    private Date gmtModified;

二、章節管理前端接口開發

1、定義api

在src/api/edu的chapter.js中添加如下內容：

    /**
     * 添加章節信息
     */
    addChapter(chapter){
        return request({
            url: `/eduservice/chapter/add`,
            method: 'post',
            data: chapter
          })
    },
    /**
     * 根據章節id獲取章節信息
     */
    getChapter(chapterId){
        return request({
            url: `/eduservice/chapter/${chapterId}`,
            method: 'get',
          })
    },
    /**
     * 根據課程id獲取章節和小節信息
     */
    updateChapter(chapter){
        return request({
            url: `/eduservice/chapter/update`,
            method: 'post',
            data: chapter
          })
    },
    /**
     * 根據章節id刪除章節信息
     */
    deleteChapter(chapterId){
        return request({
            url: `/eduservice/chapter/${chapterId}`,
            method: 'delete',
          })
    },

2、新增章節頁面功能

在chapter.vue中添加如下內容

1）定義data數據

dialogChapterFormVisible: false, //是否顯示章節表單
chapter: {// 章節對象
  courseId: '',
  title: '',
  sort: 0
}

2）添加添加章節按鈕

<el-button type="text" @click="openChapterDialog">添加章節</el-button>

3）章節表單dialog

<!-- 添加和修改章節表單 -->
<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）添加章節methods

    //打開彈窗
    openChapterDialog(){
        //清空數據
        this.chapter.sort= 0
        this.chapter.title= ''
        //打開彈窗
        this.dialogChapterFormVisible=true
    },

    //添加章節
    addChapter(){
      this.chapter.courseId = this.courseId
      chapterApi.addChapter(this.chapter)
          .then(response => {
              //關閉彈窗
              this.dialogChapterFormVisible = false
              //提示信息
              this.$message({
                  type: 'success',
                  message: '章節信息添加成功'
              })
              //從新獲取章節小節信息
              this.getCourseChapter()
          })
    },

    //添加或者修改章節
    saveOrUpdate(){
        this.addChapter()
    },

5）效果

點擊添加按鈕，彈出彈窗

輸入信息，點擊確定，可以看到章節信息添加成功

3、修改章節信息

1）編輯章節按鈕

<el-button style="" type="text" @click="openEditChapter(chapter.id)">編輯</el-button>

2）定義編輯方法

    //彈出彈框，並回顯章節信息
    openEditChapter(chapterId){
        //獲取數據
        chapterApi.getChapter(chapterId)
            .then(response => {
                this.chapter = response.data.chapter
            })
        //彈窗
        this.dialogChapterFormVisible = true
    },

3）定義更新方法

    //修改章節信息
    updateChapter(){
      chapterApi.updateChapter(this.chapter)
          .then(response => {
              //關閉彈窗
              this.dialogChapterFormVisible = false
              //提示信息
              this.$message({
                  type: 'success',
                  message: '章節信息修改成功'
              })
              //從新獲取章節小節信息
              this.getCourseChapter()
          })
    },

4）修改 saveOrUpdate 方法

    //添加或者修改章節
    saveOrUpdate(){
      if (!this.chapter.id){ //添加操作
        this.addChapter()
      } else {  //修改操作
        this.updateChapter()
      }
    },

5）效果

點擊編輯，彈出彈窗，並回顯數據

修改數據，點擊確定

4、刪除章節信息

1）刪除章節按鈕

<el-button type="text" @click="deleteChapter(chapter.id)">刪除</el-button>

2）定義編輯方法

   	//刪除章節
    deleteChapter(chapterId){
        //彈出刪除章節提示框
        this.$confirm('此操作將永久刪除該章節信息, 是否繼續?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => { //用戶點擊確定會調用
          //嘗試刪除數據，並且提示刪除結果
          chapterApi.deleteChapter(chapterId)
            .then(response => {
                //提示信息
                this.$message({
                    type: 'success',
                    message: '章節信息刪除成功'
                })
                //從新獲取章節小節信息
                this.getCourseChapter()
            })
        })
    },

3）效果

點擊刪除按鈕，彈出提示框：

點擊確定，刪除章節成功