最终需要查询到课程名称、封面、分类、讲师、简介、价格等信息，需要我们去查询多张表
有三种多表连接
1.内连接
2.左外连接
3.右外连接
我们使用左外连接，因为可能有数据为空的情况
最终一个sql语句：
select ec.id, ec.title, ec.price, ec.lesson_num, ecd.description, et.name, es1.title as oneSubject, es2.title as twoSubject 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=1256870825265496066
sql语句写完了，我们来整理后端
先创建一个实体类
@Data public class CoursePublishVo { private String id; private String title; private String cover; private Integer lessonNum; private String subjectLevelOne; private String subjectLevelTwo; private String teacherName; private String price;//只用于显示 }
根据我们创建的实体类书写mapper
<?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.dm.eduservice.mapper.EduCourseMapper"> <!--sql语句根据k课程id查询对应信息--> <select id="getPublishCourseInfo" resultType="com.dm.eduservice.entity.vo.CoursePublishVo"> select ec.id, ec.title, ec.cover, ec.lesson_num as lessonNum, es1.title as subjectLevelOne, es2.title as subjectLevelTwo, et.name as teacherName, ec.price 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> </mapper>
书写controller方法
//根据课程id查询课程确认信息 @GetMapping("getPublishCourseInfo/{id}") public R getPublishCourseInfo(@PathVariable String id) { CoursePublishVo coursePublishVo = courseService.publishCourseInfo(id); return R.OK().data("publishCourse",coursePublishVo); }
serviceimpl
@Override public CoursePublishVo publishCourseInfo(String id) { CoursePublishVo publishCourseInfo = baseMapper.getPublishCourseInfo(id); return publishCourseInfo; }
这里出现了一个问题
测试：报告异常
AbstractHandlerExceptionResolver.java:194 |org.springframework.web.servlet.mvc.method.annotation.ExceptionHandlerExceptionResolver |Resolved exception caused by handler execution: org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.guli.edu.mapper.CourseMapper.getCoursePublishVoById
原因分析
dao层编译后只有class文件，没有mapper.xml，因为maven工程在默认情况下src/main/java目录下的所有资源文件是不发布到target目录下的，
解决方法：
1.把xml复制到target文件夹中
2.把xml文件放在resourse文件jia下
3.通过配置（推荐）
（1）在pom.xml中设置
（2）application.properties配置
1.
2.
再编译可以看到已经有了xml的文件
测试成功
前端
先在course.js中添加接口
//课程提交 getPublishCourseInfo(id){ return request({ url: '/eduservice/edu-course/getPublishCourseInfo/'+id, method: 'get', }) }
然后书写页面
<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/course/course' export default { data() { return { saveBtnDisabled: false, // 保存按钮是否禁用 courseId:'', coursePublish:{} } }, created() { console.log('publish created') if(this.$route.params&&this.$route.params.id){ this.courseId=this.$route.params.id this.getPublishCourseInfo() } }, methods: { getPublishCourseInfo(){ course.getPublishCourseInfo(this.courseId) .then(response=>{ this.coursePublish=response.data.publishCourse }) }, previous() { console.log('previous') this.$router.push({ path: '/course/chapter/'+this.courseId }) }, publish() { console.log('publish') this.$router.push({ path: '/course/list'+this.courseId }) } } } </script> <style scoped> .ccInfo { background: #f5f5f5; padding: 20px; overflow: hidden; border: 1px dashed #DDD; margin-bottom: 40px; position: relative; } .ccInfo img { background: #d6d6d6; 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>
因为我们数据库中默认都是一个未发布状态
所以我们要修改这个状态
后端：
//课程最终提交 @PostMapping("publicCourse/{id}") public R publicCourse(@PathVariable String id) { EduCourse eduCourse=new EduCourse(); eduCourse.setId(id); eduCourse.setStatus("Normal"); courseService.updateById(eduCourse); return R.OK(); }
前端：
//发布课程 publicCourse(id){ return request({ url: '/eduservice/edu-course/publicCourse/'+id, method: 'post', }) }
<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/course/course' export default { data() { return { saveBtnDisabled: false, // 保存按钮是否禁用 courseId:'', coursePublish:{} } }, created() { console.log('publish created') if(this.$route.params&&this.$route.params.id){ this.courseId=this.$route.params.id this.getPublishCourseInfo() } }, methods: { getPublishCourseInfo(){ course.getPublishCourseInfo(this.courseId) .then(response=>{ this.coursePublish=response.data.publishCourse }) }, previous() { console.log('previous') this.$router.push({ path: '/course/chapter/'+this.courseId }) }, publish() { course.publicCourse(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; 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>
效果
