谷粒学院（十）课程管理模块 | 课程大纲列表 | 二级联动 | 富文本编辑器（四）-阿里云开发者社区

七、课程章节添加、修改、删除 --后端开发

1、编写Controller类

//查询章节
@GetMapping("getChapter/{id}")
@ApiOperation("查询章节通过id")
public R getChapter(@PathVariable String id){
    EduChapter chapter = chapterService.getById(id);
    return R.ok().data("chapter",chapter);
}
//添加章节
@PostMapping("addChapter")
@ApiOperation("添加章节")
public R addChapter(@RequestBody EduChapter chapter){
    boolean save = chapterService.save(chapter);
    if(save){
        return R.ok();
    }else{
        return R.error();
    }
}
//修改章节
@ApiOperation("修改章节")
@PutMapping("updateChapter")
public R updateChapter(@RequestBody EduChapter chapter){
    boolean update = chapterService.updateById(chapter);
    if(update){
        return R.ok();
    }else{
        return R.error();
    }
}
//删除章节
@DeleteMapping("delChapter/{id}")
public R delChapter(@PathVariable String id){
    Boolean flag = chapterService.delChapter(id);
    if (flag){
        return R.ok();
    }else{
        return R.error();
    }
}

注意：在实体类中的时间加上@TableField(fill = FieldFill.INSERT) 等注解

2、编写Service类

//删除章节
@Override
public Boolean delChapter(String chapterId) {
    //1.先查询该章节下是否有小节
    QueryWrapper <EduVideo> wrapper = new QueryWrapper <>();
    wrapper.eq("chapter_id", chapterId);
    int count = videoService.count(wrapper);
    //2.如果有则 无法删除
    if(count>0){
        throw new GuLiException(20001,"清先删除小节,再删除章节!");
    }else{
        //如果没有则进行删除..
        int delete = this.baseMapper.deleteById(chapterId);
        return delete > 0;
    }
}

注意：这里我们要对删除进行判断：

如果章节里面没有小节，直接删除。

如果章节里面有小节，如何删除？

第一种：删除章节的时候，把章节里面所有小节都删除。

第二种：如果删除章节下面有小节，不让进行删除。

我们现在对于删除章节使用的是第一种,后面对于删除课程采用的是第二种(删除课程->删除课程描述->删除对应的章节->删除对应的小节)

八、课程章节添加、修改、删除 – 前端开发

1、定义api接口

//根据章节id查询章节.
getChapter(chapterId) {
    return request({
        url: `/eduservice/chapter/getChapter/${chapterId}`,
        method: 'get'
    })
},
//根据id更新章节
updateChapter(chapter) {
    return request({
        url: `/eduservice/chapter/updateChapter`,
        method: 'put',
        data: chapter
    })
},
//根据id删除章节
delChapter(id) {
    return request({
        url: `/eduservice/chapter/delChapter/${id}`,
        method: 'delete'
    })
},
//增加章节
addChapter(chapter) {
    return request({
        url: `/eduservice/chapter/addChapter`,
        method: 'post',
        data: chapter
    })
}

2、添加章节按钮

<el-button type="text" @click="openChapterDialog()">添加章节</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.编写js

