删除课程前后端实现

野性酷女 2021-07-24 20:29 421阅读 0赞

# 一 后端实现 #

## 1 控制器 ##

/**
    * 功能描述：根据ID删除课程
    *
    * @author cakin
    * @date 2020/12/6
    * @param id 课程id
    * @return R 返回给前端的数据
    */
    @ApiOperation("根据ID删除课程")
    @DeleteMapping("remove/{id}")
    public R removeById(@ApiParam(value = "课程id", required = true) @PathVariable String id) {
        // TODO: 删除课程视频
        // 此处调用vod中的删除视频文件的接口
        //删除课程封面
        courseService.removeCoverById(id);
        // 删除课程
        boolean result = courseService.removeCourseById(id);
        if (result) {
            return R.ok().message("删除成功");
        } else {
            return R.error().message("数据不存在");
        }
    }

## 2 service层 ##

接口

/**
    * 功能描述：删除课程封面
    *
    * @author cakin
    * @date 2020/12/6
    * @param id 课程id
    * @return boolean 是否删除成功
    */
    boolean removeCoverById(String id);
    
    
    /**
    * 功能描述：删除课程
    *
    * @author cakin
    * @date 2020/12/6
    * @param id 课程id
    * @return boolean 是否删除成功
    */
    boolean removeCourseById(String id);

实现

/**
    * 功能描述：删除课程封面
    *
    * @param id 课程id
    * @return boolean 是否删除成功
    * @author cakin
    * @date 2020/12/6
    */
    @Override
    public boolean removeCoverById(String id) {
        // 根据id获取课程 Cover 的 url
        Course course = baseMapper.selectById(id);
        if (course != null) {
            String cover = course.getCover();
            if (!StringUtils.isEmpty(cover)) {
                R r = ossFileService.removeFile(cover);
                return r.getSuccess();
            }
        }
        return false;
    }
    
    
    /**
    * 功能描述：删除课程
    *
    * @param id 课程id
    * @return boolean 是否删除成功
    * 数据库中外键约束的设置：
    * 互联网分布式项目中不允许使用外键与级联更新，一切涉及级联的操作不要依赖数据库层，要在业务层解决
    * 如果业务层解决级联删除功能
    * 那么先删除子表数据，再删除父表数据
    * @author cakin
    * @date 2020/12/6
    */
    @Transactional(rollbackFor = Exception.class)
    @Override
    public boolean removeCourseById(String id) {
        // 根据 courseId 删除 Video(课时)
        QueryWrapper<Video> videoQueryWrapper = new QueryWrapper<>();
        videoQueryWrapper.eq("course_id", id);
        videoMapper.delete(videoQueryWrapper);
        // 根据 courseId 删除 Chapter(章节)
        QueryWrapper<Chapter> chapterQueryWrapper = new QueryWrapper<>();
        chapterQueryWrapper.eq("course_id", id);
        chapterMapper.delete(chapterQueryWrapper);
        // 根据 courseId 删除 Comment(评论)
        QueryWrapper<Comment> commentQueryWrapper = new QueryWrapper<>();
        commentQueryWrapper.eq("course_id", id);
        commentMapper.delete(commentQueryWrapper);
        // 根据 courseId 删除 CourseCollect(课程收藏)
        QueryWrapper<CourseCollect> courseCollectQueryWrapper = new QueryWrapper<>();
        courseCollectQueryWrapper.eq("course_id", id);
        courseCollectMapper.delete(courseCollectQueryWrapper);
        // 根据 courseId 删除 CourseDescription(课程详情)
        courseDescriptionMapper.deleteById(id);
        // 删除课程
        return this.removeById(id);
    }

# 二 前端实现 #

## 1 定义API ##

// 根据id删除课程
      removeById(id) {
        return request({
          url: `/admin/edu/course/remove/${id}`,
          method: 'delete'
        })
      },

## 2 修改删除按钮 ##

<el-button type="danger" size="mini" icon="el-icon-delete" @click="removeById(scope.row.id)">删除</el-button>

## 3 编写删除方法 ##

// 根据id删除数据
        removeById(id) {
          this.$confirm('此操作将永久删除该课程，以及该课程下的章节和视频，是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            return courseApi.removeById(id)
          }).then(response => {
            this.fetchData()
            this.$message.success(response.message)
          }).catch((response) => { // 失败
            if (response === 'cancel') {
              this.$message.info('取消删除')
            }
          })
        }

# 三 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/402c6b6f9edd472c99fe6db917376ffe.png