开发者社区> 爱编程的大李子> 正文

谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传(一)

简介: 谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传
+关注继续查看

一、课程最终发布信息展示 – 后端

1、实体类—用于封装页面显示的数据

@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、编写Controller类

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

3、编写Service类

//根据id查询课程发布信息
@Override
public CoursePublishVo getPublishCourseInfo(String id) {
    CoursePublishVo coursePublishVo = this.baseMapper.getPublishCourseInfo(id);
    return coursePublishVo;
}

由于我们最终发布页面显示的数据是来源于四张表(课程表、课程描述表、讲师表、分类表),所以我们需要手动写SQL语句实现。

4、编写mapper接口

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

5、编写mapper类xml配置文件

<?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.rg.eduservice.mapper.EduCourseMapper">

    <select id="getPublishCourseInfo" resultType="com.rg.eduservice.entity.vo.CoursePublishVo" parameterType="string">
        SELECT ec.id,ec.`title`,ec.`price`,ec.`lesson_num` AS lessonNum,ec.`cover`,
        et.`name` teacherName,
        es1.`title` AS subjectLevelOne,
        es2.`title` AS subjectLevelTwo
        FROM edu_course ec 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`
        LEFT OUTER JOIN edu_teacher et ON ec.`teacher_id` = et.`id`
        WHERE ec.id=#{id}
    </select>
</mapper>


6、项目运行出现错误并解决


项目创建mapper接口,编写xml文件sql语句,执行出现错误


d89fd6d9c73557bfc3203dc92a5bc8e8.png


这个错误是由maven默认加载机制造成问题。maven加载时候,把java文件夹里面 .java 类型文件进行编译,如果其他类型文件,不会加载。


解决方式:

1、复制xml到target目录中

2、把xml文件放在resources目录中

3、推荐使用:通过配置文件实现

(1)pom.xml

(2)项目application.properties


<build>
    <resources>
        <resource>
            <directory>src/main/java</directory>
            <includes>
                <include>**/*.xml</include>
            </includes>
            <filtering>false</filtering>
        </resource>
    </resources>
</build>

在service模块的application.properties中

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

重新启动服务即可运行成功!

二、课程最终发布信息展示 – 前端

1、定义api接口

//根据课程id查询课程发布的基本信息
getPublishCourseInfo(id) {
    return request({
        url: `/eduservice/course/getPublishCourseInfo/${id}`,
        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>

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

3、引入接口

import course from '@/api/edu/course'

4、编写前端js

data() {
    return {
      //....
      saveBtnDisabled:false,
      courseId: '',
      coursePublish: {}
    }
  },
  created() {
    //获取路由中id值
    if(this.$route.params && this.$route.params.id) {
        this.courseId = this.$route.params.id
        //调用接口方法根据课程id查询
        this.getPublishCourseInfo()
    }
  },
  methods: {
    //根据课程id查询课程信息  
    getPublishCourseInfo(){
          course.getPublishCourseInfo(this.courseId).then(response=>{
            this.coursePublish = response.data.courseInfo
          })
        }
    //.....
  }

5、页面效果图

fb1c76520d9935a6da9fea5ab3e82423.png

三、课程最终发布 – 前后端

23ac9a84b069498844ac7318292d05a9.png

1、编写Controller类

//课程发布
@PutMapping("publishCourse/{id}")
public R publishCourse(@PathVariable String id){
    EduCourse course = new EduCourse();
    course.setId(id);
    course.setStatus("Normal");
    boolean update = courseService.updateById(course);
    if(update){
        return R.ok();
    }else{
        return R.error();
    }
}

2、定义api接口

//发布课程信息
publishCourse(id) {
    return request({
        url: `/eduservice/course/publishCourse/${id}`,
        method: 'put'
    })
}

3、编写前端js

publish(){
    course.publishCourse(this.courseId).then(response=>{
        this.$confirm('确认发布此课程吗,是否继续?','提示',{
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }).then(()=>{//点击确定
            this.$message({
                type:'success',
                message:'课程发布成功!' 
            }) 
            //跳转到课程列表页面
            this.$router.push({path:'/course/list'})
        }).catch(()=>{
            this.$message({
                type: 'info',
                message: '已取消发布!'
            })
        })
    }).catch(()=>{
        this.$message({
            type: 'error',
            message: '课程发布失败!'
        })
    })        
}

四、课程列表 – 后端

1、编写查询实体类

@Data
public class CourseQuery implements Serializable {

    private static final long serialVersionUID = 1L;

    //一级分类id
    private String subjectParentId;

    //二级分类id
    private String subjectId;

    //课程名称
    private String title;

    //讲师id
    private String teacherId;


}


2、Controller类

//分页查询课程
@PostMapping("pageQuery/{current}/{limit}")
public R pageQuery(@PathVariable Integer current,
                   @PathVariable Integer limit,
                   @RequestBody CourseQuery courseQuery)
{
    Page<EduCourse> page =  courseService.pageQuery(current,limit,courseQuery);
    return R.ok().data("total",page.getTotal()).data("list",page.getRecords());
}

//删除课程
@DeleteMapping("removeCourse/{id}")
public R removeCourse(@PathVariable String id){
    courseService.removeCourse(id);
    return R.ok();
}


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云云原生每月动态 | 聚焦实战,面向开发者的系列课程全新上线
《阿里云云原生每月动态》,从趋势热点、产品新功能、服务客户、开源与开发者动态等方面,为企业提供数字化的路径与指南。
187 0
谷粒学院(十七)讲师列表页 | 讲师详情 | 课程列表页 | 课程详情 | 整合阿里云视频点播(二)
谷粒学院(十七)讲师列表页 | 讲师详情 | 课程列表页 | 课程详情 | 整合阿里云视频点播(二)
219 0
谷粒学院(十七)讲师列表页 | 讲师详情 | 课程列表页 | 课程详情 | 整合阿里云视频点播(一)
谷粒学院(十七)讲师列表页 | 讲师详情 | 课程列表页 | 课程详情 | 整合阿里云视频点播(一)
31 0
谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传(三)
谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传(三)
151 0
谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传(二)
谷粒学院(十一)课程最终发布 | 课程列表 | 阿里云视频点播服务 | 小节实现视频上传
114 0
《阿里特邀专家徐雷Java Spring Boot开发实战系列课程(第18讲):制作Java Docker镜像与推送到DockerHub和阿里云Docker仓库》电子版地址
阿里特邀专家徐雷Java Spring Boot开发实战系列课程(第18讲):制作Java Docker镜像与推送到DockerHub和阿里云Docker仓库
90 0
阿里云开发者社区APP服务上线!实现课程、训练营碎片化学习~
阿里云开发者学堂课程&训练营自上线起用户好评不断,本月阿里云开发者社区的APP服务终于上线!实现移动端学习,在地铁上也可以刷刷刷啦
119 0
【在线教育】课程封面上传图片到阿里云OSS(三)
【在线教育】课程封面上传图片到阿里云OSS
65 0
【在线教育】课程封面上传图片到阿里云OSS(二)
【在线教育】课程封面上传图片到阿里云OSS
59 0
【在线教育】课程封面上传图片到阿里云OSS(一)
【在线教育】课程封面上传图片到阿里云OSS
51 0
+关注
爱编程的大李子
一个即将踏入社会的程序猿~ 不甘于当下,不断改变中
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Elastic与阿里云合作宣传信息白皮书
立即下载
阿里云&信通院《Serverless数据库技术研究报告》
立即下载
降本增效,阿里云数据治理Workshop上海站
立即下载