#多表关联查询
#内链接 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’;vue
(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查询课程发布信息的方法web
@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查询课程发布信息的接口sql
CoursePublishVo getCoursePublishVo(String courseId);
(4)在EduCourseServiceImpl实现根据课程id查询课程发布信息的接口方法apache
//根据课程id查询课程发布信息 @Override public CoursePublishVo getCoursePublishVo(String id) { CoursePublishVo coursePublishVo = baseMapper.getCoursePublishVo(id); return coursePublishVo; }
(5)在EduCourseMapper添加getCoursePublishVo方法api
public interface EduCourseMapper extends BaseMapper<EduCourse> { CoursePublishVo getCoursePublishVo(String id); }
(6)在EduCourseMapper.xml实现getCoursePublishVo方法mybatis
<?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>
(1)报如下错误:app
org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.atguigu.eduservice.mapper.EduCourseMapper.getCoursePublishVo
(1)问题定位:
maven加载机制:在默认状况下,只会把src-main-java文件夹中的java类型文件加载,其余类型无论了,xml文件没有加载,因此报错
输出文件里没有mapper信息:
less
(2)解决方案:经过配置,让maven加载配置文件
1)在service模块中修改pom.xml
进行配置
<!-- 项目打包时会将java目录中的*.xml文件也进行打包 --> <build> <resources> <resource> <directory>src/main/java</directory> <includes> <include>**/*.xml</include> </includes> <filtering>false</filtering> </resource> </resources> </build>
2)在当前模块中进行配置
#配置mapper xml文件的路径 mybatis-plus.mapper-locations=classpath:com/atguigu/eduservice/mapper/xml/*.xml
(1)在api/course.js
中添加接口方法
//根据课程id查询课程发布信息 getCoursePublishVoById(courseId){ return request({ url: `/eduservice/educourse/getCoursePublishVoById/${courseId}`, 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>
(3)在course/publish.vue
中实现js方法
在课程大纲页面,修改客户发布页面入口
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页面底端添加页面样式
<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)发布页面展现效果