作品展示与播放-作品详情页

后端

创建 VO

ContentWebVO.java

/**
 * @author BNTang
 * @version 1.0
 * @project video_parent
 * @description
 * @since Created in 2021/6/5 005 8:49
 **/
@Data
public class ContentWebVO {
    private String id;
    /**
     * 作品标题
     */
    private String title;
    /**
     * 销售价格
     */
    private BigDecimal price;
    /**
     * 合辑视频图
     */
    private Integer contentNum;
    /**
     * 封面图片路径
     */
    private String cover;
    /**
     * 销售数量
     */
    private Long buyCount;
    /**
     * 浏览数量
     */
    private Long viewCount;
    /**
     * 作品简介
     */
    private String description;
    /**
     * 作者ID
     */
    private String authorId;
    /**
     * 作者姓名
     */
    private String authorName;
    /**
     * 作者简介
     */
    private String intro;
    /**
     * 作者头像
     */
    private String avatar;
    /**
     * 作品一级分类ID 
     */
    private String oneCategoryId;
    /**
     * 一级类别名称
     */
    private String oneCategoryName;
    /**
     * 二级分类ID
     */
    private String twoCategoryId;
    /**
     * 二级分类名称
     */
    private String twoCategoryName;
}

接口准备

修改 ContentController.java

/**
 * 根据作品id获取作品详情信息
 */
@ApiOperation(value = "根据作品id获取作品详情信息")
@GetMapping("/getContentDeatail/{contentId}")
public ResponseResult getById(@PathVariable String contentId, HttpServletRequest request) {
    // 查询作品信息和作者信息
    ContentWebVO contentWebVo = contentService.selectContentDetailById(contentId);
    // 查询当前作品的章节信息
    List<ChapterVO> chapterVoList = chapterService.getChapterContentVideo(contentId);
    return ResponseResult.ok().data("content", contentWebVo).data("chapterVoList", chapterVoList);
}

修改 ContentService.java

/**
 * 获取作品信息
 * 
 * @param contentId
 *            作品Id
 * @return 作品信息
 */
ContentWebVO selectContentDetailById(String contentId);

/**
 * 更新作品浏览数
 * 
 * @param id
 *            作品ID
 */
void updatePageViewCount(String id);

修改 ContentServiceImpl.java

@Override
public ContentWebVO selectContentDetailById(String contentId) {
    this.updatePageViewCount(contentId);
    return baseMapper.getContentDetailById(contentId);
}

/**
 * 更新播放信息
 */
@Override
public void updatePageViewCount(String id) {
    Content content = baseMapper.selectById(id);
    content.setViewCount(content.getViewCount() + 1);
    baseMapper.updateById(content);
}

修改 ContentMapper.java

/**
 * 获取作品信息
 * 
 * @param contentId
 *            作品ID
 * @return 作品信息
 */
ContentWebVO getContentDetailById(String contentId);

修改 ContentMapper.xml

<select id="getContentDetailById" resultType="top.it6666.common_utils.entity.ContentWebVO">
    SELECT c.id,
           c.title,
           c.cover,
           CONVERT(c.price, DECIMAL(8, 2)) AS price,
           c.content_num                   AS contentNum,
           c.cover,
           c.buy_count                     AS buyCount,
           c.view_count                    AS viewCount,
           cd.description,
           t.id                            AS authorId,
           t.name                          AS authorName,
           t.intro,
           t.avatar,
           s1.id                           AS oneCategoryId,
           s1.title                        AS oneCategoryName,
           s2.id                           AS twoCategoryId,
           s2.title                        AS twoCategoryName
    FROM video_content c
                 LEFT JOIN video_content_description cd ON c.id = cd.id
                 LEFT JOIN video_author t ON c.author_id = t.id
                 LEFT JOIN video_category s1 ON c.category_parent_id = s1.id
                 LEFT JOIN video_category s2 ON c.category_id = s2.id
    WHERE c.id = #{contentId}
</select>

然后在紧接着修改 ChapterService.java

/**
 * 查询当前作品的章节信息
 * 
 * @param contentId
 *            作品ID
 * @return 章节信息
 */
List<ChapterVO> getChapterContentVideo(String contentId);

修改 ChapterServiceImpl.java

@Override
public List<ChapterVO> getChapterContentVideo(String contentId) {
    // 1.根据作品的id查询所有的作品章节
    QueryWrapper<Chapter> chapterQueryWrapper = new QueryWrapper<>();
    chapterQueryWrapper.eq("content_id", contentId);

    List<Chapter> chapterList = baseMapper.selectList(chapterQueryWrapper);

    // 2.根据作品的id查询所有的作品小节
    QueryWrapper<ContentVideo> queryWrapper = new QueryWrapper<>();
    queryWrapper.eq("content_id", contentId);
    List<ContentVideo> contentVideoList = contentVideoService.list(queryWrapper);

    // 3.封装数据
    List<ChapterVO> resList = new ArrayList<>();

    // 遍历所有的章节信息
    chapterList.forEach(chapter -> {
        // 把章节信息转成ChapterVO
        ChapterVO chapterVO = new ChapterVO();
        BeanUtils.copyProperties(chapter, chapterVO);

        // chapterVO封装小节数据
        List<ContentVideoVO> children = new ArrayList<>();

        contentVideoList.forEach(contentVideo -> {
            if (contentVideo.getChapterId().equals(chapter.getId())) {
                // 是当前章节的小节
                ContentVideoVO contentVideoVO = new ContentVideoVO();
                BeanUtils.copyProperties(contentVideo, contentVideoVO);
                children.add(contentVideoVO);
            }
        });

        chapterVO.setChildren(children);
        resList.add(chapterVO);
    });
    return resList;
}

如上后端的内容已经写完了接下来看看前端, 如下图中的链接跳转在上一节的文章当中已经完成了所以在这里只是为了理逻辑, 列表页点击跳转到作品详情页, 是如下的位置进行跳转的

前端的内容其实我们在上一节当中已经写完了这里是只来说一下 video 文件夹下的 _id.vue 里面的结构只要分为那几块

分类信息

作品信息

作者信息

目录信息