一后端

1 vo对象的定义

@Datapublic 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*/@Overridepublic 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 脚本部分

<script>import courseApi from '~/api/course'export default {  async asyncData(page) {    const response = await courseApi.getById(page.route.params.id)    return {      course: response.data.course,      chapterList: response.data.chapterVoList    }  }}</script>

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 }}&nbsp;&nbsp;&nbsp;</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>&nbsp;</p>              <aside>                <span class="c-fff f-fM">购买数</span>                                <h6 class="c-fff f-fM mt10">{  { course.buyCount }}</h6>              </aside>            </li>            <li>              <p>&nbsp;</p>              <aside>                <span class="c-fff f-fM">课时数</span>                                <h6 class="c-fff f-fM mt10">{  { course.lessonNum }}</h6>              </aside>            </li>            <li>              <p>&nbsp;</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">                      <!-- 将内容中的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">&nbsp;</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 样式部分

<style>.course-txt-body ol, .course-txt-body ul{    padding-left: 40px;    margin: 16px 0;}.course-txt-body ol li{    list-style: decimal;}.course-txt-body ul li{    list-style: disc;}</style>