网站端课程详情页

朴灿烈づ我的快乐病毒、 2021-07-25 00:55 468阅读 0赞

# 一 后端 #

## 1 vo对象的定义 ##

@Data
    public class WebCourseVo implements Serializable {
    
    
        private static final long serialVersionUID = 1L;
        /**
         * 课程id
         */
        private String id;
        /**
         * 课程标题
         */
        private String title;
        /**
         * 课程价格
         */
        private BigDecimal price;
        /**
         * 课时数
         */
        private Integer lessonNum;
        /**
         * 封面
         */
        private String cover;
        /**
         * 购买量
         */
        private Long buyCount;
        /**
         * 浏览量
         */
        private Long viewCount;
        /**
         * 描述
         */
        private String description;
        /**
         * 讲师id
         */
        private String teacherId;
        /**
         * 讲师名
         */
        private String teacherName;
        /**
         * 讲师介绍
         */
        private String intro;
        /**
         * 讲师图像
         */
        private String avatar;
        /**
         * 一级分类id
         */
        private String subjectLevelOneId;
        /**
         * 一级分类名称
         */
        private String subjectLevelOne;
        /**
         * 二级分类id
         */
        private String subjectLevelTwoId;
        /**
         * 二级分类名称
         */
        private String subjectLevelTwo;
    }

## 2 查询课程和讲师信息 ##

CourseMapper.java

/**
    * 获取课程详情
    *
    * @param courseId 课程id
    * @return WebCourseVo 课程详情
    */
    WebCourseVo selectWebCourseVoById(String courseId);

CourseMapper.xml

<select id="selectWebCourseVoById" resultType="com.atguigu.guli.service.edu.entity.vo.WebCourseVo">
       SELECT
        c.id,
        c.title,
        c.cover,
        CONVERT(c.price, DECIMAL(8,2)) AS price,
        c.lesson_num AS lessonNum,
        c.buy_count AS buyCount,
        c.view_count AS viewCount,
        cd.description,
        t.id AS teacherId,
        t.name AS teacherName,
        t.intro,
        t.avatar,
        s1.id AS subjectLevelOneId,
        s1.title AS subjectLevelOne,
        s2.id AS subjectLevelTwoId,
        s2.title AS subjectLevelTwo
        FROM
        edu_course c
        LEFT JOIN edu_course_description cd ON c.id = cd.id
        LEFT JOIN edu_teacher t ON c.teacher_id = t.id
        LEFT JOIN edu_subject s1 ON c.subject_parent_id = s1.id
        LEFT JOIN edu_subject s2 ON c.subject_id = s2.id
        WHERE
        c.id = #{id}
    </select>

## 3 获取数据并更新浏览量 ##

接口

/**
    * 功能描述：根据讲师id获取讲师详情页数据
    *
    * @author cakin
    * @date 2020/12/18
    * @param id
    * @return
    * @description:
    */
    Map<String, Object> selectTeacherInfoById(String id);

实现

/**
    * 功能描述：根据讲师id获取讲师详情页数据
    *
    * @param id 讲师id
    * @return Map<String, Object> 封装讲师信息和课程信息
    * @author cakin
    * @date 2020/12/18
    */
    @Override
    public Map<String, Object> selectTeacherInfoById(String id) {
        Teacher teacher = baseMapper.selectById(id);
        QueryWrapper<Course> courseQueryWrapper = new QueryWrapper<>();
        courseQueryWrapper.eq("teacher_id", id);
        List<Course> courseList = courseMapper.selectList(courseQueryWrapper);
        Map<String, Object> map = new HashMap<>();
        // 讲师信息
        map.put("teacher", teacher);
        // 课程列表
        map.put("courseList", courseList);
        return map;
    }

## 4 控制器 ##

/**
    * 功能描述：根据id查询课程
    *
    * @param courseId 课程id
    * @return R 返回给前端的数据
    * @author cakin
    * @date 2020/12/19
    */
    @ApiOperation("根据id查询课程")
    @GetMapping("get/{courseId}")
    public R getById(@ApiParam(value = "课程id", required = true) @PathVariable String courseId) {
        // 查询课程信息和讲师信息
        WebCourseVo webCourseVo = courseService.selectWebCourseVoById(courseId);
        // 查询当前课程的嵌套章节和课时信息
        List<ChapterVo> chapterVoList = chapterService.nestedList(courseId);
        return R.ok().data("course", webCourseVo).data("chapterVoList", chapterVoList);
    }

# 二 前端 #

## 1 api ##

// 根据课程id获得课程详情
      getById(id) {
        return request({
          url: `/api/edu/course/get/${id}`,
          method: 'get'
        })
      },

## 2 脚本部分 ##

## 3 模板部分 ##

