开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-修改章节】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11385
课程管理-修改章节
内容介绍：
一、 添加章节测试
二、 修改章节功能
三、 效果测试
一、添加章节测试
1.过程
下面对效果进行进一步测试，首先来到页面点击 ctrlf5 刷新，点击天添加章节，在其中填入章节名称：第一章 测试1123，设置章节排序为1。
点击确定，提示添加章节成功，同时弹框也消失了。同时因为刷新了页面，添加的数据也在页面中做了显示，至此数据就添加成功。
2.小 bug
但在这个过程中会有一个 bug，再次点击添加章节时，里面显示的仍然是上次的数据。
而正确的表单数据应该是重新清空，要向解决这个小 bug只需要将表单数据清空即可。
之前是直接在添加章节中定义了一个值，但此时我们将值写在方法openChapterDialog()中去，即在添加章节中添加一个 openChapterDialog()方法。
l 原代码如下
<el-button type="text" @click="dialogChapterFormVisible=true”>添加章节< /el-button>
l 更改代码如下：
<el-button type="text" @click="openChapterDialog()”>添加章节< /el-button>
3.methods处
通过此 openChapterDialog()方法来实现弹框，在页面代码 chapter.vue 中的methods 里面添加方法。
l openChapterDialog()代码如下：
//弹出添加章节页面，方法名为openChapterDialog
openChapterDialog() {
//弹框，通过令dialogChapterFormvisible值为true实现弹框
this.dialogChapterFormvisible = true
//表单数据清空，因为第一次添加没有错误，而第二次添加上次的内容仍然显示，所以将其清空。可以使用对象清空，在此单独将值清空。
//标题清空
this.chapter.title = ‘ ’
//排序清空
this.chapter.sort = 0
},
为了方便添加修改章节的方法，定义一个新的 addChapter（）方法将saveOrUpadate()代码放入，再在 saveOrUpadate()中调用 addChapter方法。
l methods 最终添加代码如下：
methods:{
//弹出添加章节页面，方法名为openChapterDialog
openChapterDialog() {
//弹框，通过令dialogChapterFormvisible值为true实现弹框
this.dialogChapterFormvisible = true
//表单数据清空，因为第一次添加没有错误，而第二次添加上次的内容仍然显示，所以将其清空。可以使用对象清空，在此单独将值清空。
//标题清空
this.chapter.title = ‘ ’
//排序清空
this.chapter.sort = 0
},
//添加章节，将原来saveOrUpadate()方法代码复制放入
addchapter() {
//设置课程id到chapter对象里面
this.chapter.courseId = this.courseId
chapter.addchapter( this.chapter)
.then( response => {
//关闭弹框
this.dialogChapterFormvisible = false
//提示
this.$message({
type: 'success" ,
message:‘添加章节成功!‘
});
//刷新页面
this.getchaptervideo()
})
saveorUpdate（） {
//调用addChapter()，为了方便之后添加修改章节的方法。
this.addChapter()
3. 总结
刚才修改的内容，主要是将添加章节按钮中绑定一个事件，其中加一个openChapterDialog()方法。openChapterDialog()方法中就是弹框，清空表单，做到之后。
弹框点击保存执行 saveorUpdate（）方法，就会调用 addChapter()添加方法。
4. 最终测试
再次输入测试数据：章节标题：第二章11，章节排序2，点击保存。
再次点击添加章节按钮，弹框中表单数据成功清空，没有出现上一次添加的内容，bug 消失。
比如再次输入，章节标题：第三章，章节排序：3。点击确定，提示成功添加，到此就全部完成。
在完成此功能，要注意的问题是 this.chapter.courseId = this.courseId 的手动传值部分，需要手动传一个课程 id，作添加章节时需要使用。
二、修改章节功能
完成添加按钮后，要添加修改功能。即在每个章节后添加一个修改按钮，当点击修改按钮时可以实现页面回显，因为添加是弹框所以修改也可以实现弹框其中回显出现之前的数据内容，以便修改内容。而当修改完成后点击确定按钮就可以对应修改数据库中的内容。
接下来需要实现的功能即在每个章节后添加一个修改按钮，当点击修改按钮就可以弹框实现数据回显，最终去修改数据库的内容。
1. 添加修改按钮
复制课件01-课程大纲列表显示的按钮部分代码，将代码复制到页面代码21行{{chapter.title}}下方。
l 01-课程大纲列表显示的按钮部分代码如下：
<span class="acts">
//添加课时按钮暂时去除，不做使用
//<el-button type="text”>添加课时</el-button>
<el-button style="" type="text">编辑</el-button>
<el-button type="text”>删除</el-button>
</span>
</p>
添加代码后，可以发现页面中会出现编辑和删除按钮，之后当点击编辑按钮，就会弹个框然后就会实现数据回显，修改数据库内容。
2. 数据回显
① 绑定事件
要实现数据回显，首先在编辑里绑定一个事件 openEditChapter，但在修改数据时，首先要根据 id 查询做回显，所以在方法中传入章节 id。而在此是处于<li中v-for 里面含有一个 chapter。所以，根据 chapter.id 将这个 id 值得到，之后再对数据作修改。
l 代码如下：
<!--章节-->
<ul class="chanpterList">
<li
v-for="chapter in chaptervideoList"
: key="chapter. id">
<p>
{{ chapter.title }}
<span class="acts">
//给编辑按钮绑定openEditChatper(chapter.id)方法。
<el-button style="" type="text" @click= "openEditChatper(chapter.id)">编辑</el-button>
<el-button type="text”>删除</el-button>
</span>
</p>
② 创建 openEditChatper 方法
在页面代码 methods 处创建出修改章节弹框数据回显的方法，方法中有一个章节id，在方法中传入的形参 chapterid 中得到章节 id，根据 id 调用接口最终做数据回显就可以做到。
l 代码如下：
//修改章节弹框数据回显
openEditChatper(chapterid){
//弹框，dialogChapterFormvisible值为true
this.dialogChapterFormvisible = true
//调用接口
chapter.getChapter(chapterId）
.then(response => {//.then加上剪头函数，以实现查询
//调用接口，得到数据后再作赋值。this.chapter表示v-for中定义的对象。
this.chapter = response.data.chapter
})
}
到此点击编辑按钮，出现弹框之后实现数据回显到此全部完成。首先是将章节 id 传入 openEditChatper 过来，传完之后将弹框显示，再根据 id 调接口查询，最终返回chapter 对象，chapter 对象在之前的 v-for 做了双向绑定，可以将数据的值显示出来。
③ 效果测试
最后查看效果，来到页面点击刷新。点击第一章的编辑按钮，发现会对应弹框，同时弹框中含有第一章数据回显的内容。
点击第二章的编辑按钮，同理显示。
之后要实现的就是点击每章编辑按钮后，可以在出现的弹框中修改内容最后保存到数据库中。
3. 修改内容
① 过程
来到页面代码中，在之前点击确定调用的是 addChapter()方法作添加操作。
首先添加一个修改章节的方法 updatechapter() ，因为修改和添加都是点按钮时调用所以要在 saveOrUpdate()添加一个判断，判断章节中是否有id，如果没有id做添加操作，如果有 id 做修改操作。
//修改章节的方法
updatechapter() {
//修改方法，传入参数chapter
chapter.updateChapter(this.chapter)
.then( response =>{//箭头函数，表示下一步进行
//关闭弹框
this.dialogChapterFormvisible = false
//提示
this.$message({
type: 'success' ,
message: '修改章节成功!’
});
//刷新页面
this.getchaptervideo( )
})
),
if(!this.chapter.id){//是否有id
//如果没有id，做添加操作
this.addChapter()
} else {//如果有id
//做修改操作
this.updatechapter()
}
② 总结
第一步，点击编辑按钮后，首先会弹框根据传入的章节 id 做查询。第二步，查询后实现数据回显，再对弹框的内容调用 saveOrUpadate 做判断，如果没有 id，作添加操作；如果有 id，做修改，调用 updateChapter 接口做到，到此修改过程完成。
三、效果测试
来到页面，点击课程标题为：第一章 测试1123的编辑按钮。
在出现的弹框中，将章节标题改为第一章 测试 upupup 点击确定。
发现页面中显示修改章节成功，同时第一章的课程标题变为：第一章 测试 upupup，即修改章节功能到此成功。
