文章目录
一、关注模块
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();
}