开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-添加小节】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11387
课程管理-添加小节
内容介绍
一、思路分析
二、接口部分
三、前端部分
四、效果测试
一、思路分析
要实现章节添加小节，首先一个章节中有许多小节，并不能单独存在，即要添加小节一定要使用章节。
在页面的章节部分，有编辑和删除两个按钮，在两个之前添加一个新按钮，叫做添加小节。添加此按钮后要实现，点击之后也可以出现弹窗（形如添加章节）输入小节的相关数据，最终点击确定，将小节数据添加至数据库中。
在edu_video 小节表中含有以下字段：title（小节名称） id（小节的id），其中还有 chapter_id (章节 id )和 course_id (课程 id)，因为一个章节有很多小节，而一个课程又含有多个章节。
同时在后续添加视频时，还会用到 video_source_id（视频 id），因为视频并非直接存在数据库中，而是通过阿里云的视频点播进行管理，而它返回的就是一个 id值。
二、接口部分
下面开始进行添加小节的功能实现。首先右键点击 close all 关闭多余页面。将添加小节实现的接口代码放入新的 Controller 中，即 EduVideoController。
l chapter.vue 中 method 部分代码如下：
@RestController
//首先删除edu，更改名字为video
@RequestMapping("/eduservice/video")
//添加注解，解决跨域问题
@CrossOrigin
public class EduVideoController {
//注入EduVideoService类型的变量
@Autowired
private EduVideoService videoService;
//添加小节
//将提交方式命名为addVideo
@PostMapping(" addVideo")
//在其中将数据得到，传入参数eduVideo
public R addVideo(@RequestBody EduVideo eduVideo){
//调用videoService中的save（）添加方法
videoService.save(eduVideo) ;
//最后返回一个值
return R.ok() ;
}
//删除小节
//ToDo后面这个方法需要完善:删除小节时候，同时把里面视频删除
//提交删除方式，同时传入小节id
@DeleteMapping(" {id}")
//编写方法，方法名为deleteVideo，同时在方法中传入参数id将其得到。
public R deleteVideo(@PathVariable String id){
//调用videoService中的remove方法作删除
videoService.removeById(id) ;
//返回一个值
return R. ok() ;
}
//修改小节 TODO，留给同学自行完成
}
TODO 表示自行完成，仅对添加和删除效果作详细详解。到此就完成了基本的删除小节和添加小节两个接口，修改小节留给各位自行实现，与章节的修改方法一致，包括一个 id 查询和一个修改。
三、前端部分
1.添加课时按钮设置
接口实现之后，对前端进行实现。因为章节小节的实现代码都写在前端代码中，所以在 chapter.vue 前端代码中88行的 method 中添加注释以便区分章节和小节的操作。
首先我们要添加小节，在每个章节后面加上一个按钮。在<span class = “acts”>的按钮代码中添加小节的代码:<el-button style="" type="text" @click="openVideo(chapter.id)">添加小节< /el-button>。
之后再在添加小节中绑定事件，使其和添加章节一样，点击添加小节之后可以出现弹窗。
l 添加代码如下：
<span class="acts">
//更改按键名为：添加小节，同时改为openVideo绑定表示添加小节的方法，因为添加小节需要章节id，所以传入参数chapter.id给添加小节的方法。
<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>
</p>
2. 添加小节弹窗
（1）思路
添加完按钮后，在 methods 中实现添加小节弹框的方法-openVideo（）方法。首先要使得点击添加小节能够弹出弹框，不能够再使用章节的弹窗，因为其中有些内容并不相同，应新建一个添加小节的弹窗。
l 添加章节弹窗代码：
<!--添加和修改章节表单-->
<l-dialog :visible.sync="dialogChapterFormVisibletitle="添加章节">
<e1-form :mode1="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 aclick="dialogChapterFormVisible = false">取消</el-button>
<el-button type="primary" aclick="saveorUpdate">确定</el-button>
</div>
< /el-dialog>
< /div>
</template>
（2）添加弹窗代码
从课件（03-章节管理前端页面实现）中找到弹框显示的代码添加在chapter.vue代码的62行。
其中上传视频的功能暂时不做使用。在弹框的代码中只要使得dialogVideoFormvisible变量为 ture 时，弹窗就会出现。
l Chapter.vue 中62行添加代码如下：
<--添加和修改课时表单-->
<el-dialog :visible.syncm"dialogVideoFormvisible” titlem"添加课时">
<el-form :model="video” label-width="120px”>
<el-fonm-item label-"课时标题">
<el-input v-model="video.title" />
</el-form-item>
<el-fonm-item label=”课时排序">
<el-input-number v-model="video.sort” :minm"e" controls-positionm"right" />
</el-fonm-item>
<el-fonm-item labelm"是否免费">
<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-fonm-item label-”上传视频">
<! -- T000 -->
< /el-form-item></el-form>
<div slot="footer" class="dialog-footer">
<el-button @clickm"dialogVideoFormisible - false">取消</el-button>
<el-button :disabled="saveVidecBtnDisabled”type "primary”Gclick= "saveOrUpdateVideo">确定</el-button></div>
</el-dialog>
3. 设置初始值
添加弹窗代码后，在代码92行 export default 的 data()中设置小节弹窗dialogVideoFormvisible 的初始值为 false。包括设置小节中 video 的初始值定义,在课件新增课时页面功能中定义 data 数据里面可得到。
l 定义 data 数据
savevideoBtnDisabled: false,//课时按钮是否禁用
dialogvideoFormVisible: false,//是否显示课时表单
chapterId: "",//课时所在的长节id
video: {//课时对象
title:’ ’ ,
sort: 0,
free: 0,
videoSourceId:’ ’
},
l Chapter.vue 中92行代码 data 部分如下（红色为添加代码）：
export default {
data( ) {
return {
saveBtnDisabled:false,
courseId: "",//课程id
chaptervideoList:[],chapter:{ //封装章节数据
title: ‘ ’,
sort: 0
},
//设置小节中video的一些变量初始值，之后章节会作使用
video:{
title: ‘ ’,
sort: 0,
free: 0,
videoSourceId:’ ’
},
dialogChapterFormvisible:false,//章节弹框
dialogvideoFormvisible:false //小节弹框,设定初始值为false
}
}，
4.添加小节实现方法
设置初始值后，要在 methods 中实现 openVideo（）方法。做到点击添加小节时出现对于小节弹框，只用将 dialogvideoFormvisible 的值变为 true，就会出现添加小节的弹框。
l 89行 methods 中添加的代码
methods:{
//===========================小节操作=================
//添加小节弹框的方法
openvideo(chapterId) {
//弹框
dialogvideoFormvisible = true
},
//============================章节操作================
//删除章节
removechapter( chapterId){
this.$confirm("此操作将删除章节，是否继续?"，"提示'，{
confirmButtonText:‘确定"，
cancelButtonText: ‘取消"，type: "warning"
}).then(() => {//点击确定，执行then方法
四、效果测试
测试效果：点击添加小节，会弹出一个框。弹框后能输入小节的数据，最后实现小节的数据添加。将前端和接口重启，打开页面进行测试。
重新登录进去
点击添加课程部分，任意添加数据。来到第二步：创建课程大纲部分
，点击添加章节，将章节名为第一章1010的章节成功添加后。
点击第一章1010后显示的添加小节，可以看到成功显示弹框-添加课时，课时即小节，并且可在弹窗中输入课时标题（小节标题）和排序，选择是否免费等等。同时其中的小节部分中的上传视频部分会在之后进行讲解，到此弹窗成功实现。
任意设置课程标题为1，课时排序10，设为免费，最后点击确认就会调接口存到数据库中。
1.api 中小节的接口
首先，在 api 中定义小节的接口。将 chapter.js复制然后重命名为 video.js。
之后打开重命名后的 video.js 删除3-9行代码。video.js 中有最基本的几种方法：添加小节，根据 id 查询小节。
代码结构和复制的章节接口一致，将其中的章节变量chapter更改为小节变量video。在下面写上添加小节的接口名称，之后加上addVideo，之后是post提交传对象。而删除小节只需要将章节的chapter改为video代表小节，最后更改为小节的id即可。同时修改和查询的更改不做讲解，留给同学自行完善。
l video.js代码
import request from "@/utils/ request'
export default {
//添加小节
//将其中的章节变量chapter更改为小节变量video
addVideo(video){
return request({
//写上添加小节的接口名称: eduservice/video,之后加上add Video
url: ’/ eduservice/video/ addVideo' ,
//post提交传入对象video
method: ‘post‘,
data: video
})
},
//根据id查询章节,留作同学自行修改为小节
getchapter(chapterId){
return request({
url: ‘ /eduservice/chapter/ getchapterInfo/ ‘ +chapterId,
method: ‘get’
})
},
//修改章节,留作同学自行修改为小节
updatechapter(chapter) {
return request({
ur1: ‘ /eduservice/chapter/updateChapter ‘,
method: "post',
data: chapter
})
},
//删除小节
//将删除章节的Chapter改为Video
deleteChapter( chapterId){
return request({
//章节的chapter改为video，同时将chapterId章节id改为小节的id
url: ‘ / eduservice/video/ '+id,
method: "delete'
}
},
｝
2.接口调用
在页面中进行一个接口调用，首先在 chapter.vue91行代码中引入 video 接口：import video from ‘@/api/deu/video’。
最后做添加，使得点击添加小节弹框中的确认后能够调用接口将数据存入数据库中，与之前章节做法一致。
