18.课程最终发布和课程列表功能
作者:互联网
一、课程最终发布(后端)
最终的课程发布信息包含了:课程表中的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,"删除失败"); } }
其他参考教师列表完成
标签:courseId,18,ec,列表,course,课程,edu,id 来源: https://www.cnblogs.com/ldh-up/p/14600713.html