课程发布-课程信息确认

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)发布页面展示效果

相关推荐
坐吃山猪4 小时前
SpringBoot01-配置文件
java·开发语言
我叫汪枫4 小时前
《Java餐厅的待客之道:BIO, NIO, AIO三种服务模式的进化》
java·开发语言·nio
yaoxtao5 小时前
java.nio.file.InvalidPathException异常
java·linux·ubuntu
Swift社区6 小时前
从 JDK 1.8 切换到 JDK 21 时遇到 NoProviderFoundException 该如何解决?
java·开发语言
DKPT7 小时前
JVM中如何调优新生代和老生代?
java·jvm·笔记·学习·spring
phltxy7 小时前
JVM——Java虚拟机学习
java·jvm·学习
拉不动的猪7 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
seabirdssss8 小时前
使用Spring Boot DevTools快速重启功能
java·spring boot·后端
喂完待续9 小时前
【序列晋升】29 Spring Cloud Task 微服务架构下的轻量级任务调度框架
java·spring·spring cloud·云原生·架构·big data·序列晋升