data() {
    return {
        //....
        courseId:'',//课程id
        chapterVideoList:[],
        chapter:{//封装章节数据
      title: '',
          sort: 0
        },
        dialogChapterFormVisible:false//章节弹框
    }
},
methods:{
    //删除章节
    removeChapter(chapterId){
            this.$confirm('此操作将永久删除章节记录,是否继续?','提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }).then(()=>{//点击确定
            chapter.delChapter(chapterId).then((response)=>{
            this.$message({
              type:'success',
              message:'删除成功!' 
             }) 
            //回到列表页面
            this.getAllChapterVideo()
          }).catch((response)=>{
             this.$message({
                  type: 'error',
                  message: response.data.message
              })
          })
        })
        .catch(() => { // 失败
          this.$message({
                type: 'info',
                message: '取消删除!'
            })
          this.getAllChapterVideo()
        } 
      )
    },
  //弹出添加章节表单
  openChapterDialog(){
          this.dialogChapterFormVisible = true
          this.chapter = {title: '',sort: 0}
    },
    //数据回显
    editChapter(id){
        this.dialogChapterFormVisible = true
        chapter.getChapter(id).then(response=>{
            this.chapter = response.data.chapter
        })
    },
    //编辑章节
    updateChapter(){
        chapter.updateChapter(this.chapter).then(response=>{
           //给与提示
            this.$message({
                type:'success',
                message:'章节编辑成功!'
            })
            //关闭弹框
            this.dialogChapterFormVisible = false
            this.getAllChapterVideo()//查询所有章节/小节,刷新页面
          }).catch(response=>{
            //给与提示
            this.$message({
              type:'error',
              message:'章节编辑失败!'
            })
              //关闭弹框
            this.dialogChapterFormVisible = false
            this.getAllChapterVideo()
          })
    },
    //增加章节
    addChapter(){
        this.chapter.courseId = this.courseId
        chapter.addChapter(this.chapter).then(response=>{
            this.dialogChapterFormVisible = false
            //给与提示
            this.$message({
                type:'success',
                message:'章节添加成功!'
            })
            //刷新页面
            this.getAllChapterVideo()//这些公共语句即使类似也必须放在then里面,不然逻辑就会混乱...
        }).catch(response=>{
            this.dialogChapterFormVisible = false
            //给与提示
            this.$message({
                type:'error',
                message:'章节添加失败!'
            })
            //刷新页面
            this.getAllChapterVideo()
        })
    },
    //增加和修改
    saveOrUpdate(){
        if(!this.chapter.id || this.chapter.id==""){
            this.addChapter()
        }else{
            this.updateChapter()
        }
    },
  //......
}

注意：启动服务运行出现403错误。

第一种是Controller类中跨域注解没有写@CrossOrigin。
第二种是访问路径写的不对

九、课程小节添加、修改、删除 --后端开发

1、编写Controller类

@Api(description = "小节管理")
@RestController
@RequestMapping("/eduservice/video")
@CrossOrigin
public class EduVideoController {
    @Autowired
    private EduVideoService videoService;
    //增加小节
    @ApiOperation("添加小节")
    @PostMapping("addVideo")
    public R addVideo(@RequestBody EduVideo video){
        boolean flag = videoService.save(video);
        if(flag){
            return R.ok();
        }else{
            return R.error();
        }
    }
    //修改小节
    @ApiOperation("修改小节")
    @PutMapping("updateVideo")
    public R updateVideo(@RequestBody EduVideo video){
        boolean flag = videoService.updateById(video);
        if(flag){
            return R.ok();
        }else{
            return R.error();
        }
    }
    //删除小节TODD 后面这个方法需要完善：删除小节时候，同时要把里面的视频删除
    @ApiOperation("删除小节")
    @DeleteMapping("delVideo/{id}")
    public R delVideo(@PathVariable String id){
        boolean flag = videoService.removeById(id);
        if(flag){
            return R.ok();
        }else{
            return R.error();
        }
    }
    //查询小节
    @ApiOperation("查询小节")
    @GetMapping("getVideo/{id}")
    public R getVideo(@PathVariable String id){
        EduVideo video = videoService.getById(id);
        return R.ok().data("video",video);
    }
}

注意：在实体类中的时间加上@TableField(fill = FieldFill.INSERT)等注解

十、课程小节添加、修改、删除 – 前端开发

1、定义api接口

import request from '@/utils/request'
export default {
    //添加小节
    addVideo(video) {
        return request({
            url: `/eduservice/video/addVideo`,
            method: 'post',
            data: video
        })
    },
    //修改小节
    updateVideo(video) {
        return request({
            url: `/eduservice/video/updateVideo`,
            method: 'put',
            data: video
        })
    },
    //删除小节
    delVideo(id) {
        return request({
            url: `/eduservice/video/delVideo/${id}`,
            method: 'delete'
        })
    },
    //查询小节通过id
    getVideo(id) {
        return request({
            url: `/eduservice/video/getVideo/${id}`,
            method: 'get'
        })
    },
}

2、添加修改页面

