开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-添加和删除小节】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11388
课程管理-添加和删除小节
内容介绍
一、添加小节
二、效果测试
三、删除小节
四、最终测试
一、添加小节
1.前端部分
首先在添加小节时，除了小节本身还需要使用到课程 id 和章节 id，所以也要对这俩 id 值做设置。
（1）openvideo()添加小节弹框方法
设置章节 id：this.video.chapterId = chapterId。
将弹框时已经传过来的章节 id（chapterId），设置给小节中的章节 id。设置完毕后，就能够弹出一个弹框部分。弹框之后能在弹框中输入相关信息，
包括：小节标题、小节排序等等，最后点击弹框中的确定按钮就可以将数据加到数据库中。
l 代码如下：
//添加小节弹框的方法
openvideo(chapterId) {
//弹框
dialogvideoFormvisible = true
//设置章节id
将章节id,在video中交chapterId，将方法中传入的章节id值赋给小节中。
this.video.chapterId = chapterId
},
（2）saveorupdatevideo()确定方法
最后编写确定方法 saveOrUpdateVideo 在其中作最后方法的一个添加，在其中肯定调用的也是 video 中的添加方法。
l 代码如下：
//弹框中的确定方法
saveorupdatevideo() {
//调用addVideo( )方法
this.addVideo( )
},
（3）addvideo() 添加小节方法
考虑其中还有一个修改方法，我们将添加小节方法 addvideo() 写在外面。
首先在其中做个调用，同时传入小节的对象。之后使用.then 加上 response 箭头函数表示添加成功后的操作，添加成功后与章节一样也是关闭弹框、提示信息、刷新页面。
将代码复制过来，弹框更改为小节弹窗 dialogVideoFormvisible；同时更改提示信息为添加小节成功。
l 添加章节借鉴代码：
//添加章节
addChapter() {
//设置课程id到chapter对象里面
This.chapter.courseId = this.courseIdchapter
addChapter(this.chapter)
then( response => {
//关闭弹框
this.dialogChapterFormVisible = false/提示
this.$message({
type: 'success',
message: ‘添加章节成功!‘});
//刷新页面
this.getchaptervideo( )
})
},
但目前仅设置了一个章节 id 还有一个课程 id。所以在添加小节 addVideo（）中再设置一个课程 id。
l 代码如下：
//设置课程 id
this.video.courseId = this.courseId
而课程 id 是在按键设置中：添加小节< /el-button>的 chapter.id 传过来的。
l 添加小节按键设置代码
添加小节< /el-button>
编辑
删除
< /span>
l 122行 methods 中添加代码（完整版）
methods:{
//===========================小节操作===============
//添加小节弹框的方法
openvideo(chapterId) {
//弹框
dialogvideoFormvisible = true
//设置章节id
将章节 id,在 video 中交 chapterId，将方法中传入的章节 id 值赋给小节中。
this.video.chapterId = chapterId
},
//在方法中做最后的添加，调用 video 中的添加方法。该方法写在外围，其中还要添加小节。
//添加小节
addvideo() {
//设置课程id
this.video.courseId = this.courseId
//调用，this.video表示传入小节的对象
video.addvideo( this.video)
//.then再加上response箭头函数，表示添加成功
.then( response => {
//之后和章节的一致，关闭弹框并且提示信息添加成功，并且刷新页面,复制chapter 后的代码，要更改 dialogChapterFormvisible为dialogVideoFormvisible表示小节弹框
//关闭弹框
this.dialogVideoFormvisible = false
//提示
this.$message({
type: " success',
//更改提示信息为添加小节成功！
//刷新页面
this.getChaptervideo()
})
//弹框中的确定方法
saveorupdatevideo() {
//调用 addVideo( )方法
this.addVideo( )
},
2.接口部分
对 EduVideo.java72 行代码中创建时间部分进行更改，加上自动填充。
l 更改处代码如下：
@ApiModelProperty(value =“创建时间)
//表示自动填充
@TableField(fill = FieldFill.INSERT)
private Date gmtCreate;
@ApiModelProperty(value = “更新时间")
//表示自动填充
@TableField(fill = FieldFill.INSERT_UPDATE)
private Date gmtModified;
二、效果测试
将前端和接口代码都启动，来到前端。首先刷新页面，点击添加小节后，在成功显示的弹框中输入小节内容信息，点击确定后。
1.小问题：第二次添加残留上一次添加的内容信息
可以看见显示添加小节成功同时章节下显示了添加的小节。但此时存在一个小问题，当第二次在章节中添加小节时，出现的弹框仍然留着第一次添加时输入的信息，所以可以在此处添加一个清空，即在刚才写的 openVideo()方法中添加清空其中的值即可。
l 添加章节的弹框代码：
//弹出添加章节页面
openChapterDialog(）{
//弹框
this.dialogChapterFormvisible = true
//表单数据清空，小节的弹框内容清空写法与其一致
this.chapter.title= ‘ ’
this.chapter. sort = 0
}
继续测试，再添加一个小节。显示如下，到此成功完成章节中显示小节的功能。
三、删除小节
小节中也应有修改和删除功能，此功能与章节显示一致，包括修改和删除。
删除功能，删除和修改都一样，首先要在小节后面添加删除按钮，所以复制之前的添加小节按键代码复制在视频内。
同时更改代码，首先删除多余的添加小节按钮，之后更改绑定事件为 removeVideo（video.id）,传入参数 video.id 小节 id。
l 参考章节按键代码如下：
<span class="acts">
//添加小节按钮
<el-button style="" type="text" @click="openVideo(chapter.id)">添加小节< /el-button>
//编辑按钮
<el-button style="" type="text" ac lick="openEditchatper(chapter.id)">编辑</el-button>
//删除按钮
<el-button type="text” aclick="removeChapter(chapter.id)">删除</el-button>
< /span>
l 小节处删除按钮添加如下：
<l--视频-->
<ul class="chanpterList videoList">
<li
v-for="video in chapter.children"
: key="video.id">
<p>{{ video.title }}
//添加代码如下
<span class="acts">
<el-button style="" type="text" >编辑</el-button>
//绑定事件removeVideo(video.id)，同时传入参数video.id小节id
<el-button type="text” aclick="removeVideo(video.id)">删除</el-button>
< /span>
</p>
</li>
</ul>
< /li>
< /ul>
完成按钮之后，将 removeVideo（）方法在 method 中作个定义。同时删除小节肯定也是需要确认框选择确定和取消，借鉴章节的确认框进行实现。
l 章节确认框代码：
this.$confirm("此操作将删除章节，是否继续?，‘提示'，{
confirmButtonText :‘确定',
cancelButtonText: '取消'，type: "warning"
}).then(() =>{ //点击确定，执行then方法
//调用删除的方法
chapter.deletechapter(chapterId)
.then( response =>{//删除成功
//提示信息
this.$messageK {
type: " success' ,message:‘删除成功!"});
//刷新页面
this.getchaptervideo( )
})
})//点击取消，执行catch方法
将其中的章节提示都改为小节提示，同时更改点击弹框中确定后调用的方法为video 中的删除小节的方法。
l method 中添加的 removevideo()方法代码：
//======================小节操作=================
//定义删除小节方法，里面传入小节 id
removevideo( id) {
//确认框
this.$confirm("此操作将删除小节，是否继续?，‘提示'，{
confirmButtonText :‘确定',
cancelButtonText: '取消'，
type: "warning"
}).then(() =>{ //点击确定，执行then方法
//调用video里面删除小节的方法
video.deleteVideo(id)
.then( response =>{//删除小节成功
//提示小节信息
this.$messageK {
type: " success' ,
message:‘删除小节成功!"
});
//刷新页面
this.getchaptervideo( )
})
})//点击取消，执行catch方法
},
到此，删除小节功能的内容全部完成。之后的表单清空和修改小节等功能参考章节部分留给同学自行完成。
四、最终测试
1.测试
假设此时要删除其中的第一节，点击删除按钮，对应成功显示弹框，点击取消，回到原页面。
点击确认之后就会显示删除小节成功！第一节被成功删除。
2.总结
到此章节和小节管理就全部做到了，过程中没有极大难点。先写接口功能，然后在前端调用。
同时前端中要使用弹框，需要注意其中的某些值要手动传递，比方：章节中需要课程 id，小节里需要章节和课程的两个 id，在此都做了传递。
