抖音实战~我关注的博主列表、关注、取关

一、关注模块

1. 关注流程图

暂未上，敬请期待！

2. 关注流程简述

暂未上，敬请期待！

二、前端关注相关

2.1. 查询我关注博主列表

	// 查询我关注博主列表
			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. 取消关注

// 取消关注
			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. 关注我

	// 关注我
			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. 上滑分页粉丝列表

<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)">关注</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)">取关</text>
				</view>
			</view>
			
		</scroll-view>
		
	</view>
</template>

// 上滑分页粉丝列表
			pagingFollowsList() {
    
				// this.followsList = this.followsList.concat(this.followsList);
				
				if (this.page >= this.totalPage) {
    
					return;
				}
				this.queryMyFollowList(this.page);
			}

2.5. 状态刷新

         // 关注/取关后的list重新状态刷新设置
			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.1. 查询我关注的博主列表

/**
     * 查询我关注的博主列表
     *
     * @param myId     我的用户ID
     * @param page     当前第几页
     * @param pageSize 每页显示几条
     * @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. 取关

    /**
     * 取关
     *
     * @param myId     我的用户ID
     * @param vlogerId 视频发布者ID
     * @return
     */
    @PostMapping("cancel")
    public GraceJSONResult cancel(@RequestParam String myId,
                                  @RequestParam String vlogerId) {
    

        // 删除业务的执行
        fansService.doCancel(myId, vlogerId);

        // 博主的粉丝-1，我的关注-1
        //我的关注总数
        redis.decrement(REDIS_MY_FOLLOWS_COUNTS + ":" + myId, 1);
        // 博主的粉丝总数
        redis.decrement(REDIS_MY_FANS_COUNTS + ":" + vlogerId, 1);

        // 我和博主的关联关系，依赖redis，不要存储数据库，避免db的性能瓶颈
        redis.del(REDIS_FANS_AND_VLOGGER_RELATIONSHIP + ":" + myId + ":" + vlogerId);

        return GraceJSONResult.ok();
    }

3.3. 关注

  /**
     * 关注
     *
     * @param myId     我的用户ID
     * @param vlogerId 视频发布者ID
     * @return
     */
    @PostMapping("follow")
    public GraceJSONResult follow(@RequestParam String myId,
                                  @RequestParam String vlogerId) {
    

        // 判断两个id不能为空
        if (StringUtils.isBlank(myId) || StringUtils.isBlank(vlogerId)) {
    
            return GraceJSONResult.errorCustom(ResponseStatusEnum.SYSTEM_ERROR);
        }

        // 判断当前用户，自己不能关注自己
        if (myId.equalsIgnoreCase(vlogerId)) {
    
            return GraceJSONResult.errorCustom(ResponseStatusEnum.SYSTEM_RESPONSE_NO_INFO);
        }

        // 判断两个id对应的用户是否存在
        Users vloger = userService.getUser(vlogerId);
        Users myInfo = userService.getUser(myId);

        // fixme: 两个用户id的数据库查询后的判断，是分开好？还是合并判断好？
        if (myInfo == null || vloger == null) {
    
            return GraceJSONResult.errorCustom(ResponseStatusEnum.SYSTEM_RESPONSE_NO_INFO);
        }

        // 保存粉丝关系到数据库
        fansService.doFollow(myId, vlogerId);

        // 博主的粉丝+1，我的关注+1
        //我的关注总数
        redis.increment(REDIS_MY_FOLLOWS_COUNTS + ":" + myId, 1);
        // 博主的粉丝总数
        redis.increment(REDIS_MY_FANS_COUNTS + ":" + vlogerId, 1);

        // 我和博主的关联关系，依赖redis，不要存储数据库，避免db的性能瓶颈
        redis.set(REDIS_FANS_AND_VLOGGER_RELATIONSHIP + ":" + myId + ":" + vlogerId, "1");

        return GraceJSONResult.ok();
    }