<!-- 添加和修改课时表单 -->
<el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
<el-form :model="video" label-width="120px">
    <el-form-item label="课时标题">
    <el-input v-model="video.title"/>
    </el-form-item>
    <el-form-item label="课时排序">
    <el-input-number v-model="video.sort" :min="0" controls-position="right"/>
    </el-form-item>
    <el-form-item label="是否免费">
    <el-radio-group v-model="video.free">
        <el-radio :label="true">免费</el-radio>
        <el-radio :label="false">默认</el-radio>
    </el-radio-group>
    </el-form-item>
    <el-form-item label="上传视频">
    <!-- TODO -->
    </el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
    <el-button @click="dialogVideoFormVisible = false">取 消</el-button>
    <el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定</el-button>
</div>
</el-dialog>

3、引入包

import video from '@/api/edu/video'

4、初始数据定义

data() {
    return {
        //....
        video: {//封装小节数据
            title: '',
            sort: 0,
            isFree: 0,
            videoSourceId: '',//视频id(后面用到)
            videoOriginalName:''//视频名称(后面用到)
        },
        dialogVideoFormVisible:false//小节弹框
    }
},

5、编写增删改查的js

//当点击更新/添加中的确认按钮时
saveOrUpdateVideo(){
    if(!this.video.id){
        this.addVideo()
    }else{
        this.updateVideo()
    }
},
//当点击添加小节
openVideoDialog(chapterId){
    this.dialogVideoFormVisible = true
    this.chapterId = chapterId
    this.fileList = []
    this.video ={// 课时对象  //打开之前先清空
        title: '',
        sort: 0,
        isFree: 0,
        videoSourceId: '',
        videoOriginalName:''
    }
},
//添加小节
addVideo(){
    this.video.courseId = this.courseId
    this.video.chapterId = this.chapterId
    video.addVideo(this.video).then(response=>{
        this.dialogVideoFormVisible = false
        //给与提示
        this.$message({
            type:'success',
            message:'小节添加成功!'
        })
        //刷新页面
        this.getAllChapterVideo()//这些公共语句即使类似也必须放在then里面,不然逻辑就会混乱...
    }).catch(response=>{
        this.dialogVideoFormVisible = false
        //给与提示
        this.$message({
            type:'error',
            message:'小节添加失败!'
        })
        //刷新页面
        this.getAllChapterVideo()//这些公共语句即使类似也必须放在then里面,不然逻辑就会混乱...
    })
},
//编辑小节前的数据回显
editVideo(id){
    this.openVideoDialog(id)//进行初始化
    this.dialogVideoFormVisible = true
    video.getVideo(id).then(response=>{
        //普通书籍回显
        this.video = response.data.video
        //进行视频回显
        if(this.video.videoOriginalName!=""){
            this.fileList = [{name:this.video.videoOriginalName}]
        }
    })
},
//编辑小节
updateVideo(){
    video.updateVideo(this.video).then(response=>{
        //给与提示
        this.$message({
            type:'success',
            message:'小节编辑成功!'
        })
        //关闭弹框
        this.dialogVideoFormVisible = false
        this.getAllChapterVideo()
    }).catch(response=>{
        //给与提示
        this.$message({
            type:'error',
            message:'小节编辑成功!'
        })
        //关闭弹框
        this.dialogVideoFormVisible = false
        this.getAllChapterVideo()
    })
},
//删除小节
delVideo(id){
    this.$confirm('此操作将永久删除小节记录,是否继续?','提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
    }).then(()=>{//点击确定
        video.delVideo(id).then((response)=>{
            this.$message({
                type:'success',
                message:'删除成功!' 
            }) 
            //回到列表页面
            this.getAllChapterVideo()
        }).catch(()=>{
            this.$message({
                type:'error',
                message:'删除失败!' 
            }) 
        })
    }).catch(()=>{
        this.$message({
            type:'info',
            message:'取消删除!' 
        }) 
    })
},
//...

6、启动服务测试即可

如果有收获！！！希望老铁们来个三连，点赞、收藏、转发。

创作不易，别忘点个赞，可以让更多的人看到这篇文章，顺便鼓励我写出更好的博客

谷粒学院（十）课程管理模块 | 课程大纲列表 | 二级联动 | 富文本编辑器（四）

七、课程章节添加、修改、删除 --后端开发

八、课程章节添加、修改、删除 – 前端开发

九、课程小节添加、修改、删除 --后端开发

十、课程小节添加、修改、删除 – 前端开发

热门文章

最新文章

相关电子书

相关实验场景