Tiktok actual battle ~ list of bloggers I follow, follow and check

One 、 Focus on modules

1. Focus on the flow chart

Not yet , Coming soon ！

2. Focus on the process brief

Not yet , Coming soon ！

Two 、 The front end pays attention to the relevant

2.1. Check the list of bloggers I follow

	//  Check the list of bloggers I follow 
			queryMyFollowList(page) {
    
				var me = this;
				// if (page == 0) {
    
				// 	me.followsList = [];
				// }
				page = page + 1;
				var userId = getApp().getUserInfoSession().id;
				var serverUrl = app.globalData.serverUrl;
				
				uni.request({
    
					method: "GET",
					header: {
    
						headerUserId: userId,
						headerUserToken: app.getUserSessionToken()
					},
					url: serverUrl + "/fans/queryMyFollows?myId=" + userId + "&page=" + page + "&pageSize=10",
					success(result) {
    
						if (result.data.status == 200) {
    
							var followsList = result.data.data.rows;
							var totalPage = result.data.data.total;
							me.followsList = me.followsList.concat(followsList);
							me.page = page;
							me.totalPage = totalPage;
						}
					}
				});
			},

2.2. Cancel the attention

//  Cancel the attention 
			cancelFollow(vlogerId) {
    
				var me = this;
				var userId = getApp().getUserInfoSession().id;
				var serverUrl = app.globalData.serverUrl;
				uni.request({
    
					method: "POST",
					header: {
    
						headerUserId: userId,
						headerUserToken: app.getUserSessionToken()
					},
					url: serverUrl + "/fans/cancel?myId=" + userId + "&vlogerId=" + vlogerId,
					success(result) {
    
						
						if (result.data.status == 200) {
    
							me.reFreshList(vlogerId, false);
						} else {
    
							uni.showToast({
    
								title: result.data.msg,
								icon: "none",
								duration: 3000
							});
						}
					}
				});
				
			},

2.2. Pay attention to me

	//  Pay attention to me 
			followMe(vlogerId) {
    
				var me = this;
				var userId = getApp().getUserInfoSession().id;
				var serverUrl = app.globalData.serverUrl;
				uni.request({
    
					method: "POST",
					header: {
    
						headerUserId: userId,
						headerUserToken: app.getUserSessionToken()
					},
					url: serverUrl + "/fans/follow?myId=" + userId + "&vlogerId=" + vlogerId,
					success(result) {
    
						
						if (result.data.status == 200) {
    
							me.reFreshList(vlogerId, true);
						} else {
    
							uni.showToast({
    
								title: result.data.msg,
								icon: "none",
								duration: 3000
							});
						}
						
					}
				});
				
			},

2.4. Slide up the paged fan list

<template>
	<view class="page">
		<view class="line"></view>
			
		<scroll-view scroll-y="true" @scrolltolower="pagingFollowsList()">
			
			<view 
				class="user-wrapper" 
				v-for="(f, index) in followsList" 
				:key="index">
				<view class="user-info">
					<image class="face" :src="f.face" style="align-self: center;"></image>
					<text class="user-name" style="align-self: center;">{
    {
    f.nickname}}</text>
				</view>
				
				<view v-if="!f.followed" class="operator-wrapper" style="width: 140rpx; height: 60rpx;display: flex;flex-direction: row;justify-content: center;background-color: #ef274d;border-radius: 10px;align-self: center;">
					<text class="operator-words" style="align-self: center;color: #FFFFFF;" @click="followMe(f.vlogerId)"> Focus on </text>
				</view>
				<view v-if="f.followed" class="operator-wrapper" style="width: 140rpx; height: 60rpx;display: flex;flex-direction: row;justify-content: center;background-color: #ef274d;border-radius: 10px;align-self: center;border-width: 1px;border-color: #ef274d;background-color: #181b27;">
					<text class="operator-words" style="align-self: center;color: #ef274d;" @click="cancelFollow(f.vlogerId)"> Take off </text>
				</view>
			</view>
			
		</scroll-view>
		
	</view>
</template>

//  Slide up the paged fan list 
			pagingFollowsList() {
    
				// this.followsList = this.followsList.concat(this.followsList);
				
				if (this.page >= this.totalPage) {
    
					return;
				}
				this.queryMyFollowList(this.page);
			}

2.5. Status refresh

         //  Focus on / Closed list Reset status refresh settings 
			reFreshList(vlogerId, status) {
    
				var me = this;
				var followsList = me.followsList;
				for (var i = 0 ; i < followsList.length ; i ++) {
    
					var vloger = followsList[i];
					if (vloger.vlogerId == vlogerId) {
    
						vloger.followed = status;
						followsList.splice(i,1, vloger);
					}
				}
				me.followsList = followsList;
			},

