发布课程前后端实现

心已赠人 2021-07-25 01:20 405阅读 0赞

# 一 需求 #

*  根据课程id获取课程发布基本信息
 *  根据课程id发布课程

# 二 后端实现 #

## 1 定义vo ##

@Data
    public class CoursePublishVo implements Serializable{
        private static final long serialVersionUID = 1L;
        private String id; // 课程id
        private String title; // 标题
        private String cover; // 封面
        private Integer lessonNum; // 课程数
        private String subjectParentTitle; // 一级标题
        private String subjectTitle; // 二级标题
        private String teacherName; // 讲师
        private String price;// 只用于显示
    }

## 2 web层 ##

/**
    * 功能描述：根据ID获取课程发布信息
    *
    * @param id 课程id
    * @return R 返回给前端数据
    * @author cakin
    * @date 2020/12/6
    */
    @ApiOperation("根据ID获取课程发布信息")
    @GetMapping("course-publish/{id}")
    public R getCoursePublishVoById(@ApiParam(value = "课程ID", required = true) @PathVariable String id) {
        CoursePublishVo coursePublishVo = courseService.getCoursePublishVoById(id);
        if (coursePublishVo != null) {
            return R.ok().data("item", coursePublishVo);
        } else {
            return R.error().message("数据不存在");
        }
    }
    
    /**
    * 功能描述：根据id发布课程
    *
    * @param id 课程id
    * @return R 返回前端数据
    * @author cakin
    * @date 2020/12/6
    */
    @ApiOperation("根据id发布课程")
    @PutMapping("publish-course/{id}")
    public R publishCourseById(@ApiParam(value = "课程ID", required = true) @PathVariable String id) {
        boolean result = courseService.publishCourseById(id);
        if (result) {
            return R.ok().message("发布成功");
        } else {
            return R.error().message("数据不存在");
        }
    }

## 3 service层 ##

接口

/**
    * 功能描述：根据ID获取课程发布信息
    *
    * @param id 课程id
    * @return CoursePublishVo 课程信息
    * @author cakin
    * @date 2020/12/6
    */
    CoursePublishVo getCoursePublishVoById(String id);
    
    /**
    * 功能描述：根据id发布课程
    *
    * @param id 课程id
    * @return boolean 是否发布成功
    * @author cakin
    * @date 2020/12/6
    */
    boolean publishCourseById(String id);

实现

/**
    * 功能描述：根据ID获取课程发布信息
    *
    * @param id 课程id
    * @return CoursePublishVo 课程信息
    * @author cakin
    * @date 2020/12/6
    */
    @Override
    public CoursePublishVo getCoursePublishVoById(String id) {
        return baseMapper.selectCoursePublishVoById(id);
    }
    /**
    * 功能描述：根据id发布课程
    *
    * @param id 课程id
    * @return boolean 是否发布成功
    * @author cakin
    * @date 2020/12/6
    */
    @Override
    public boolean publishCourseById(String id) {
        Course course = new Course();
        course.setId(id);
        course.setStatus(Course.COURSE_NORMAL);
        return this.updateById(course);
    }

## 4 mapper层 ##

接口

/**
    * 功能描述：根据课程信息获得发布课程
    *
    * @author cakin
    * @date 2020/12/6
    * @param id 课程id
    * @return CoursePublishVo 课程发布信息
    */
    CoursePublishVo selectCoursePublishVoById(String id);

实现

<select id="selectCoursePublishVoById" resultType="com.atguigu.guli.service.edu.entity.vo.CoursePublishVo">
        SELECT
        c.id,
        c.title,
        c.cover,
        c.lesson_num AS lessonNum,
        s1.title AS subjectParentTitle,
        s2.title AS subjectTitle,
        t.name AS teacherName,
        CONVERT(c.price, DECIMAL(8,2)) AS price
        FROM
        <include refid="tables"/>
        WHERE c.id = #{id}
    </select>

# 三 前端代码 #

## 1 定义api ##

// 根据课程id获得课程发布信息
      getCoursePublishById(id) {
        return request({
          url: `/admin/edu/course/course-publish/${id}`,
          method: 'get'
        })
      },
      // 发布课程
      publishCourseById(id) {
        return request({
          url: `/admin/edu/course/publish-course/${id}`,
          method: 'put'
        })
      }

## 2 定义数据模型 ##

data() {
        return {
          publishBtnDisabled: false, // 按钮是否禁用
          coursePublish: {} // 课程发布信息
        }
      },

## 3 组件方法定义 ##

// 获取课程发布信息
      created() {
        if (this.$parent.courseId) {
          this.fetchCoursePublishById(this.$parent.courseId)
        }
      },
    
    
      methods: {
        // 获取课程发布信息
        fetchCoursePublishById(id) {
          courseApi.getCoursePublishById(id).then(response => {
            this.coursePublish = response.data.item
          })
        },
    
    
        // 上一步，跳到第2步
        prev() {
          this.$parent.active = 1
        },
    
    
        // 下一步，还在第3步
        publish() {
          this.publishBtnDisabled = true
          courseApi.publishCourseById(this.$parent.courseId).then(response => {
            this.$parent.active = 3
            this.$message.success(response.message)
          })
        }
      }
    }

## 4 组件模板 ##

<template>
      <div class="app-container">
        
        <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.subjectParentTitle }} — {
       { coursePublish.subjectTitle }}</span></p>
            <p>课程讲师：{
       { coursePublish.teacherName }}</p>
            <h3 class="red">￥{
       { coursePublish.price }}</h3>
          </div>
        </div>
        
        <div style="text-align:center">
          <el-button type="primary" @click="prev()">上一步</el-button>
          <el-button :disabled="publishBtnDisabled" type="primary" @click="publish()">发布课程</el-button>
        </div>
      </div>
    </template>

## 5 css样式 ##

# 四 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/7802f5bd40cc41779aaa9855f9b5bdf4.png