<template>
      <div id="aCoursesList" class="bg-fa of">
        
        <section class="container">
          
          <section class="path-wrap txtOf hLh30">
            <a href="/" title class="c-999 fsize14">首页</a>
            \
            <a href="/course" title class="c-999 fsize14">课程列表</a>
            \
            <a :href="'/course?subjectParentId='+course.subjectLevelOneId" class="c-333 fsize14">{
       { course.subjectLevelOne }}</a>
            \
            <a :href="'/course?subjectParentId='+course.subjectLevelOneId+'&subjectId='+course.subjectLevelTwoId" class="c-333 fsize14">{
       { course.subjectLevelTwo }}</a>
          </section>
          
          
          <div>
            <article class="c-v-pic-wrap" style="height: 357px;">
              <section id="videoPlay" class="p-h-video-box">
                <img :src="course.cover" :alt="course.title" class="dis c-v-pic">
              </section>
            </article>
            <aside class="c-attr-wrap">
              <section class="ml20 mr15">
                <h2 class="hLh30 txtOf mt15">
                  <span class="c-fff fsize24">{
       { course.title }}</span>
                </h2>
                <section class="c-attr-jg">
                  <span class="c-fff">价格：</span>
                  <b class="c-yellow" style="font-size:24px;">￥{
       { course.price }}</b>
                </section>
                <section class="c-attr-mt c-attr-undis">
                  <span class="c-fff fsize14">主讲： {
       { course.teacherName }}   </span>
                </section>
                <section class="c-attr-mt of">
                  <span class="ml10 vam">
                    <em class="icon18 scIcon"/>
                    <a class="c-fff vam" title="收藏" href="#" >收藏</a>
                  </span>
                </section>
                <section class="c-attr-mt">
                  <a href="#" title="立即观看" class="comm-btn c-btn-3">立即观看</a>
                </section>
              </section>
            </aside>
            <aside class="thr-attr-box">
              <ol class="thr-attr-ol">
                <li>
                  <p> </p>
                  <aside>
                    <span class="c-fff f-fM">购买数</span>
                    
    
                    <h6 class="c-fff f-fM mt10">{
       { course.buyCount }}</h6>
                  </aside>
                </li>
                <li>
                  <p> </p>
                  <aside>
                    <span class="c-fff f-fM">课时数</span>
                    
    
                    <h6 class="c-fff f-fM mt10">{
       { course.lessonNum }}</h6>
                  </aside>
                </li>
                <li>
                  <p> </p>
                  <aside>
                    <span class="c-fff f-fM">浏览数</span>
                    
    
                    <h6 class="c-fff f-fM mt10">{
       { course.viewCount }}</h6>
                  </aside>
                </li>
              </ol>
            </aside>
            <div class="clear"/>
          </div>
          
          <div class="mt20 c-infor-box">
            <article class="fl col-7">
              <section class="mr30">
                <div class="i-box">
                  <div>
                    <section id="c-i-tabTitle" class="c-infor-tabTitle c-tab-title">
                      <a name="c-i" class="current" title="课程详情">课程详情</a>
                    </section>
                  </div>
                  <article class="ml10 mr10 pt20">
    
    
                    
                    <div>
                      <h6 class="c-i-content c-infor-title">
                        <span>课程介绍</span>
                      </h6>
                      <div class="course-txt-body-wrap">
                        <section class="course-txt-body" v-html="course.description">
                          
                          
                        </section>
                      </div>
                    </div>
                    
                    
                    <div class="mt50">
                      <h6 class="c-g-content c-infor-title">
                        <span>课程大纲</span>
                      </h6>
                      <section class="mt20">
                        <div class="lh-menu-wrap">
                          <menu id="lh-menu" class="lh-menu mt10 mr10">
                            <ul>
                              
                              <li v-for="chapter in chapterList" :key="chapter.id" class="lh-menu-stair">
                                <a title="chapter.title" href="javascript: void(0)" class="current-1">
                                  <em class="lh-menu-i-1 icon18 mr10"/>{
       { chapter.title }}
                                </a>
                                <ol class="lh-menu-ol" style="display: block;">
                                  <li v-for="video in chapter.children" :key="video.id" class="lh-menu-second ml30">
                                    <a :href="'/player/'+video.videoSourceId" :title="video.title" target="_blank">
                                      <span v-if="Number(course.price) !== 0 && video.free===true" class="fr">
                                        <i class="free-icon vam mr10">免费试听</i>
                                      </span>
                                      <em class="lh-menu-i-2 icon16 mr5"> </em>{
       { video.title }}
                                    </a>
                                  </li>
                                </ol>
                              </li>
                            </ul>
                          </menu>
                        </div>
                      </section>
                    </div>
                    
                  </article>
                </div>
              </section>
            </article>
            <aside class="fl col-3">
              <div class="i-box">
                
                <div>
                  <section class="c-infor-tabTitle c-tab-title">
                    <a title href="javascript:void(0)">主讲讲师</a>
                  </section>
                  <section class="stud-act-list">
                    <ul style="height: auto;">
                      <li>
                        <div class="u-face">
                          <a :href="'/teacher/'+course.teacherId" target="_blank">
                            <img :src="course.avatar" width="50" height="50" alt>
                          </a>
                        </div>
                        <section class="hLh30 txtOf">
                          <a :href="'/teacher/'+course.teacherId" class="c-333 fsize16 fl" target="_blank">{
       { course.teacherName }}</a>
                        </section>
                        <section class="hLh20 txtOf">
                          <span class="c-999">{
       { course.intro }}</span>
                        </section>
                      </li>
                    </ul>
                  </section>
                </div>
                
              </div>
            </aside>
            <div class="clear"/>
          </div>
        </section>
        
      </div>
    </template>

## 4 样式部分 ##

# 三 测试 #

![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/69abe55eefa34fb0bc790c201ef93332.png