Mooc项目开发笔记（十六）：课程最终发布前后端实现

一、课程最终发布后端实现

1、定义vo

@ApiModel(value = "课程发布信息")
@Data
public class CoursePublishVo  implements Serializable {

    private static final long serialVersionUID = 1L;

    private String id;
    private String title;
    private String cover;
    private Integer lessonNum;
    private String description;
    private String topSubject;
    private String subSubject;
    private String teacherName;
    private String price;//只用于显示

}

2、数据访问层

接口：EduCourseMapper.java

public interface EduCourseMapper extends BaseMapper<EduCourse> {
    CoursePublishVo getPublishCourseInfo(String id);
}

实现：EduCourseMapper.xml

<mapper namespace="cn.hanzhuang42.eduservice.mapper.EduCourseMapper">
        
    <select id="getPublishCourseInfo" parameterType="String" resultType="cn.hanzhuang42.eduservice.entity.vo.CoursePublishVo">
            select c.id, c.title, c.price, c.lesson_num  as lessonNum, c.cover,
            cd.description, t.`name` as teacherName, s1.title as topSubject, s2.title as subSubject
            from edu_course as c
            left join edu_course_description as cd on c.id = cd.id
            left join edu_teacher as t on c.teacher_id = t.id
            left join edu_subject as s1 on c.subject_parent_id = s1.id
            left join edu_subject as s2 on c.subject_id = s2.id
            where c.id = #{id}
    select>
mapper>

3、业务层

接口：EduCourseService.java

CoursePublishVo getPublishCourseInfo(String id);

实现：EduCourseServiceImpl.java

@Override
public CoursePublishVo getPublishCourseInfo(String id) {
    return baseMapper.getCoursePublishVoById(id);
}

4、web层

EduCourseController.java

    @ApiOperation(value = "根据id查询课程发布信息")
    @GetMapping("getPublishCourseInfo/{id}")
    public R getPublishCourseInfo(@PathVariable String id){
        CoursePublishVo course = courseService.getPublishCourseInfo(id);
        return R.ok().data("course", course);
    }

    //更改字段状态
    @ApiOperation(value = "课程最终发布")
    @GetMapping("publish/{id}")
    public R publishCourse(@PathVariable String id){
        EduCourse course = new EduCourse();
        course.setId(id);
        //表示课程以发布，Draft表示课程为发布
        course.setStatus("Normal");
        courseService.updateById(course);
        return R.ok();
    }

5、报告异常

Invalid bound statement (not found): cn.hanzhuang42.eduservice.mapper.CourseMapper.getPublishCourseInfo

问题分析：

dao层编译后只有class文件，没有mapper.xml，因为maven工程在默认情况下src/main/java目录下的所有资源文件是不发布到target目录下的

解决方案：

1、在guli_edu的pom中配置如下节点

<build>
    <resources>
        <resource>
            <directory>src/main/javadirectory>
            <includes>
                <include>**/*.xmlinclude>
            includes>
            <filtering>falsefiltering>
        resource>
    resources>
build>

重新打包项目会发现target目录下出现了xml文件夹

2、在Spring Boot配置文件中添加配置

#配置mapper xml文件的路径
mybatis-plus.mapper-locations=classpath:cn/hanzhuang42/eduservice/mapper/xml/*.xml

6、测试

二、课程最终发布前端实现

1、定义api

分析这个页面一共有两个远程方法：一个是根基课程id获取课程基本预览信息，第二个是发布课程

在src/api/edu/course.js中添加如下内容：

   /**
     * 获取课程发布信息
     */
    getPublishCourseInfo(id){
      return request({
          url: `/eduservice/course/getPublishCourseInfo/${id}`,
          method: 'get',
        })
  },
      /**
     * 发布课程
     * @param } id 
     */
    publishCourse(id){
        return request({
          url: `/eduservice/course/publish/${id}`,
          method: 'get',
        })
    }

2、定义data

下面的内容均在publish.vue中进行修改

data() {
    return {
        saveBtnDisabled: false, // 保存按钮是否禁用
        courseId: '', // 所属课程
        coursePublish: {}
    }
},

3、组件方法定义

import

import courseApi from '@/api/edu/course.js'

created

  created() {
    if (this.$route.params && this.$route.params.id){
      //获取id
      this.courseId = this.$route.params.id
      //根据id查询课程发布信息
      this.getPublishCourseInfo()
    }
  },

获取数据的方法

  methods: {

    getPublishCourseInfo(){
      courseApi.getPublishCourseInfo(this.courseId)
          .then(response => {
              this.coursePublish = response.data.course
          })
    },
        
    //发布课程
    publish() {
      courseApi.publishCourse(this.courseId)
          .then(response => {
                this.$message({
                    type: 'success',
                    message: '课程发布成功'
                })
                this.$router.push({ path: '/course/list' })
          })
    },
    
    ...//其他方法
  }

5、组件模板

<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>

6、css样式

7、效果

点击发布按钮，提示发布成功，并跳转到列表页面

数据库中的字段也发生更改