3、 ... and 、 The back-end pays attention to relevant

3.1. Check the list of bloggers I follow

/**
     *  Check the list of bloggers I follow 
     *
     * @param myId      My users ID
     * @param page      Current page 
     * @param pageSize  How many are displayed on each page 
     * @return
     */
    @GetMapping("queryMyFollows")
    public GraceJSONResult queryMyFollows(@RequestParam String myId,
                                          @RequestParam Integer page,
                                          @RequestParam Integer pageSize) {
    
        return GraceJSONResult.ok(
                fansService.queryMyFollows(
                        myId,
                        page,
                        pageSize));
    }

  @Override
    public PagedGridResult queryMyFollows(String myId,
                                          Integer page,
                                          Integer pageSize) {
    
        Map<String, Object> map = new HashMap<>();
        map.put("myId", myId);

        PageHelper.startPage(page, pageSize);
        List<VlogerVO> list = fansMapperCustom.queryMyFollows(map);
        return setterPagedGrid(list, page);
    }

   <select id="queryMyFollows" resultType="com.gblfy.vo.VlogerVO" parameterType="map">

        SELECT
            u.id as vlogerId,
            u.nickname as nickname,
            u.face as face
        FROM
            fans f
        LEFT JOIN
            users u
        ON
            f.vloger_id = u.id
        WHERE
            f.fan_id = #{paramMap.myId}
        ORDER BY
            u.nickname
        ASC

    </select>

3.2. Take off

    /**
     *  Take off 
     *
     * @param myId      My users ID
     * @param vlogerId  Video publisher ID
     * @return
     */
    @PostMapping("cancel")
    public GraceJSONResult cancel(@RequestParam String myId,
                                  @RequestParam String vlogerId) {
    

        //  Delete the execution of the business 
        fansService.doCancel(myId, vlogerId);

        //  Blogger fans -1, My attention -1
        // My total number of concerns 
        redis.decrement(REDIS_MY_FOLLOWS_COUNTS + ":" + myId, 1);
        //  The total number of bloggers' fans 
        redis.decrement(REDIS_MY_FANS_COUNTS + ":" + vlogerId, 1);

        //  My relationship with bloggers , rely on redis, Do not store databases , avoid db Performance bottlenecks 
        redis.del(REDIS_FANS_AND_VLOGGER_RELATIONSHIP + ":" + myId + ":" + vlogerId);

        return GraceJSONResult.ok();
    }

3.3. Focus on

  /**
     *  Focus on 
     *
     * @param myId      My users ID
     * @param vlogerId  Video publisher ID
     * @return
     */
    @PostMapping("follow")
    public GraceJSONResult follow(@RequestParam String myId,
                                  @RequestParam String vlogerId) {
    

        //  Whether two id Can't be empty 
        if (StringUtils.isBlank(myId) || StringUtils.isBlank(vlogerId)) {
    
            return GraceJSONResult.errorCustom(ResponseStatusEnum.SYSTEM_ERROR);
        }

        //  Judge the current user , You can't pay attention to yourself 
        if (myId.equalsIgnoreCase(vlogerId)) {
    
            return GraceJSONResult.errorCustom(ResponseStatusEnum.SYSTEM_RESPONSE_NO_INFO);
        }

        //  Whether two id Whether the corresponding user exists 
        Users vloger = userService.getUser(vlogerId);
        Users myInfo = userService.getUser(myId);

        // fixme:  Two users id Judgment after database query , It's good to separate ？ It's better to combine and judge ？
        if (myInfo == null || vloger == null) {
    
            return GraceJSONResult.errorCustom(ResponseStatusEnum.SYSTEM_RESPONSE_NO_INFO);
        }

        //  Saving fans relates to the database 
        fansService.doFollow(myId, vlogerId);

        //  Blogger fans +1, My attention +1
        // My total number of concerns 
        redis.increment(REDIS_MY_FOLLOWS_COUNTS + ":" + myId, 1);
        //  The total number of bloggers' fans 
        redis.increment(REDIS_MY_FANS_COUNTS + ":" + vlogerId, 1);

        //  My relationship with bloggers , rely on redis, Do not store databases , avoid db Performance bottlenecks 
        redis.set(REDIS_FANS_AND_VLOGGER_RELATIONSHIP + ":" + myId + ":" + vlogerId, "1");

        return GraceJSONResult.ok();
    }