后端
定义接收前端参数 ContentVideoInfoVO
/**
* @author BNTang
* @version S2.3.2Dev
* @program video_parent
* @date Created in 2021/4/10 22:03
* @description 作品小节接收前端参数VO
**/
@Data
public class ContentVideoInfoVO {
@ApiModelProperty(value = "视频ID")
private String id;
@ApiModelProperty(value = "小节名称")
private String title;
@ApiModelProperty(value = "作品ID")
private String contentId;
@ApiModelProperty(value = "章节ID")
private String chapterId;
@ApiModelProperty(value = "视频资源")
private String videoSourceId;
@ApiModelProperty(value = "显示排序")
private Integer sort;
@ApiModelProperty(value = "是否可以试听：0默认 1免费")
private Integer isFree;
}
ContentVideoController
如下是 ContentVideoController 中所有的代码，比较简单主要是在 service 层代码我会额外进行解释
/**
* <p>
* 作品视频 前端控制器
* </p>
*
* @author BNTang
* @since 2021-04-08
*/
@RestController
@CrossOrigin
@Api(tags = "作品视频组")
@RequestMapping("/service_video/content_video")
public class ContentVideoController {
@Resource
private ContentVideoService contentVideoService;
/**
* <b>
* 新增小节
* </b>
*/
@ApiOperation(value = "新增小节")
@PostMapping("/saveVideoInfo")
public ResponseResult save(@RequestBody ContentVideoInfoVO videoInfoForm) {
contentVideoService.saveVideoInfo(videoInfoForm);
return ResponseResult.ok();
}
/**
* <b>
* 根据ID查询小节
* </b>
*/
@ApiOperation(value = "根据ID查询小节")
@GetMapping("/getVideoInfo/{id}")
public ResponseResult getVideInfoById(@PathVariable String id) {
return ResponseResult.ok().data("item", contentVideoService.getContentVideoInfoById(id));
}
/**
* <b>
* 更新小节
* </b>
*/
@ApiOperation(value = "更新小节")
@PostMapping("/updateVideoInfo")
public ResponseResult updateCourseInfoById(@RequestBody ContentVideoInfoVO videoInfoForm) {
contentVideoService.updateVideoInfo(videoInfoForm);
return ResponseResult.ok();
}
/**
* <b>
* 根据ID删除小节
* </b>
*/
@ApiOperation(value = "根据ID删除小节")
@PostMapping("/deleteVideoInfo/{id}")
public ResponseResult removeById(@PathVariable String id) {
if (contentVideoService.deleteVideoById(id)) {
return ResponseResult.ok();
} else {
return ResponseResult.error().message("删除失败");
}
}
}
ContentVideoService 接口内容如下
/**
* <p>
* 作品视频 服务类
* </p>
*
* @author BNTang
* @since 2021-04-08
*/
public interface ContentVideoService extends IService<ContentVideo> {
/**
* <b>
* 根据章节ID查询是否存在小节
* </b>
*
* @param id 章节ID
* @return 是否存在小节
*/
boolean isExistContentVideoWithChapterId(String id);
/**
* <b>
* 新增小节
* </b>
*
* @param contentVideoInfoVO 小节信息VO
*/
void saveVideoInfo(ContentVideoInfoVO contentVideoInfoVO);
/**
* <b>
* 根据ID查询小节
* </b>
*
* @param id 小节ID
* @return 小节信息
*/
ContentVideoInfoVO getContentVideoInfoById(String id);
/**
* <b>
* 更新小节
* </b>
*
* @param contentVideoInfoVO 小节信息VO
*/
void updateVideoInfo(ContentVideoInfoVO contentVideoInfoVO);
/**
* <b>
* 根据ID删除小节
* </b>
*
* @param id 小节ID
* @return 是否删除成功(true ： 删除成功 ， false ： 删除失败)
*/
boolean deleteVideoById(String id);
}
对应的 ContentVideoServiceImpl 实现类代码如下
/**
* <p>
* 作品视频 服务实现类
* </p>
*
* @author BNTang
* @since 2021-04-08
*/
@Service
public class ContentVideoServiceImpl extends ServiceImpl<ContentVideoMapper, ContentVideo>
implements ContentVideoService {
@Override
public boolean isExistContentVideoWithChapterId(String id) {
QueryWrapper<ContentVideo> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("chapter_id", id);
Integer count = baseMapper.selectCount(queryWrapper);
return null != count && count > 0;
}
@Override
public void saveVideoInfo(ContentVideoInfoVO contentVideoInfoVO) {
ContentVideo contentVideo = new ContentVideo();
BeanUtils.copyProperties(contentVideoInfoVO, contentVideo);
this.save(contentVideo);
}
@Override
public ContentVideoInfoVO getContentVideoInfoById(String id) {
// 从video表中取数据
ContentVideo contentVideo = this.getById(id);
if (Objects.isNull(contentVideo)) {
throw new BnTangException(20001, "数据不存在");
}
// 创建videoInfoForm对象
ContentVideoInfoVO contentVideoInfoVO = new ContentVideoInfoVO();
BeanUtils.copyProperties(contentVideo, contentVideoInfoVO);
return contentVideoInfoVO;
}
@Override
public void updateVideoInfo(ContentVideoInfoVO contentVideoInfoVO) {
ContentVideo contentVideo = new ContentVideo();
BeanUtils.copyProperties(contentVideoInfoVO, contentVideo);
this.updateById(contentVideo);
}
@Override
public boolean deleteVideoById(String id) {
// TODO 删除视频资源
int result = baseMapper.deleteById(id);
return result > 0;
}
}
前端
在 api 当中定义 content_video 前端接口
import request from '@/utils/request'
const api_name = '/service_video/content_video'
export default {
// 新增小节
saveVideoInfo(videoInfo) {
return request({
url: `${api_name}/saveVideoInfo`,
method: 'post',
data: videoInfo
});
},
// 根据ID查询小节
getVideoInfoById(id) {
return request({
url: `${api_name}/getVideoInfo/${id}`,
method: 'get'
});
},
// 更新小节
updateVideoInfo(videoInfo) {
return request({
url: `${api_name}/updateVideoInfo`,
method: 'post',
data: videoInfo
});
},
// 根据ID删除小节
deleteVideoById(id) {
return request({
url: `${api_name}/deleteVideoInfo/${id}`,
method: 'post'
});
}
}
新增小节
定义 data 数据
// 是否显示课时表单
dialogVideoFormVisible: false,
// 课时所在的章节id
chapterId: '',
// 课时对象
contentVideo: {
title: '',
sort: 0,
isFree: 0,
videoSourceId: ''
},
添加小节按钮点击事件
<el-button type="text"
@click="dialogVideoFormVisible=true;chapterId = chapter.id">添加小节</el-button>
小节表单
<!--
添加和修改小节表单
-->
<el-dialog :visible.sync="dialogVideoFormVisible" title="添加小节">
<el-form :model="contentVideo" label-width="120px">
<el-form-item label="小节标题">
<el-input v-model="contentVideo.title"/>
</el-form-item>
<el-form-item label="课时排序">
<el-input-number v-model="contentVideo.sort" :min="0" controls-position="right"/>
</el-form-item>
<el-form-item label="是否免费">
<el-radio-group v-model="contentVideo.isFree">
<el-radio :label="true">免费</el-radio>
<el-radio :label="false">默认</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="上传视频">
<!-- 上传视频 -->
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVideoFormVisible = false">取 消</el-button>
<el-button type="primary" @click="saveOrUpdateVideo">确 定</el-button>
</div>
</el-dialog>
实现添加小节按钮点击事件
// 小节按钮点击
saveOrUpdateVideo() {
if (!this.contentVideo.id) {
this.saveDataVideo()
} else {
}
},
// 保存小节数据信息
saveDataVideo() {
this.contentVideo.contentId = this.contentId;
this.contentVideo.chapterId = this.chapterId;
contentVideo.saveVideoInfo(this.contentVideo).then(res => {
this.$message({
type: 'success',
message: res.message
});
// 保存后, 更新相关数据
this.helpSaveVideo()
})
},
保存后, 更新相关数据
// 保存后, 更新相关数据
helpSaveVideo() {
this.dialogVideoFormVisible = false;
this.getNestedTreeList();
this.contentVideo = {
title: '',
sort: 0,
isFree: 0,
videoSourceId: ''
}
},
编辑小节
添加编辑小节按钮点击事件
<el-button type="text" @click="editContentVideo(section.id)">编辑</el-button>
<el-button type="text" @click="deleteContentVideo(section.id)">删除</el-button>
实现数据回显
// 编辑小节按钮
editContentVideo(videoId) {
this.dialogVideoFormVisible = true;
contentVideo.getVideoInfoById(videoId).then(response => {
this.contentVideo = response.data.item;
}).catch(error => {
this.$message.error(error.message);
});
},
编辑保存方法实现
//更新小节信息
updateDataVideo() {
contentVideo.updateVideoInfo(this.contentVideo).then(response => {
this.$message({
type: 'success',
message: response.message
});
// 更新相关数据
this.helpSaveVideo();
}).catch(error => {
this.$message.error(error.message);
});
},
删除小节
deleteContentVideo(videoId) {
this.$confirm('永久删除该记录, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return contentVideo.deleteVideoById(videoId);
}).then((res) => {
// 刷新列表
this.getNestedTreeList();
this.$message({
type: 'success',
message: res.message
});
}).catch((response) => {
if (response === 'cancel') {
this.$message({
type: 'info',
message: '已取消删除'
})
}
});
},
