在EduChapterController中添加如下内容
@ApiOperation("添加章节")
@PostMapping("add")
public R addChapter(@RequestBody EduChapter chapter) {
chapterService.save(chapter);
return R.ok();
}
在EduChapterController中添加如下内容
@ApiOperation("根据id查询章节信息")
@GetMapping("{id}")
public R getChapterById(@PathVariable String id) {
EduChapter chapter = chapterService.getById(id);
return R.ok().data("chapter", chapter);
}
在EduChapterController中添加如下内容
@ApiOperation("更新章节信息")
@PostMapping("update")
public R updateChapter(@RequestBody EduChapter chapter) {
chapterService.updateById(chapter);
return R.ok();
}
在EduChapterController中添加如下内容
@ApiOperation("删除章节信息")
@DeleteMapping("{id}")
public R deleteChapter(@PathVariable String id) {
boolean success = chapterService.deleteChapter(id);
if (success) {
return R.ok();
} else {
return R.error();
}
}
EduChapterService层:接口
boolean deleteChapter(String id);
EduChapterService层:实现
/**
* 删除章节信息
* 只有章节中没有小节的情况下才能删除
* @param id
*/
@Override
public boolean deleteChapter(String id) {
QueryWrapper<EduVideo> wrapper = new QueryWrapper<>();
wrapper.eq("chapter_id", id);
Integer cnt = videoMapper.selectCount(wrapper);
if (cnt > 0) {
throw new CustomException(20001, "章节中有小节,请先删除小节!");
}
int delete = baseMapper.deleteById(id);
return delete > 0;
}
在EduChapter.class
和EduChapter.class
中,将创建和更新加上TableField注解用于时间的自动注入
@ApiModelProperty(value = "创建时间")
@TableField(fill = FieldFill.INSERT)
private Date gmtCreate;
@ApiModelProperty(value = "更新时间")
@TableField(fill = FieldFill.INSERT_UPDATE)
private Date gmtModified;
在src/api/edu
的chapter.js中添加如下内容:
/**
* 添加章节信息
*/
addChapter(chapter){
return request({
url: `/eduservice/chapter/add`,
method: 'post',
data: chapter
})
},
/**
* 根据章节id获取章节信息
*/
getChapter(chapterId){
return request({
url: `/eduservice/chapter/${chapterId}`,
method: 'get',
})
},
/**
* 根据课程id获取章节和小节信息
*/
updateChapter(chapter){
return request({
url: `/eduservice/chapter/update`,
method: 'post',
data: chapter
})
},
/**
* 根据章节id删除章节信息
*/
deleteChapter(chapterId){
return request({
url: `/eduservice/chapter/${chapterId}`,
method: 'delete',
})
},
在chapter.vue
中添加如下内容
dialogChapterFormVisible: false, //是否显示章节表单
chapter: {// 章节对象
courseId: '',
title: '',
sort: 0
}
<el-button type="text" @click="openChapterDialog">添加章节el-button>
<!-- 添加和修改章节表单 -->
<el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
<el-form :model="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 @click="dialogChapterFormVisible = false">取 消</el-button>
<el-button type="primary" @click="saveOrUpdate">确 定</el-button>
</div>
</el-dialog>
//打开弹窗
openChapterDialog(){
//清空数据
this.chapter.sort= 0
this.chapter.title= ''
//打开弹窗
this.dialogChapterFormVisible=true
},
//添加章节
addChapter(){
this.chapter.courseId = this.courseId
chapterApi.addChapter(this.chapter)
.then(response => {
//关闭弹窗
this.dialogChapterFormVisible = false
//提示信息
this.$message({
type: 'success',
message: '章节信息添加成功'
})
//从新获取章节小节信息
this.getCourseChapter()
})
},
//添加或者修改章节
saveOrUpdate(){
this.addChapter()
},
点击添加按钮,弹出弹窗
输入信息,点击确定,可以看到章节信息添加成功
<el-button style="" type="text" @click="openEditChapter(chapter.id)">编辑el-button>
//弹出弹框,并回显章节信息
openEditChapter(chapterId){
//获取数据
chapterApi.getChapter(chapterId)
.then(response => {
this.chapter = response.data.chapter
})
//弹窗
this.dialogChapterFormVisible = true
},
//修改章节信息
updateChapter(){
chapterApi.updateChapter(this.chapter)
.then(response => {
//关闭弹窗
this.dialogChapterFormVisible = false
//提示信息
this.$message({
type: 'success',
message: '章节信息修改成功'
})
//从新获取章节小节信息
this.getCourseChapter()
})
},
//添加或者修改章节
saveOrUpdate(){
if (!this.chapter.id){ //添加操作
this.addChapter()
} else { //修改操作
this.updateChapter()
}
},
点击编辑,弹出弹窗,并回显数据
<el-button type="text" @click="deleteChapter(chapter.id)">删除el-button>
//删除章节
deleteChapter(chapterId){
//弹出删除章节提示框
this.$confirm('此操作将永久删除该章节信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => { //用户点击确定会调用
//尝试删除数据,并且提示删除结果
chapterApi.deleteChapter(chapterId)
.then(response => {
//提示信息
this.$message({
type: 'success',
message: '章节信息删除成功'
})
//从新获取章节小节信息
this.getCourseChapter()
})
})
},
点击删除按钮,弹出提示框: