抖音实战~我关注的博主列表、关注、取关
2024-07-02 02:28:48
文章目录
- 一、关注模块
- 1. 关注流程图
- 2. 关注流程简述
- 二、前端关注相关
- 2.1. 查询我关注博主列表
- 2.2. 取消关注
- 2.2. 关注我
- 2.4. 上滑分页粉丝列表
- 2.5. 状态刷新
- 三、后端关注相关
- 3.1. 查询我关注的博主列表
- 3.2. 取关
- 3.3. 关注
一、关注模块
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));}
@Overridepublic 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">SELECTu.id as vlogerId,u.nickname as nickname,u.face as faceFROMfans fLEFT JOINusers uONf.vloger_id = u.idWHEREf.fan_id = #{paramMap.myId}ORDER BYu.nicknameASC</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();}
抖音实战~我关注的博主列表、关注、取关相关推荐
- Python爬虫实战(四)：微博博主信息爬取(粉丝数、关注数、博文数、信用等级、认证信息、个人简介……)
追风赶月莫停留,平芜尽处是春山. 文章目录 追风赶月莫停留,平芜尽处是春山. 好久没更新了,今天来更新一波. 一.网页分析 二.接口分析 url分析 返回数据分析 三.编写代码 获取数据 保存数据 完 ...
- 抖音电商直播间SOP主播工作计划脚本话术模板方案
抖音电商直播间SOP主播工作计划脚本话术模板方案 网盘文档下载地址https://pan.baidu.com/s/1EeI_qPZBKH-hmwiG2bX-ZQ?pwd=rrh4 一家公司十几万的人是 ...
- 招聘主播，西南前三公会，涵抖音、火山等热门平台主播招募！
招聘主播,西南前三公会,涵抖音.火山等热门平台主播招募! 本公司现招聘抖音.火山等平台主播数名,大致要求如下: 1.有正常的沟通交流能力,普通话过关. 2.五官端正,且敢于上镜. 3.会与粉丝互动,有 ...
- 抖音微商引流之抖音实战引流技巧，，抖音/快手/火山热门技术---
[使用说明] [目前引流效果最好脚本之一] 小米4 手机 模拟器 容易符合 市场上都是模拟器 封号很严重 分辨率:540x960 DPI 240 安装脚本跟APP 登录抖音/设置评论话术/启动脚本 功 ...
- vue.js项目实战运用篇之抖音视频APP-第十节： 评论列表功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
- 抖音实战~评论数量同步更新
文章目录 一.快速入门 1. 子组件 2. 父组件 3. 子组件回调父页面 4. 父组件接收回调 5. 组件调用流程 二.抖音评论数量 2.1. 流程图 2.2. 流程简述 2.3. 流程图效果图鉴赏 ...
- 抖音实战~分享模块~生成短视频二维码
文章目录 一.可见范围 1. 自己发布短视频 2. 其他人发布短视频 二.源码分析 2.1. 底部窗口popup 2.2. 实现组件uQRCode 2.3. 插件涉及组件 2.4. 组件改造 2.5. ...
- 【福利】邀请博主，赢取大奖
自2015年底成立至今,云栖社区现已在云计算.大数据.人工智能.移动开发.VR/AR.研发管理等技术领域积累了上百万内容,通过博客.论坛.直播.线下会议等服务方式,每天帮助数十万开发者成长与进阶.我们 ...
- 仿抖音评论底部弹出框（列表框+发表框）
BottomSheetDialogFragment高仿抖音评论底部弹出框 先看效果图: 这个弹窗的效果是使用BottomSheetDialogFragment做的,第一个弹出的对话框为CommentL ...
最新文章
- Firefox 3.6最新功能：网页可根据设备方位调整角度
- 关于document.write
- python判断点在矩形内_判断平面内矩形和圆是否有交点的python实现
- 分享一个 GIFControl 控件
- Servlet — 线程安全问题
- 【5分钟 Paper】Continuous Control With Deep Reinforcement Learning
- 一个很好的String组合连接的方法（StringBuffer）
- 运用类判断三角形的形状
- length和length()
- STC Monitor-51的单片机在线仿真调试（转）
- fastunit元素控件不显示的问题
- error: Cannot delete branch 'xxx' checked out at 'xxxx'
- 深入Unreal蓝图开发：自定义蓝图节点(下)
- 支路电流法、回路电流法和节点电压法整理归纳
- 怎么使用php提交百度收录_百度站长工具链接提交主动推送(实时)PHP推送教程
- 这款刷题神器，yyds！
- Redis在linux下的安装
- 怎么做好钣金件产品结构设计
- react 全局改变滚动条样式
- 源代码防泄密软件推荐