抖音实战~搜索页面~视频详情

一、前端部分

1. 检索关键词短视频列表

搜索关键词查询短视频列表

	      // 根据搜索关键词查询短视频列表
			fetchList(page) {
				uni.stopPullDownRefresh();
				var me = this;
				
				page = page + 1;
				var search = me.search;
				
				var userId = getApp().getUserInfoSession().id;
				var serverUrl = app.globalData.serverUrl;
				uni.request({
					method: "GET",
					header: {
						headerUserId: userId,
						headerUserToken: app.getUserSessionToken()
					},
					url: serverUrl + "/vlog/indexList?userId=" + userId + "&search=" + search + "&page=" + page + "&pageSize=10",
					success(result) {
						
						if (result.data.status == 200) {
							var waterList = result.data.data.rows;
							var totalPage = result.data.data.total;
							me.waterList = me.waterList.concat(waterList);
							me.page = page;
							me.totalPage = totalPage;
							if (waterList == null || waterList == undefined	|| waterList.length == 0) {
								uni.showToast({
									title: "没有结果~"
								})
							}
						} 
						uni.stopPullDownRefresh();
					}
				});
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

2. 选中某一个短视频

goToVlog(vlogId) {
				uni.navigateTo({
					url: "../vlog/vlog?vlogId=" + vlogId
				})
			},
1
2
3
4
5

3. 短视频详情

	// 根据用户userId和vlogId查询短视频详情和首页一样只是没有tab页
			displayVideoPaging(page, needClearList) {
				// 查询首页短视频列表
				var me = this;
				var vlogId = me.vlogId;
				
				var myUserInfo = getApp().getUserInfoSession();
				var userId = "";
				if (myUserInfo != null) {
					userId = myUserInfo.id;
				}
				var userId = getApp().getUserInfoSession().id;
				
				var serverUrl = app.globalData.serverUrl;
				uni.request({
					method: "GET",
					header: {
						headerUserId: userId,
						headerUserToken: app.getUserSessionToken()
					},
					url: serverUrl + "/vlog/detail?userId=" + userId + "&vlogId=" + vlogId,
					success(result) {
						
						if (result.data.status == 200) {
							var vlog = result.data.data;
							var playerList = [];
							playerList.push(vlog);
							me.playerList = playerList;
							me.freshCommentCounts();
							me.setThisVlogInfo();
						} else {
							uni.showToast({
								title: result.data.msg,
								icon: "none",`在这里插入代码片`
								duration: 3000
							});
						}
						
					}
				});
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

二、后端部分

2.1. 短视频入口

    /**
     * 根据视频主键查询vlog详情
     *
     * @param userId 用户主键ID
     * @param vlogId 视频主键ID
     * @return
     */
    @GetMapping("detail")
    public GraceJSONResult detail(@RequestParam(defaultValue = "") String userId,
                                  @RequestParam String vlogId) {
        return GraceJSONResult.ok(vlogService.getVlogDetailById(userId, vlogId));
    }
1
2
3
4
5
6
7
8
9
10
11
12
13

2.2. 短视频接口层

 /**
     * 根据视频主键查询vlog详情
     */
    public IndexVlogVO getVlogDetailById(String userId, String vlogId);
1
2
3
4

2.3. 短视频服务层

 /**
     * 根据视频主键查询vlog详情
     *
     * @param userId
     * @param vlogId
     * @return
     */
    @Override
    public IndexVlogVO getVlogDetailById(String userId, String vlogId) {

        Map<String, Object> map = new HashMap<>();
        map.put("vlogId", vlogId);

        List<IndexVlogVO> list = vlogMapperCustom.getVlogDetailById(map);

        if (list != null && list.size() > 0 && !list.isEmpty()) {
            IndexVlogVO vlogVO = list.get(0);
            // return vlogVO;
            return setterVO(vlogVO, userId);
        }

        return null;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.4. 持久层-接口

   /**
     * 根据视频主键查询vlog详情
     *
     * @param map
     * @return
     */
    public List<IndexVlogVO> getVlogDetailById(@Param("paramMap") Map<String, Object> map);
1
2
3
4
5
6
7

2.5. 持久层- xml

 <!--根据视频主键查询vlog详情-->
    <select id="getVlogDetailById" parameterType="map" resultType="com.gblfy.vo.IndexVlogVO">
        SELECT v.id              as vlogId,
               v.vloger_id       as vlogerId,
               u.face            as vlogerFace,
               u.nickname        as vlogerName,
               v.title           as content,
               v.url             as url,
               v.cover           as cover,
               v.width           as width,
               v.height          as height,
               v.like_counts     as likeCounts,
               v.comments_counts as commentsCounts,
               v.is_private      as isPrivate
        FROM vlog v
                 LEFT JOIN
             users u
             ON
                 v.vloger_id = u.id
        WHERE v.id = #{paramMap.vlogId}
    </select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

三、效果图鉴赏

3.1. 搜索页面

3.2. 短视频列表

3.3. 短视频详情