开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-删除章节 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11386
课程管理-删除章节
内容介绍
一、删除章节
二、测试功能
一、删除章节
首先将页面网址：http://localhost:9528/#/course/info 中 info 更改为chapter/1234722014930178049，回到编辑课程大纲页面。
l 之后查看 chapter.vue 其中25行代码的删除按钮。删除操作是
l 根据 id 来进行删除操作，所以将其绑定事件：添加@click="removeChapter(chapter.id)"，同时在方法中传入章节 id。removeChapter()表示删除的方法，chapter.id 为传入的参数值。
l 代码如下
<el-button type="text" @click="removeChapter(chapter.id)">删除</el-button>
1.点击删除后提示确认框的实现
之后在 chapter.vue 中88行代码的 method 中定义删除方法并编写具体实现步骤。借鉴 teacher 中 list 删除讲师的代码（134行），把其中的 removeDataById(id)方法体复制进行更改来实现点击删除按钮后的弹窗，弹窗中包含确认和取消。
l removeDataById()方法体
removeDataById(id){
this.$confirm('此操作将水久删除讲师记录，是否继续?','提示'，{
confirmButtonText:‘确定'，
cancelButtonText :'取消'，
type: 'warning'
}).then(() => {//点击确定，执行then方法
//调用删除的方法
teacher.deleteleacherId(id)
.then( response =>{//删除成功
//提示信息
this.$message({
type: ‘success‘,
message:‘删除成功!‘
});
//回到列表页面
this.getList()
})
})//点击取消，执行catch方法
}
l 在 Chapter 的 method 中添加的代码:
//删除章节
removeChapter(chapterId){
//首先弹出提示确认框，提示此操作将删除章节，是否继续?
this.$confirm('此操作将删除章节，是否继续?','提示'，{
confirmButtonText:‘确定'，
cancelButtonText :'取消'，
type: 'warning'
}).then(() => {//如果点击确定，执行then方法
//调用删除的方法，在此为 chapter 中的删除章节方法 deleteChapter(chapterId),同时传入的参数为章节 id。
chapter.deleteChapter(chapterId)
.then( response =>{//删除成功
//提示信息
this.$message({
type: ‘success‘,
message:‘删除成功!‘
});
//刷新页面，与 addChapter（）添加章节中的一样。
this.getChapterVideo()
})
})//点击取消，执行catch方法
},
2.总结：
删除章节，根据传入的形参 chapterId 即章节 id，首先提示确认的弹窗。
当选择确认时，执行 then 方法，调用删除方法同时传入课程 id 作为形参：chapter.deleteChapter(chapterId)，删除成功后提示相关信息。最后使用addChapter（）添加章节中的刷新页面的方法 this.getChapterVideo()。
二、测试功能
1.测试过程
此时课程大纲中还未添加小节，如果添加小节后。有小节则提示不能删除，没有小节才可以直接删除。在此都应该可以删除。我们进行测试同时查看接口代码是否正确。
首先点击删除，看到显示确认的弹窗，点击取消，弹窗便会消失，回到原来的页面。
当点击确认时，发现并未成功删除，同时系统提示报错。
2.chapter 拼写错误
通过报错信息（如图），得知时因为 chatper 没有做定义。出现该情况大多时单词或者调用出现问题。点击黑色下划线部分，可以跳转到提示部分，但行数不一定准确，但错误常在上几行代码或下几行可以作为参考。将 chapter 复制下来，一行行筛选可以发现，报错原因是：chapter.vue 中97行代码中 chatper 拼写错误，正确拼写为 chapter。
97行代码错误：
×chatper.deleteChapter(chapterId)
97行正确代码：
√chapter.deleteChapter(chapterId)//将chatper改为chapter。
3. 最终测试
点击 ctrlF5 刷新页面，点击第一章的删除按钮，点击继续。最后显示第一张被成功删除。
依次再删除第二章，测试效果。可以看到第二章也被成功删除。
4. 小问题
在添加章节时，表单数据每次都需要清空，因为是在弹窗的时候每次都将其清空了。同时添加章节时需要设置课程 id，若不设置表中的数据使其为空，就会报错，因为表中的数据为 Not NULL 不为空。
5.章节的添加修改删除
（1）删除章节：
如果章节里面没有小节，直接删除
如果章节里面有小节，如何删除?
第一种删除章节时候,把章节里面所有小节都删除
第二种如果到除的章节下面有小节，不让进行册除
////删除章节的方法
@override
public boolean deleteChapter(String chapterld){
//根据chapterid章节id查询小节表，如巢查询袭据，不进行删除QueryWrapper<EduVideo> wrapper = new QueryWrapper<>();
wrapper.eq""chapter_id",chapterld);
int count = videoService.count(wrapper);
//判断
if(count >0){//查询出小节,不进行删除
throw new GuliException(20001,"不能删除");
}else {//不能查询数据，进行删除
//删除章节
