一、课程最终发布信息展示 – 后端
1、实体类—用于封装页面显示的数据
@ApiModel(value = "课程最终发布")
@Data
public class CoursePublishVo implements Serializable {
private static final long serialVersionUID = 1L;
//课程标题
private String title;
//课程封面
private String cover;
//课时数
private Integer lessonNum;
//一级分类
private String subjectLevelOne;
//二级分类
private String subjectLevelTwo;
//讲师名称
private String teacherName;
//课程价格
private String price;//只用于显示
}
2、编写Controller类
//课程发布
//根据课程id查询课程的发布信息
@ApiOperation("查询课程发布信息")
@GetMapping("getPublishCourseInfo/{id}")
public R getPublishCourseInfo(@PathVariable String id){
CoursePublishVo courseInfo = courseService.getPublishCourseInfo(id);
return R.ok().data("courseInfo",courseInfo);
}
3、编写Service类
//根据id查询课程发布信息
@Override
public CoursePublishVo getPublishCourseInfo(String id) {
CoursePublishVo coursePublishVo = this.baseMapper.getPublishCourseInfo(id);
return coursePublishVo;
}
由于我们最终发布页面显示的数据是来源于四张表(课程表、课程描述表、讲师表、分类表),所以我们需要手动写SQL语句实现。
4、编写mapper接口
public interface EduCourseMapper extends BaseMapper<EduCourse> {
public CoursePublishVo getPublishCourseInfo(String id);
}
5、编写mapper类xml配置文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.rg.eduservice.mapper.EduCourseMapper">
<select id="getPublishCourseInfo" resultType="com.rg.eduservice.entity.vo.CoursePublishVo" parameterType="string">
SELECT ec.id,ec.`title`,ec.`price`,ec.`lesson_num` AS lessonNum,ec.`cover`,
et.`name` teacherName,
es1.`title` AS subjectLevelOne,
es2.`title` AS subjectLevelTwo
FROM edu_course ec 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`
LEFT OUTER JOIN edu_teacher et ON ec.`teacher_id` = et.`id`
WHERE ec.id=#{id}
</select>
</mapper>
6、项目运行出现错误并解决
项目创建mapper接口,编写xml文件sql语句,执行出现错误

这个错误是由maven默认加载机制造成问题。maven加载时候,把java文件夹里面 .java 类型文件进行编译,如果其他类型文件,不会加载。
解决方式:
1、复制xml到target目录中
2、把xml文件放在resources目录中
3、推荐使用:通过配置文件实现
(1)pom.xml
(2)项目application.properties
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
<filtering>false</filtering>
</resource>
</resources>
</build>
在service模块的application.properties中
# 配置mapper xml文件的路径
mybatis-plus.mapper-locations=classpath:com/kuang/eduservice/mapper/xml/*.xml
重新启动服务即可运行成功!
二、课程最终发布信息展示 – 前端
1、定义api接口
//根据课程id查询课程发布的基本信息
getPublishCourseInfo(id) {
return request({
url: `/eduservice/course/getPublishCourseInfo/${id}`,
method: 'get'
})
}
2、前端页面和样式
<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>
<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>
3、引入接口
import course from '@/api/edu/course'
4、编写前端js
data() {
return {
//....
saveBtnDisabled:false,
courseId: '',
coursePublish: {}
}
},
created() {
//获取路由中id值
if(this.$route.params && this.$route.params.id) {
this.courseId = this.$route.params.id
//调用接口方法根据课程id查询
this.getPublishCourseInfo()
}
},
methods: {
//根据课程id查询课程信息
getPublishCourseInfo(){
course.getPublishCourseInfo(this.courseId).then(response=>{
this.coursePublish = response.data.courseInfo
})
}
//.....
}
5、页面效果图

三、课程最终发布 – 前后端

1、编写Controller类
//课程发布
@PutMapping("publishCourse/{id}")
public R publishCourse(@PathVariable String id){
EduCourse course = new EduCourse();
course.setId(id);
course.setStatus("Normal");
boolean update = courseService.updateById(course);
if(update){
return R.ok();
}else{
return R.error();
}
}
2、定义api接口
//发布课程信息
publishCourse(id) {
return request({
url: `/eduservice/course/publishCourse/${id}`,
method: 'put'
})
}
3、编写前端js
publish(){
course.publishCourse(this.courseId).then(response=>{
this.$confirm('确认发布此课程吗,是否继续?','提示',{
confirmButtonText:'确定',
cancelButtonText:'取消',
type:'warning'
}).then(()=>{//点击确定
this.$message({
type:'success',
message:'课程发布成功!'
})
//跳转到课程列表页面
this.$router.push({path:'/course/list'})
}).catch(()=>{
this.$message({
type: 'info',
message: '已取消发布!'
})
})
}).catch(()=>{
this.$message({
type: 'error',
message: '课程发布失败!'
})
})
}
四、课程列表 – 后端
1、编写查询实体类
@Data
public class CourseQuery implements Serializable {
private static final long serialVersionUID = 1L;
//一级分类id
private String subjectParentId;
//二级分类id
private String subjectId;
//课程名称
private String title;
//讲师id
private String teacherId;
}
2、Controller类
//分页查询课程
@PostMapping("pageQuery/{current}/{limit}")
public R pageQuery(@PathVariable Integer current,
@PathVariable Integer limit,
@RequestBody CourseQuery courseQuery)
{
Page<EduCourse> page = courseService.pageQuery(current,limit,courseQuery);
return R.ok().data("total",page.getTotal()).data("list",page.getRecords());
}
//删除课程
@DeleteMapping("removeCourse/{id}")
public R removeCourse(@PathVariable String id){
courseService.removeCourse(id);
return R.ok();
}