1、功能分析
2、多表连接查询的sql语句
#多表关联查询 #内连接 A inner join B on A.id = B.id #左外连接 A left join B on Aid=B.id #右外连接 A right join B on Aid=B.id
SELECT ec.title,et.name, es1.title AS oneSubject,es2.title AS twoSubject FROM edu_course ec LEFT JOIN edu_teacher et ON ec.teacher_id = et.id LEFT JOIN edu_subject es1 ON ec.subject_parent_id = es1.id LEFT JOIN edu_subject es2 ON ec.subject_id = es2.id WHERE ec.id = '1275627083367833602';
3、编写接口、根据课程id查询课程信息
(1)创建CoursePublishVo类封装数据
java
package com.atguigu.eduservice.entity.vo;
import io.swagger.annotations.ApiModel;
import lombok.Data;
import java.io.Serializable;
@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)在EduCourseController添加根据课程id查询课程发布信息的方法
java
@ApiOperation(value = "根据课程id查询课程发布信息")
@GetMapping("getCoursePublishVoById/{courseId}")
public R getCoursePublishVoById(@PathVariable String courseId){
CoursePublishVo coursePublishVo =
courseService.getCoursePublishVo(courseId);
return R.ok().data("coursePublishVo",coursePublishVo);
}
(3)在EduCourseService添加根据课程id查询课程发布信息的接口
java
CoursePublishVo getCoursePublishVo(String courseId);
(4)在EduCourseServiceImpl实现根据课程id查询课程发布信息的接口方法
java
//根据课程id查询课程发布信息
@Override
public CoursePublishVo getCoursePublishVo(String id) {
CoursePublishVo coursePublishVo = baseMapper.getCoursePublishVo(id);
return coursePublishVo;
}
(5)在EduCourseMapper添加getCoursePublishVo方法
java
public interface EduCourseMapper extends BaseMapper<EduCourse> {
CoursePublishVo getCoursePublishVo(String id);
}
(6)在EduCourseMapper.xml实现getCoursePublishVo方法
java
<?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.atguigu.eduservice.mapper.EduCourseMapper">
<select id="getCoursePublishVo" resultType="com.atguigu.eduservice.entity.vo.CoursePublishVo">
SELECT ec.id,ec.title,ec.cover,
ec.lesson_num AS lessonNum,ec.price,
et.name AS teacherName,
es1.title AS subjectLevelOne,es2.title AS subjectLevelTwo
FROM edu_course ec
LEFT JOIN edu_teacher et ON ec.teacher_id = et.id
LEFT JOIN edu_subject es1 ON ec.subject_parent_id = es1.id
LEFT JOIN edu_subject es2 ON ec.subject_id = es2.id
WHERE ec.id = #{id}
</select>
</mapper>
4、测试接口
(1)报以下错误:
java
org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.atguigu.eduservice.mapper.EduCourseMapper.getCoursePublishVo
(1)问题定位: maven加载机制:在默认情况下,只会把src-main-java文件夹中的java类型文件加载,其他类型不管了,xml文件没有加载,所以报错 输出文件里没有mapper信息:
(2)解决方案:通过配置,让maven加载配置文件
1)在service模块中修改pom.xml
进行配置
java
<!-- 项目打包时会将java目录中的*.xml文件也进行打包 -->
<build>
<resources>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.xml</include>
</includes>
<filtering>false</filtering>
</resource>
</resources>
</build>
2)在当前模块中进行配置
java
#配置mapper xml文件的路径
mybatis-plus.mapper-locations=classpath:com/atguigu/eduservice/mapper/xml/*.xml
5、前端整合
(1)在api/course.js
中添加接口方法
java
//根据课程id查询课程发布信息
getCoursePublishVoById(courseId){
return request({
url: `/eduservice/educourse/getCoursePublishVoById/${courseId}`,
method: 'get'
})
}
(2)页面元素实现
java
<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>
(3)在course/publish.vue
中实现js方法
在课程大纲页面,修改客户发布页面入口
java
import publish from "@/api/publish";
export default {
data() {
return {
courseId: "",
coursePublish:{},//课程发布信息
saveBtnDisabled: false // 保存按钮是否禁用
}
},
created() {
console.log('publish created')
if (this.$route.params && this.$route.params.id) {
this.courseId = this.$route.params.id;
console.log("this.courseId=" + this.courseId);
//根据课程id查询课程发布信息
publish.getCoursePublishVoById(this.courseId)
.then(response=>{
this.coursePublish=response.data.coursePublishVo
})
}
},
(4)在course/publish.vue页面底端添加页面样式
java
<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>
(5)发布页面展示效果