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）效果

点击删除按钮，弹出提示框：

点击确定，删除章节成功