Tiktok practice ~ search page ~ video details

One 、 The front end

1. Search keyword short video list

Search keywords to query the short video list

	      //  Query the short video list according to the search keywords 
			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: " No results ~"
								})
							}
						} 
						uni.stopPullDownRefresh();
					}
				});
			}

2. Select a short video

goToVlog(vlogId) {
    
				uni.navigateTo({
    
					url: "../vlog/vlog?vlogId=" + vlogId
				})
			},

3. Short video details

	//  According to the user userId and vlogId Query the details of the short video is the same as the home page, but there is no tab page 
			displayVideoPaging(page, needClearList) {
    
				//  Query the list of short videos on the home page 
				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",` Insert a code chip here `
								duration: 3000
							});
						}
						
					}
				});
			}

Two 、 Back end part

2.1. Short video entry

    /**
     *  Query based on video PK vlog details 
     *
     * @param userId  With the head of the household key ID
     * @param vlogId  Video primary key ID
     * @return
     */
    @GetMapping("detail")
    public GraceJSONResult detail(@RequestParam(defaultValue = "") String userId,
                                  @RequestParam String vlogId) {
    
        return GraceJSONResult.ok(vlogService.getVlogDetailById(userId, vlogId));
    }

2.2. Short video interface layer

 /**
     *  Query based on video PK vlog details 
     */
    public IndexVlogVO getVlogDetailById(String userId, String vlogId);

2.3. Short video service layer

 /**
     *  Query based on video PK vlog details 
     *
     * @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;
    }

2.4. Persistence layer - Interface

   /**
     *  Query based on video PK vlog details 
     *
     * @param map
     * @return
     */
    public List<IndexVlogVO> getVlogDetailById(@Param("paramMap") Map<String, Object> map);

2.5. Persistence layer - xml

 <!-- Query based on video PK vlog details -->
    <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>

3、 ... and 、 Appreciation of renderings

3.1. Search page

3.2. Short video list

3.3. Short video details