一、课程添加分析
发布流程图
数据表对应
课程相关表的关系
二、课程管理–添加课程后端
1、使用代码生成器生成相关课程相关的代码
CodeGenerator类中生成
2、细节问题
(1)创建vo实体类用户表单数据封装
(2)把表单提交过来的数据添加到数据库
向两张表添加数据:课程表 和 课程表述表
(3)把讲师和分类使用下拉列表显示
课程分类 做成二级联动
3、创建vo实体类
@ApiModel(value = "Course查询对象", description = "课程管理查询对象封装")
@Data
public class CourseInfoVo {
@ApiModelProperty(value = "课程ID")
private String id;
@ApiModelProperty(value = "课程讲师ID")
private String teacherId;
@ApiModelProperty(value = "二级分类ID")
private String subjectId;
@ApiModelProperty(value = "一级分类ID")
private String subjectParentId;
@ApiModelProperty(value = "课程标题")
private String title;
@ApiModelProperty(value = "课程销售价格,设置为0则可免费观看")
private BigDecimal price;
@ApiModelProperty(value = "总课时")
private Integer lessonNum;
@ApiModelProperty(value = "课程封面图片路径")
private String cover;
@ApiModelProperty(value = "课程简介")
private String description;
}
4、编写Controller类
@Api(description = "课程管理")
@RestController
@RequestMapping("/eduservice/course")
@CrossOrigin
public class EduCourseController {
@Autowired
private EduCourseService courseService;
@ApiOperation(value = "添加课程基本信息")
@PostMapping("addCourseInfo")
public R addCourseInfo(@RequestBody CourseInfoVo courseInfoVo){
//返回添加之后课程id,为了后面添加大纲使用
String id = courseService.saveCourseInfo(courseInfoVo);
return R.ok().data("courseId",id);
}
}
5、编写Service类
@Service
public class EduCourseServiceImpl extends ServiceImpl<EduCourseMapper, EduCourse> implements EduCourseService {
@Autowired
private EduCourseDescriptionService courseDescriptionService;
@Override
public String saveCourseInfo(CourseInfoVo courseInfoVo) {
//1 向课程表添加课程基本信息
EduCourse eduCourse =new EduCourse();
//将courseInfoVo对象转化成eduCourse
BeanUtils.copyProperties(courseInfoVo,eduCourse);
int insert = baseMapper.insert(eduCourse);
if (insert == 0) {
throw new GuliException(20001,"添加课程信息失败");
}
//获取添加之后课程id
String cid = eduCourse.getId();
//2 向课程简介表添加课程简介
EduCourseDescription courseDescription =new EduCourseDescription();
courseDescription.setDescription(courseInfoVo.getDescription());
//设置描述id 就是课程id,记得将实体类中的填充模式改为INPUT
courseDescription.setId(cid);
courseDescriptionService.save(courseDescription);
//这里存在一个问题就是:课程和描述是一对一关系,添加之后,id应该是相同的
return cid;
}
}
注意问题:
(1)课程和描述是一对一关系,添加之后,id应该是相同的。
EduCourseDescription类中id 属性@TableId(value = "id", type = IdType.INPUT)
(2)EduCourse类和EduCourseDescription类中的时间需要自动填充。@TableField(fill = FieldFill.INSERT)
6、启动Swagger测试
三、课程管理–添加课程前端–填写课程基本信息
效果图:
1、添加课程管理路由
在api/router/index.js 中
{
path: '/course',
component: Layout,
redirect: '/course/list',
name: '课程管理',
meta: { title: '课程管理', icon: 'example' },
children: [
{
path: 'list',
name: '课程列表',
component: () => import('@/views/edu/course/list'),
meta: { title: '课程列表', icon: 'table' }
},
{
path: 'info',
name: '添加课程',
component: () => import('@/views/edu/course/info'),
meta: { title: '添加课程', icon: 'tree' }
},
{
path: 'info/:id',
name: 'EduCourseInfoEdit',
component: () => import('@/views/edu/course/info'),
meta: { title: '编辑课程基本信息', noCache: true },
hidden: true
},
{
path: 'chapter/:id',
name: 'EduCourseChapterEdit',
component: () => import('@/views/edu/course/chapter'),
meta: { title: '编辑课程大纲', noCache: true },
hidden: true
},
{
path: 'publish/:id',
name: 'EduCoursePublishEdit',
component: () => import('@/views/edu/course/publish'),
meta: { title: '发布课程', noCache: true },
hidden: true
}
]
},
注意:这里有三个模块添加隐藏域。
2、添加Vue组件
3、整合步骤条组件实现页面跳转
参考:http://element-cn.eleme.io/#/zh-CN/component/steps
(1)课程页面信息
info.vue
<template>
<div class="app-container">
<h2 style="text-align: center;">发布新课程</h2>
<el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
<el-step title="填写课程基本信息"/>
<el-step title="创建课程大纲"/>
<el-step title="最终发布"/>
</el-steps>
<el-form label-width="120px">
<el-form-item>
<el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
saveBtnDisabled:false // 保存按钮是否禁用
}
},
created() {
},
methods:{
saveOrUpdate() {
//跳转到第二步
this.$router.push({path:'/course/chapter/1'})
}
}
}
</script>
(2)课程大纲页面
chapter.vue
<template>
<div class="app-container">
<h2 style="text-align: center;">发布新课程</h2>
<el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
<el-step title="填写课程基本信息"/>
<el-step title="创建课程大纲"/>
<el-step title="提交审核"/>
</el-steps>
<el-form label-width="120px">
<el-form-item>
<el-button @click="previous">上一步</el-button>
<el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
saveBtnDisabled: false // 保存按钮是否禁用
}
},
created() {
},
methods: {
previous() {
this.$router.push({ path: '/edu/course/info/1' })
},
next() {
//跳转到第二步
this.$router.push({ path: '/edu/course/publish/1' })
}
}
}
</script>
(3)课程发布页面
publish.vue
<template>
<div class="app-container">
<h2 style="text-align: center;">发布新课程</h2>
<el-steps :active="3" process-status="wait" align-center style="margin-bottom: 40px;">
<el-step title="填写课程基本信息"/>
<el-step title="创建课程大纲"/>
<el-step title="最终发布"/>
</el-steps>
<el-form label-width="120px">
<el-form-item>
<el-button @click="previous">返回修改</el-button>
<el-button :disabled="saveBtnDisabled" type="primary" @click="publish">发布课程</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
saveBtnDisabled: false // 保存按钮是否禁用
}
},
created() {
console.log('publish created')
},
methods: {
previous() {
console.log('previous')
this.$router.push({ path: '/course/chapter/1' })
},
publish() {
console.log('publish')
this.$router.push({ path: '/course/list' })
}
}
}
</script>
4、定义api
在api/edu/course.js 中
import request from '@/utils/request'
export default{
//1 添加课程信息
addCourseInfo(courseInfo){
return request({
url: `/eduservice/course/addCourseInfo`,
method: 'post',
data:courseInfo
})
}
}
5、组件模板
在 src/views/edu/info.vue 中
<el-form label-width="120px">
<el-form-item label="课程标题">
<el-input v-model="courseInfo.title" placeholder=" 示例:机器学习项目课:从基础到搭建项目视频课程。专业名称注意大小写"/>
</el-form-item>
<!-- 所属分类 TODO -->
<!-- 课程讲师 TODO -->
<el-form-item label="总课时">
<el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
</el-form-item>
<!-- 课程简介 TODO -->
<el-form-item label="课程简介">
<el-input v-model="courseInfo.description" placeholder=" "/>
</el-form-item>
<!-- 课程封面 TODO -->
<el-form-item label="课程价格">
<el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
</el-form-item>
<el-form-item>
<el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
</el-form-item>
</el-form>
6、组件js
<script>
import course from '@/api/edu/course'
export default {
data() {
return {
saveBtnDisabled:false,
courseInfo:{
title: '',
subjectId: '',//二级分类id
subjectParentId:'',//一级分类id
teacherId: '',
lessonNum: 0,
description: '',
cover: '',
price: 0
},
}
},
created() {
},
methods:{
saveOrUpdate() {
course.addCourseInfo(this.courseInfo)
.then(response => {
//提示
this.$message({
type: 'success',
message: '添加课程信息成功!'
});
//跳转到第二步
this.$router.push({path:'/course/chapter/'+response.data.courseId})
})
}
}
}
</script>
7、讲师下拉列表
(1)组件模板
<!-- 课程讲师 -->
<el-form-item label="课程讲师">
<el-select
v-model="courseInfo.teacherId"
placeholder="请选择">
<el-option
v-for="teacher in teacherList"
:key="teacher.id"
:label="teacher.name"
:value="teacher.id"/>
</el-select>
</el-form-item>
(2)定义api
api/edu/teacher.js
//2 查询所有讲师
getListTeacher() {
return request({
url: `/eduservice/teacher/findAll`,
method: 'get'
})
}
组件中引入teacher api
import teacher from '@/api/edu/teacher'
(3)组件脚本
定义data
teacherList: [] // 讲师列表
表单初始化时获取讲师列表
created() {
//初始化所有讲师
this.getListTeacher()
},
methods:{
// .....
//查询所有的讲师
getListTeacher() {
course.getListTeacher()
.then(response => {
this.teacherList = response.data.items
})
},
}
8、课程分类多级联动
1、效果图
2、获取一级分类
(1)组件数据定义
定义data中
subjectOneList:[],//一级分类
subjectTwoList:[]//二级分类
(2)组件模板
<el-form-item label="课程分类">
<el-select
v-model="courseInfo.subjectParentId"
placeholder="一级分类">
<el-option
v-for="subject in subjectOneList"
:key="subject.id"
:label="subject.title"
:value="subject.id"/>
</el-select>
</el-form-item>
(3)组件脚本
表单初始化时获取一级分类嵌套列表,引入subject api
import subject from '@/api/edu/subject'
定义方法
created() {
//初始化一级分类
this.getOneSubject()
},
method:{
//....
//查询所有的一级分类
getOneSubject() {
subject.getSubjectList()
.then(response => {
this.subjectOneList = response.data.list
})
},
}
3、显示二级分类
1、组件模板
<!-- 二级分类 -->
<el-select v-model="courseInfo.subjectId" placeholder="二级分类">
<el-option
v-for="subject in subjectTwoList"
:key="subject.id"
:label="subject.title"
:value="subject.id"/>
</el-select>
2、注册change事件
在一级分类的<el-select>
组件中注册change事件
<el-select @change="subjectLevelOneChanged" ....>
3、定义change事件方法
//点击某个一级分类,触发change,显示对应二级分类
subjectLevelOneChanged(value) {
//value就是一级分类id值
//遍历所有的分类,包含一级和二级
for(var i=0;i<this.subjectOneList.length;i++) {
//每个一级分类
var oneSubject = this.subjectOneList[i]
//判断:所有一级分类id 和 点击一级分类id是否一样
if(value === oneSubject.id) {
//从一级分类获取里面所有的二级分类
this.subjectTwoList = oneSubject.children
//把二级分类id值清空
this.courseInfo.subjectId = ''
}
}
},
9、课程封面
参考 http://element-cn.eleme.io/#/zh-CN/component/upload 用户头像上传
1、上传默认封面
创建文件夹cover,上传默认的课程封面
2、定义默认封面
courseInfo:{
//....
cover: '/static/01.jpg',
//cover: process.env.OSS_PATH + '/cover/default.gif',
//....
},
3、定义data数据
BASE_API: process.env.BASE_API // 接口API地址
4、组件模板
在info.vue中添加上传组件模板
<!-- 课程封面-->
<el-form-item label="课程封面">
<!-- show-file-list:不显示文件上传信息
on-success:上传成功
before-upload:上传之前
-->
<el-upload
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:action="BASE_API+'/eduoss/fileoss'"
class="avatar-uploader">
<img :src="courseInfo.cover">
</el-upload>
</el-form-item>
5、结果回调
//上传封面成功调用的方法
handleAvatarSuccess(res, file) {
this.courseInfo.cover = res.data.url
},
//上传之前调用的方法
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
},
10、富文本编辑器
1、Tinymce可视化编辑器
参考:
https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce
https://panjiachen.gitee.io/vue-element-admin/#/example/create
2、组件初始化
(1)复制脚本库
将脚本库复制到项目的static目录下(在vue-element-admin-master的static路径下)
(2)配置html变量
在 guli-admin/build/webpack.dev.conf.js 中添加配置
使在html页面中可是使用这里定义的BASE_URL变量
new HtmlWebpackPlugin({
//.....
templateParameters: {
BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
}
})
(3)引入js脚本
在guli-admin/index.html 中引入js脚本
<script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script>
<script src=<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js></script>
3、组件引入
(1)引入组件
课程信息组件中引入 Tinymce
import Tinymce from '@/components/Tinymce'
export default {
components: { Tinymce },
......
}
4、组件模板
<!-- 课程简介-->
<el-form-item label="课程简介">
<tinymce :height="300" v-model="courseInfo.description"/>
</el-form-item>
5、组件样式
在info.vue文件的最后添加如下代码,调整上传图片按钮的高度
<style scoped>
.tinymce-container {
line-height: 29px;
}
</style>
四、课程大纲列表 – 后端开发
效果图:
1、创建两个实体类,章节和小节
ChapterVo 类
@ApiModel(value = "章节封装类",description = "章节封装类")
@Data
public class ChapterVo {
private String id;
private String title;
//表示小节
private List<VideoVo> children = new ArrayList<>();
}
VideoVo 类
@ApiModel(value = "小节封装类",description = "小节封装类")
@Data
public class VideoVo {
private String id;
private String title;
}
2、编写Controller
@Api(description = "章节")
@RestController
@RequestMapping("/eduservice/chapter")
@CrossOrigin
public class EduChapterController {
@Autowired
private EduChapterService chapterService;
//根据课程id进行查询
@ApiOperation(value = "课程大纲列表")
@GetMapping("/getChapterVideo/{courseId}")
public R getChapterVideo(@PathVariable String courseId){
List<ChapterVo> list = chapterService.getChapterVideoByCourseId(courseId);
return R.ok().data("allChapterVideo",list);
}
}
3、编写Service
@Service
public class EduChapterServiceImpl extends ServiceImpl<EduChapterMapper, EduChapter> implements EduChapterService {
@Autowired
private EduVideoService videoService;
@Override
public List<ChapterVo> getChapterVideoByCourseId(String courseId) {
//1 根据课程id查询课程里面的章节
QueryWrapper<EduChapter> wrapperChapter = new QueryWrapper<>();
wrapperChapter.eq("course_id",courseId);
List<EduChapter> eduChapterList = baseMapper.selectList(wrapperChapter);
//2 根据课程id查询课程里面的小节
QueryWrapper<EduVideo> wrapperVideo = new QueryWrapper<>();
wrapperVideo.eq("course_id",courseId);
List<EduVideo> eduVideoList = videoService.list(wrapperVideo);
//创建list集合,用于最终封装的集合
List<ChapterVo> finallList = new ArrayList<>();
//3 遍历查询章节list集合进行封装
for (int i = 0; i < eduChapterList.size(); i++) {
//得到每个章节
EduChapter eduChapter = eduChapterList.get(i);
//将edChapter对象复制到ChapterVo里面
ChapterVo chapterVo = new ChapterVo();
BeanUtils.copyProperties(eduChapter,chapterVo);
//把chapterVo放到最终的list集合中
finallList.add(chapterVo);
//创建集合,用于封装章节中的小节
List<VideoVo> videoList = new ArrayList<>();
//4 遍历查询小节list集合进行封装
for (int m = 0; m < eduVideoList.size(); m++) {
//得到每个小节
EduVideo eduVideo = eduVideoList.get(m);
//判断:小节里面chapterid和章节里面的id是否一样
if (eduVideo.getChapterId().equals(eduChapter.getId())) {
//进行封装
VideoVo videoVo = new VideoVo();
BeanUtils.copyProperties(eduVideo,videoVo);
//放在小节的集合中
videoList.add(videoVo);
}
}
//把封装之后的小节list集合,放到章节对象里面
chapterVo.setChildren(videoList);
}
return finallList;
}
}
4、使用Swagger进行测试
五、课程大纲列表 – 前端开发
1、定义api
import request from '@/utils/request'
export default{
//1 查询所有讲师
getChapterVideo(courseId) {
return request({
url: `/eduservice/chapter/getChapterVideo/${courseId}`,
method: 'get'
})
}
}
2、组件脚本
import chapter from '@/api/edu/chapter'
3、页面调用
在views/edu/course/chapter.vue 中
created() {
//获取路由中的id值
if(this.$route.params && this.$route.params.id) {
this.courseId = this.$route.params.id
//调用 根据课程id查询章节和小节
this.getChapterVideo()
}
},
methods:{
//根据课程id查询章节和小节
getChapterVideo() {
chapter.getChapterVideo(this.courseId)
.then(response =>{
this.chapterVideoList = response.data.allChapterVideo
})
},
//......
}
4、添加页面
<!-- 章节 -->
<ul class="chanpterList">
<li
v-for="chapter in chapterVideoList"
:key="chapter.id">
<p>
{{ chapter.title }}
<span class="acts">
<el-button style="" type="text" @click="openVideo(chapter.id)">添加小节</el-button>
<el-button style="" type="text" @click="openEditChatper(chapter.id)">编辑</el-button>
<el-button type="text" @click="removeChapter(chapter.id)">删除</el-button>
</span>
</p>
<!-- 视频 -->
<ul class="chanpterList videoList">
<li
v-for="video in chapter.children"
:key="video.id">
<p>{{ video.title }}
<span class="acts">
<el-button style="" type="text" @click="openEditVideo(video.id)">编辑</el-button>
<el-button type="text" @click="removeVideo(video.id)">删除</el-button>
</span>
</p>
</li>
</ul>
</li>
</ul>
<div>
<el-button @click="previous">上一步</el-button>
<el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
</div>
5、页面样式
<style scoped>
.chanpterList{
position: relative;
list-style: none;
margin: 0;
padding: 0;
}
.chanpterList li{
position: relative;
}
.chanpterList p{
float: left;
font-size: 20px;
margin: 10px 0;
padding: 10px;
height: 70px;
line-height: 50px;
width: 100%;
border: 1px solid #DDD;
}
.chanpterList .acts {
float: right;
font-size: 14px;
}
.videoList{
padding-left: 50px;
}
.videoList p{
float: left;
font-size: 14px;
margin: 10px 0;
padding: 10px;
height: 50px;
line-height: 30px;
width: 100%;
border: 1px dotted #DDD;
}
</style>
六、修改课程基本信息
流程是:点击上一步的时候,回到第一步页面,把课程基本信息数据回显。修改数据点击保存实现更新数据效果。
1、后端Controller类
@ApiOperation(value = "根据课程查询课程基本信息")
@GetMapping("getCourseInfo/{courseId}")
public R getCourseInfo(@PathVariable String courseId) {
CourseInfoVo courseInfoVo = courseService.getCourseInfo(courseId);
return R.ok().data("courseInfoVo",courseInfoVo);
}
@ApiOperation(value = "根据id修改课程信息")
@PostMapping("updateCourseInfo")
public R updateCourseInfo(@RequestBody CourseInfoVo courseInfoVo) {
courseService.updateCourseInfo(courseInfoVo);
return R.ok();
}
2、后端Service类
@Override
public CourseInfoVo getCourseInfo(String courseId) {
//1 查询课程表
EduCourse eduCourse = baseMapper.selectById(courseId);
CourseInfoVo courseInfoVo =new CourseInfoVo();
BeanUtils.copyProperties(eduCourse,courseInfoVo);
//2 查询描述表
EduCourseDescription courseDescription = courseDescriptionService.getById(courseId);
courseInfoVo.setDescription(courseDescription.getDescription());
return courseInfoVo;
}
@Override
public void updateCourseInfo(CourseInfoVo courseInfoVo) {
//1 修改课程表
EduCourse eduCourse = new EduCourse();
BeanUtils.copyProperties(courseInfoVo,eduCourse);
int update = baseMapper.updateById(eduCourse);
if(update ==0) {
throw new GuliException(20001,"修改课程信息失败");
}
//2 修改描述表
EduCourseDescription description = new EduCourseDescription();
description.setId(courseInfoVo.getId());
description.setDescription(courseInfoVo.getDescription());
courseDescriptionService.updateById(description);
}
3、定义前端两个接口
在api/edu/course.js中
//根据课程id查询课程基本信息
getCourseInfoId(id) {
return request({
url: `/eduservice/course/getCourseInfo/${id}`,
method: 'get'
})
},
//修改课程信息
updateCourseInfo(courseInfo) {
return request({
url: `/eduservice/course/updateCourseInfo`,
method: 'post',
data: courseInfo
})
}
4、修改/edu/course/chapter.vue中路径
5、在info.vue页面实现数据回显
获取路由中课程id,调用根据id查询的接口,数据显示。
created() {
//获取路由id值,回显数据
if(this.$route.params && this.$route.params.id) {
this.courseId = this.$route.params.id
//调用根据id查询课程的方法
this.getInfo()
}else{
//初始化所有讲师
this.getListTeacher()
//初始化一级分类
this.getOneSubject()
}
},
methods:{
//根据课程id查询,回显数据
getInfo(){
course.getCourseInfoId(this.courseId)
.then(response => {
//在courseInfo课程基本信息,包含一级分类id和二级分类id
this.courseInfo = response.data.courseInfoVo
//下面的代码加在这里。
})
}
//....
}
注意
:这里我们在运行的时候发现二级分类下拉框没有数据,因为subjectTwoList数组为空,所以只显示查询出来的id。
解决办法就是
:因为在courseInfo课程基本信息,包含一级分类id和二级分类id,所以先查询所有一级分类,然后遍历所有一级分类,比较当前courseInfo里面一级分类id 和 所有的一级分类id,如果相同则遍历一级分类下面的二级分类。
//1 查询所有的分类,包括一级和二级
subject.getSubjectList()
.then(response => {
//2 获取所有一级分类
this.subjectOneList = response.data.list
//3 把所有的一级分类数组进行遍历,比较当前courseInfo里面一级分类id和所有的一级分类id
for(var i=0;i<this.subjectOneList.length;i++){
//获取每一个一级分类
var oneSubject = this.subjectOneList[i]
//比较当前courseInfo里面一级分类id和所有的一级分类id
if(this.courseInfo.subjectParentId == oneSubject.id){
//获取一级分类所有的二级分类
this.subjectTwoList = oneSubject.children
}
}
})
//初始化所有讲师
this.getListTeacher()
此时启动服务测试,页面数据即可回显。
6、更新数据 js
这里我们对之前写的加以修改,把添加和修改方法单独提出来写。
methods:{
//.....
//添加课程
saveCourse() {
course.addCourseInfo(this.courseInfo)
.then(response => {
//提示
this.$message({
type: 'success',
message: '添加课程信息成功!'
});
//跳转到第二步
this.$router.push({path:'/course/chapter/'+response.data.courseId})
})
},
//修改课程
updateCourse() {
course.updateCourseInfo(this.courseInfo)
.then(response => {
//提示
this.$message({
type: 'success',
message: '修改课程信息成功!'
});
//跳转到第二步
this.$router.push({path:'/course/chapter/'+this.courseId})
})
},
saveOrUpdate() {
//判断添加还是修改
if(!this.courseInfo.id) {
//添加
this.saveCourse()
}else{
//更新
this.updateCourse()
}
}
}
7、启动服务测试即可
七、课程章节添加、修改、删除 --后端开发
1、编写Controller类
@ApiOperation(value = "添加章节")
@PostMapping("addChapter")
public R addChapter(@RequestBody EduChapter eduChapter){
chapterService.save(eduChapter);
return R.ok();
}
@ApiOperation(value = "根据章节id查询")
@GetMapping("getChapterInfo/{chapterId}")
public R getChapterInfo(@PathVariable String chapterId) {
EduChapter eduChapter = chapterService.getById(chapterId);
return R.ok().data("chapter",eduChapter);
}
@ApiOperation(value = "修改章节")
@PostMapping("updateChapter")
public R updateChapter(@RequestBody EduChapter eduChapter){
chapterService.updateById(eduChapter);
return R.ok();
}
@ApiOperation(value = "删除章节")
@DeleteMapping("deleteChapter/{chapterId}")
public R deleteChapter(@PathVariable String chapterId){
boolean flag = chapterService.deleteChapter(chapterId);
if (flag){
return R.ok();
}else {
return R.error();
}
}
注意:在实体类中的时间加上@TableField(fill = FieldFill.INSERT)
注解
2、编写Service类
@Override
public boolean deleteChapter(String chapterId) {
//根据chapterid章节id查询小节表,如果查询到数据,不进行删除
QueryWrapper<EduVideo> wrapper = new QueryWrapper<>();
wrapper.eq("chapter_id",chapterId);
int count = videoService.count(wrapper);
if (count > 0) {//查询出小节,不进行删除
throw new GuliException(20001,"不能删除");
}else{//没有查询数据,进行删除
//删除章节
int result = baseMapper.deleteById(chapterId);
//成功 1>0 0>0
return result>0;
}
}
注意:这里我们要对删除进行判断
:
如果章节里面没有小节,直接删除。
如果章节里面有小节,如何删除?
第一种:删除章节的时候,把章节里面所有小节都删除。
第二种:如果删除章节下面有小节,不让进行删除。
八、课程章节添加、修改、删除 --前端开发
1、定义api接口
//2 添加章节
addChapter(chapter) {
return request({
url: `/eduservice/chapter/addChapter`,
method: 'post',
data:chapter
})
},
//3 修改章节
updateChapter(chapter) {
return request({
url: `/eduservice/chapter/updateChapter`,
method: 'post',
data:chapter
})
},
//4 删除章节
deleteChapter(chapterId) {
return request({
url: `/eduservice/chapter/deleteChapter/${chapterId}`,
method: 'delete'
})
},
//5 根据id进行查询
getChapterInfo(chapterId) {
return request({
url: `/eduservice/chapter/getChapterInfo/${chapterId}`,
method: 'get'
})
}
2、添加章节按钮
<el-button type="text" @click="openChapterDialog()">添加章节</el-button>
3、添加弹出框表单
<!-- 添加和修改章节表单 -->
<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>
4、编写添加的js
data() {
return {
//....
courseId:'',//课程id
chapterVideoList:[],
chapter:{//封装章节数据
title: '',
sort: 0
},
dialogChapterFormVisible:false//章节弹框
}
},
methods:{
//弹出添加章节页面
openChapterDialog() {
//弹框
this.dialogChapterFormVisible = true
//表单数据清空
this.chapter.title = ''
this.chapter.sort = ''
},
//添加章节
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() {
this.addChapter()
},
//......
}
5、编写修改的js
//修改章节的方法
updateChapter() {
chapter.updateChapter(this.chapter)
.then(response => {
//关闭弹框
this.dialogChapterFormVisible = false
//提示信息
this.$message({
type: 'success',
message: '修改章节成功!'
});
//刷新页面
this.getChapterVideo()
})
},
saveOrUpdate() {
if(!this.chapter.id){
this.addChapter()
}else{
this.updateChapter()
}
},
//.....
6、编写删除的js
//删除章节
removeChapter(chapterId) {
this.$confirm('此操作将永久删除章节, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {//点击确定,删除成功
//调用删除方法
chapter.deleteChapter(chapterId)
.then(response => {//删除成功
//提示信息
this.$message({
type: 'success',
message: '删除成功!'
});
//刷新页面
this.getChapterVideo()
})
})//点击取消,删除失败
},
注意
:启动服务运行出现403错误。
出现问题原因:第一种是Controller类中跨域注解没有写@CrossOrigin
。第二种是访问路径写的不对。
九、课程小节添加、修改、删除 --前端开发
1、编写Controller类
@Api(description = "小节")
@RestController
@RequestMapping("/eduservice/video")
@CrossOrigin
public class EduVideoController {
@Autowired
private EduVideoService videoService;
@ApiOperation(value = "添加小节")
@PostMapping("addVideo")
public R addVideo(@RequestBody EduVideo eduVideo){
videoService.save(eduVideo);
return R.ok();
}
@ApiOperation(value = "根据小节id查询")
@GetMapping("getVideoInfo/{id}")
public R getVideoInfo(@PathVariable String id){
EduVideo eduVideo = videoService.getById(id);
return R.ok().data("eduVideo",eduVideo);
}
@ApiOperation(value = "修改小节")
@PostMapping("updateVideo")
public R updateVideo(@RequestBody EduVideo eduVideo){
videoService.updateById(eduVideo);
return R.ok();
}
//TODO 后面这个方法需要完善:删除小节时候,同时要把里面的视频删除
@ApiOperation(value = "删除小节")
@DeleteMapping("deleteVideo/{id}")
public R deleteVideo(@PathVariable String id){
videoService.removeById(id);
return R.ok();
}
}
注意:在实体类中的时间加上@TableField(fill = FieldFill.INSERT)
注解
十、课程小节添加、修改、删除 --前端开发
1、定义api接口
import request from '@/utils/request'
export default{
//添加小节
addVideo(video) {
return request({
url: `/eduservice/video/addVideo`,
method: 'post',
data:video
})
},
//根据id进行查询
getVideoInfo(id) {
return request({
url: `/eduservice/video/getVideoInfo/${id}`,
method: 'get'
})
},
//修改小节
updateVideo(video) {
return request({
url: `/eduservice/video/updateVideo`,
method: 'post',
data:video
})
},
//删除小节
deleteVideo(id) {
return request({
url: `/eduservice/video/deleteVideo/${id}`,
method: 'delete'
})
}
}
2、添加修改页面
<!-- 添加和修改课时表单 -->
<el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
<el-form :model="video" label-width="120px">
<el-form-item label="课时标题">
<el-input v-model="video.title"/>
</el-form-item>
<el-form-item label="课时排序">
<el-input-number v-model="video.sort" :min="0" controls-position="right"/>
</el-form-item>
<el-form-item label="是否免费">
<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-form-item label="上传视频">
<!-- TODO -->
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVideoFormVisible = false">取 消</el-button>
<el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定</el-button>
</div>
</el-dialog>
3、引入包
import video from '@/api/edu/video'
4、初始数据定义
data() {
return {
//....
video: {//封装小节数据
title: '',
sort: 0,
free: 0,
videoSourceId: ''
},
dialogVideoFormVisible:false//小节弹框
}
},
5、编写增删改查的js
//===========================小节操作=========================================
//删除小节
removeVideo(id) {
this.$confirm('此操作将永久删除小节, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {//点击确定,删除成功
//调用删除方法
video.deleteVideo(id)
.then(response => {//删除成功
//提示信息
this.$message({
type: 'success',
message: '删除小节成功!'
});
//刷新页面
this.getChapterVideo()
})
})//点击取消,删除失败
},
//添加小节弹框
openVideo(chapterId) {
//弹框
this.dialogVideoFormVisible = true
//设置章节id
this.video.chapterId = chapterId
//表单数据清空
this.video.title = ''
this.video.sort = ''
this.video.free = ''
this.video.videoSourceId = ''
},
//添加小节
addVideo() {
//设置课程id
this.video.courseId = this.courseId
video.addVideo(this.video)
.then(response => {
//关闭弹框
this.dialogVideoFormVisible = false
//提示信息
this.$message({
type: 'success',
message: '添加小节成功!'
});
//刷新页面
this.getChapterVideo()
})
},
//修改小节数据回显
openEditVideo(id) {
//弹框
this.dialogVideoFormVisible = true
//回显数据
video.getVideoInfo(id)
.then(response => {
this.video = response.data.eduVideo
})
},
//修改小节
updateVideo() {
video.updateVideo(this.video)
.then(response => {
//关闭弹框
this.dialogVideoFormVisible = false
//提示信息
this.$message({
type: 'success',
message: '修改小节成功!'
});
//刷新页面
this.getChapterVideo()
})
},
saveOrUpdateVideo() {
if(!this.video.id) {
this.addVideo()
}else{
this.updateVideo()
}
},
6、启动服务测试即可。
如果有收获!!! 希望老铁们来个三连,点赞、收藏、转发。
创作不易,别忘点个赞,可以让更多的人看到这篇文章,顺便鼓励我写出更好的博客