本文共 4124 字，大约阅读时间需要 13 分钟。

一 后端

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

3 获取数据并更新浏览量

接口

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

实现

/*** 功能描述：根据讲师id获取讲师详情页数据** @param id 讲师id* @return Map
   
     封装讲师信息和课程信息* @author cakin* @date 2020/12/18*/@Overridepublic Map
    
      selectTeacherInfoById(String id) {    Teacher teacher = baseMapper.selectById(id);    QueryWrapper
     
       courseQueryWrapper = new QueryWrapper<>();    courseQueryWrapper.eq("teacher_id", id);    List
      
        courseList = courseMapper.selectList(courseQueryWrapper);    Map
       
         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
   
     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 模板部分

4 样式部分

三 测试

转载地址：http://ceqj.baihongyu.com/