34.课程最终发布和课程列表功能
一、课程最终发布（后端）
最终的课程发布信息包含了：课程表中的id，title，price，lesson_num(总课时数)，cover(封面)；课程简介表的课程简介；教师表的教师姓名；课程分类表的一级分类和二级分类。
因此我们需要使用多表查询进行实现。
1、在EduCourseController中编写代码
//根据课程id查询课程确认信息
@GetMapping("getPublishCourseInfo/{id}")
public R getPublishCourseInfo(@PathVariable String id){
CoursePublishVo coursePublishVo = courseService.publishCourseInfo(id);
return R.ok().data("publishCourse",coursePublishVo);
}
2、在EduCourseService接口中添加publishCourseInfo(id)方法
CoursePublishVo publishCourseInfo(String id);
3、在EduCourseServiceImpl实现类中调用方法得到发布课程信息
@Override
public CoursePublishVo publishCourseInfo(String id) {
//调用mapper
CoursePublishVo publishCourseInfo = baseMapper.getPublishCourseInfo(id);
return publishCourseInfo;
}
注意：baseMapper调用的是mapper中方法，多表查询需要我们自己写。
4、在EduCourseMapper接口中添加getPublishCourseInfo方法
public interface EduCourseMapper extends BaseMapper<EduCourse> {
public CoursePublishVo getPublishCourseInfo(String courseId);
}
5、在EduCourseMapper.xml中添加SQL语句
<!--sql语句：根据课程id查询课程确认信息-->
<select id="getPublishCourseInfo" resultType="com.atguigu.eduservice.entity.vo.CoursePublishVo">
SELECT ec.id,ec.title,ec.price,ec.lesson_num AS lessonNum,ec.cover,
et.name AS teacherName,
es1.title AS subjectLevelOne,
es2.title AS subjectLevelTwo
FROM edu_course ec LEFT OUTER JOIN edu_course_description ecd ON ec.id = ecd.id
LEFT OUTER JOIN edu_teacher et ON ec.teacher_id = et.id
LEFT OUTER JOIN edu_subject es1 ON ec.subject_parent_id = es1.id
LEFT OUTER JOIN edu_subject es2 ON ec.subject_id = es2.id
WHERE ec.id = #{courseId}
</select>
注意：参数使用#{}；maven默认加载机制只会对-java文件夹下的java类型文件进行加载，.xml文件我们需要自己配置：
解决方法：
（1）将xml文件复制到target目录的相同位置
（2）对配置文件进行配置，让maven默认加载xml文件
- 在pom.xml中进行配置：
<!-- 项目打包时会将java目录中的*.xml文件也进行打包 -->
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
<filtering>false</filtering>
</resource>
</resources>
</build>
- 在application.properties中进行配置：
#配置mapper xml文件的路径 mybatis-plus.mapper-locations=classpath:com/atguigu/eduservice/mapper/xml/*.xml
至此我们将需要的数据查询出来了，最终发布时只需要将课程表中status状态修改为Normal，即为发布（默认为Draft,未发布）
6、修改课程状态
在EduCourseController中添加接口：
//课程最终发布
//修改课程状态
@PostMapping("publishCourse/{id}")
public R publishCourse(@PathVariable String id){
EduCourse eduCourse = new EduCourse();
eduCourse.setId(id);
eduCourse.setStatus("Normal");//设置课程发布状态
courseService.updateById(eduCourse);
return R.ok();
}
二、课程最终发布（前端）
1、在api/edu/course.js中添加调用后端接口方法
//课程确认信息显示
getPublishCourseInfo(id){
return request({
url: `/eduservice/edu-course/getPublishCourseInfo/${id}`,
method: 'get'
})
},
//课程最终发布
publishCourse(id){
return request({
url: `/eduservice/edu-course/publishCourse/${id}`,
method: 'post'
})
}
2、编写course/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>
<div class="ccInfo">
<img :src="coursePublish.cover">
<div class="main">
<h2>{{ coursePublish.title }}</h2>
<p class="gray"><span>共{{ coursePublish.lessonNum }}课时</span></p>
<p><span>所属分类：{{ coursePublish.subjectLevelOne }} — {{ coursePublish.subjectLevelTwo }}</span></p>
<p>课程讲师：{{ coursePublish.teacherName }}</p>
<h3 class="red">￥{{ coursePublish.price }}</h3>
</div>
</div>
<div>
<el-button @click="previous">返回修改</el-button>
<el-button :disabled="saveBtnDisabled" type="primary" @click="publish">发布课程</el-button>
</div>
</div>
</template>
<script>
import course from '@/api/edu/course'
export default {
data() {
return {
saveBtnDisabled: false, // 保存按钮是否禁用
coursePublish:{},
courseId:''
}
},
created() {
//获取路由课程id值
if (this.$route.params && this.$route.params.id) {
this.courseId = this.$route.params.id
//调用接口方法根据课程id查询
this.getPublishCourseId()
}
},
methods: {
//根据课程id查询
getPublishCourseId(){
course.getPublishCourseInfo(this.courseId)
.then(response=>{
this.coursePublish = response.data.publishCourse
})
},
previous() {
this.$router.push({ path: '/course/chapter/1' })
},
publish() {
this.$confirm('是否发布课程?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//调用删除的方法
course.publishCourse(this.courseId)
.then(response=>{
//提示信息
this.$message({
type: 'success',
message: '课程发布成功!'
});
//跳转到课程列表
this.$router.push({ path: '/course/list' })
})
})
}
}
}
</script>
<style scoped>
.ccInfo {
background: #f5f5f5;
padding: 20px;
overflow: hidden;
border: 1px dashed #DDD;
margin-bottom: 40px;
position: relative;
}
.ccInfo img {
background: #d6d6d6;
width: 500px;
height: 278px;
display: block;
float: left;
border: none;
}
.ccInfo .main {
margin-left: 520px;
}
.ccInfo .main h2 {
font-size: 28px;
margin-bottom: 30px;
line-height: 1;
font-weight: normal;
}
.ccInfo .main p {
margin-bottom: 10px;
word-wrap: break-word;
line-height: 24px;
max-height: 48px;
overflow: hidden;
}
.ccInfo .main p {
margin-bottom: 10px;
word-wrap: break-word;
line-height: 24px;
max-height: 48px;
overflow: hidden;
}
.ccInfo .main h3 {
left: 540px;
bottom: 20px;
line-height: 1;
font-size: 28px;
color: #d32f24;
font-weight: normal;
position: absolute;
}
</style>
三、课程列表功能（分页-条件查询-删除）
1、删除课程信息
删除课程信息需要先删除小节，再章节，再描述，最后删除课程本身，接口实现类代码：
//删除课程
@Override
public void removeCourse(String courseId) {
//1 根据课程id删除小节
eduVideoService.removeVideoByCourseId(courseId);
//2 根据课程id删除章节
eduChapterService.removeChapterByCourseId(courseId);
//3 根据课程id删除描述
courseDescriptionService.removeById(courseId);
//4 根据课程id删除课程本身
int result = baseMapper.deleteById(courseId);
if(result==0){//失败返回
throw new GuliException(20001,"删除失败");
}
}
其他参考教师列表完成
