开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-添加章节（前端）】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11384
课程管理-添加章节（前端）
内容介绍
一、章节增删改查
二、总结
一、章节增删改查
首先来看前端，在添加章节中根据之前的过程，过程是先在 api 中，创建增删改查的接口定义。定义后再引入接口之后进行调用。
1. Api
首先在接口中定义增删改查，先根据获取章节和小节数据列表的代码结构修改编写添加章节的代码。
① 添加章节
l 代码如下：
//添加章节
//改名为addChapter，传入chapter
addChapter(chapter) {
return request({
//添加接口地址：/eduservice/chapter/，同时加上接口名称addChapter
url:"/eduservice/chapter/ addChapter',
//使用post提交
method:'post ',
//传入chapter对象
data: chapter
})
},
之后定义修改，有两个一个是根据id查询章节
② 根据id 查询章节
l 代码如下：
//根据 id 查询章节
//叫getChapter，传入chapterId
getChapter(chapterId){
return request({
// 添加接口的地址：/ eduservice/chapterl/getChapterInfo/，同时传入参数chapterId，最后注意拼接写法时，注意末尾的/不能少，否则会变为getChapterInfo123形式，所以一定不能少
url: ‘ / eduservice/chapterl/getChapterInfo/'+chapterId,
//get提交方式
method: ‘get’
})
},
}
之后为修改章节方法，与添加章节代码差不多。
③ 修改章节
l 代码如下：
//修改章节
//更名为updatechapter方法，传入chapter
updatechapter(chapter){
return request({
//添加接口地址/eduservice/chapter/，同时加上接口名称updateChapter，用于调用接口。
url: " / eduservice/chapter/updateChapter',
//post提交方式
method: 'post ' ,
//返回chapter以方便修改
data: chapter
})
},
④ 删除章节
l 代码如下：
//删除章节
//更名为deletechapter方法，删除是根据id删，所以加上chapterId
deleteChapter(chapterId) {
return request({
//提交接口地址，同时将chapterId传入
url: ' /eduservice/chapter / ' +chapterId,
//delete提交方式
method: 'delete'
//因为没有参数，去除data
})
},
到此章节的增删改查代码定义全部完成。
2.页面调用
定义后，在页面中做一个最终调用，将其实现。在页面代码 chapter.vue 中已经引用过来了。
l 代码如下：
import chapter from |a/ api/ edu/chapter'
同时在点击按钮后显示的弹框为以下代码形成的。在弹框的最后有一个确定按钮，在确定按钮中有一个 saveOrUpdate 方法，其中既要做添加又要做修改，在此先做添加之后再进行完善。
l 代码如下：
<!--添加和修改章节表单-->
<el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
<el-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="o" controls-position="right">
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button ac lick="dialogChapterFormVisible = false">取 消</el-button>
<el-button type="primary" aclick="saveOrUpdate">确定</el-button>
< / div>
</el-dialog>
① 添加章节对象属性
因为在 data()中定义了 chapter 初始值。此外在将章节对象的属性加上，方便之后saveorUpdate()方法中的使用。
data(){
return {
saveBtnDisabled:false,
courseId:' ",//课程id
chaptervideoList: [],
chapter: {//封装章节数据
title: ‘’,
sort: 0
},
dialogChapterFormvisible:false//章节弹框
}
},
② 在 methods 部分
methods 中定义，添加章节 saveOrUpdate 方法。在其中做一个调用 chapter 中的添加方法 addChapter（）。然后在 addChapter（this.chapter）中把 chapter 对象传入,同时完善章节对象的属性。
l 代码如下：
//添加章节
saveorUpdate() {
chapter.addChapter( this.chapter)
之后使用 response 箭头函数，表示添加成功。而添加成功之后，首先是关闭弹框，然后提示信息，最后刷新页面得到最新数据。
共三部：关闭弹框，提示信息，刷新页面。提示信息成功或者失败。要实现刷新页面，调用 getChapterVideo()方法将页面数据再查一次即可。
l 代码如下：
.then( response => {//表示添加成功
//关闭弹框,要关闭弹框只用使得dialogChapterFormvisible值为false即可
this.dialogChapterFormvisible = false
//添加提示信息，成功或者失败。
this.$message({
//成功
type: " success' ,
//显示-添加章节成功！
message: "添加章节成功!‘
}):
//刷新页面，即调用getChapterVideo()方法将页面数据再查一次。
this.getChaptervideo()
l methods 处添加完整代码:
methods:{
saveorupdate() {
//调用chapter中的添加方法addChapter（）。然后在addChapter（this.chapter）中把chapter对象传入
chapter.addChapter( this.chapter)
.then( response => {//表示添加成功
//关闭弹框只用使得dialogChapterFormvisible值为false即可
this.dialogChapterFormvisible = false
//提示
this.$message({
type: 'success' ,
message: ‘添加章节成功!’
});
//刷新页面，即调用getChapterVideo()方法将页面数据再查一次。
this.getChaptervideo()
})
},
二、总结
到此就完成了添加章节的过程。首先我们在页面部分添加了 button 按钮，在其中加了一个弹框的内容，在弹框中使用了 v-model 双向绑定 chapter 对象用来传数据，写完之后又开发了后端的章节的增加修改删除的几个接口，最后都写完再页面中给它引用然后调这个方法，做一个添加。添加之后，就是关弹框，提示信息，刷新页面。
三、测试
1.测试过程
将效果最终测试，使用之前没有数据的 id1234722014930178049用于测试，在页面输入http://localhost:9528/#/course/chapter/1234722014930178049网址打开测试页面。
点击添加章节，在出现弹框中输入章节信息：章节标题为第一章 测试，章节排序为1，点击确定。
2. 第一次报错
出现提示报错：Network Error，按f12查看错误，发现仍为403()错误，说明要么是跨域，要么就是接口名称写错。而报错显示：http://localhost:9001/eduservice/chapter/addChapter。
3. 报错原因
而正是因为在编写完代码之后，并未重启服务器，所以没有加载编译代码，路径没有办法得到报了403错误。
重启服务器之后，前端不做任何操作，来到页面首先 ctrlf5刷新
仍然输出一组测试数据，在出现弹框中输入章节信息：章节标题为第一章 测试1010，章节排序为1，点击确定。
4.第二次报错
再次报错显示执行了全局异常处理，表示后端代码出现问题。
5.报错原因
前端并未报很大错误，仅仅提示 error。而接口中却报出了许多异常问题。要查看异常问题，一般看前几行和后面几部分。报错处如下：
Field 表示一个属性，此表示 course_id没有一个默认值。
###Error updating database. Cause: java. sql.SQLException:Field 'course_id’ doesn' t have a default value
cause by 表示由什么引起，之后的提示表示course_id没有值。
Caused by: java. sql.SQLException: Field ‘course_id’doesn't have a default value
此时表示在添加章节时，在最后提交的 chapter 章节对象中，并没有数据库表中的course_id 值，只有 title 和 sort。所以之后的提交，包括添加就会报错显示course_id 值为空。
但在设定时，将 course_id 的数值设为了 NOT NULL，所以不可为空。
目前出现的问题就是 course_id 值并未被传过来。导致报错
6.错误总结
在代码中常见以下几种错误：403（）要么跨域，要么路径错误，本章两次错误，第一次是未将服务器重启，重启后，仍报错显示：执行了全局异常处理，此时是接口问题，根据错误提醒发现是 course_id 的值没有传，因为在添加章节表时，需要课程 id ,但在 saveOrUpdate()方法中传章节对象 chapter 过程中并没有传course_id，最终导致的报错。
7. 最后解决方法
找到第二次报错原因，只需要将课程id加上即可。就是说，此时我们已经获得了chapterId 课程 id，只需要课程id将其设置在 chapter 的对象中就可以。设置在chapter.addChapter()前使得添加章节是有值即可。
l 添加后完整 method 处代码如下：
methods:{
saveorupdate() {
//设置课程id到chapter对象里面，因为chapter对象在实体类中，其中有courseId,所以就可以把它设置进去。
this.chapter.courseId = this.courseId
//调用chapter中的添加方法addChapter（）。然后在addChapter（this.chapter）中把chapter对象传入
chapter.addChapter( this.chapter)
.then( response => {//表示添加成功
//关闭弹框只用使得dialogChapterFormvisible值为false即可
this.dialogChapterFormvisible = false
//提示
this.$message({
type: 'success' ,
message: ‘添加章节成功!’
});
//刷新页面，即调用getChapterVideo()方法将页面数据再查一次。
this.getChaptervideo()
})
},
添加完成后，course_id 中的值就不会为空。最后在 EduChapterController 中的创建时间和更新时间处添加自动填充代码。
l 代码如下：
@ApiModelProperty(value = "创建时间")
//自动填充
@TableField(fill = FieldFill.INSERT)
private Date gmtCreate;
@ApiModelProperty(value = “更新时间")
//自动填充
@TableField(fill = FieldFill.INSERT_UPDATE)
private Date gmtModified;
到此所有过程全部完成。
第一个错误是因为服务器没有重启，第二个是因为加章节的时候需要课程 id，但之前里面没有课程 id，就给它做一个设置，设置位置无所谓，只要能够在 addChapter 方法传值之前即可。在最后的时间部分添加一个自动填充。
