微信小程序实现关注与取消关注功能

一、数据库设计（3张）

users_fans
users表

mapper.xml设计：

//增加粉丝数目<update id="addFansCount" parameterType="String">update users set fans_counts=fans_counts+1 where id=#{userId}</update><update id="reduceFansCount" parameterType="String">update users set fans_counts=fans_counts-1 where id=#{userId}</update>
//增加关注者数目<update id="addFollersCount" parameterType="String">update users set follow_counts=follow_counts+1 where id=#{userId}</update><update id="reduceFollersCount" parameterType="String">update users set follow_counts=follow_counts-1 where id=#{userId}</update>

二、userServiceImpl.java

增加操作：userId为视频发布者的id，fanId为粉丝id，添加粉丝对应三张表的操作：1.在用户-粉丝表中添加一条信息；2.在视频发布者的用户信息表里面添加一个粉丝数目；3.在粉丝的用户信息表中添加一个关注者数目

 @Overridepublic void saveUserFanRelation(String userId, String fanId) {String relId = sid.nextShort();UsersFans userFan = new UsersFans();userFan.setId(relId);userFan.setUserId(userId);//视频发布者的iduserFan.setFanId(fanId);//粉丝id//添加粉丝对应三张表的操作//1.在用户-粉丝表中添加一条信息usersFansMapper.insert(userFan);//2.在视频发布者的用户信息表里面添加一个粉丝数目userMapper.addFansCount(userId);//3.在粉丝的用户信息表中添加一个关注者数目userMapper.addFollersCount(fanId);}

删除操作： Criteria条件删除类，表示有对应的userId和·fanId时在数据库中执行删除关注操作

    @Overridepublic void deleteUserFanRelation(String userId, String fanId) {Example example = new Example(UsersFans.class);Criteria criteria = example.createCriteria();//条件删除criteria.andEqualTo("userId", userId);criteria.andEqualTo("fanId", fanId);usersFansMapper.deleteByExample(example);userMapper.reduceFansCount(userId);userMapper.reduceFollersCount(fanId);}

三、前端

//mine.wxml

{{!isMe}}：提供给前端显示，用于判断是个人信息界面还是别人的信息界面，{{isFollow}}:提供给前端显示，用于判断是否关注了这个人。
data-followType用于提供给后端。根据获取的data-followType值按照对应Url向后台发送request请求,后台数据库操作成功后，后台向前端发送回调函数，调整{{isFollow}}的值进而改变前端“关注”显示。

<block wx:if="{{!isMe}}"><block wx:if="{{isFollow}}"><button size='mini' type='' class='follow' data-followType='0' bindtap='followMe'>已关注</button></block><block wx:if="{{!isFollow}}"><button size='mini' type='primary' class='follow' data-followType='1' bindtap='followMe'>关注我</button></block></block>

//mine.js

根据获取的data-followType值按照对应Url向后台发送request请求,后台数据库操作成功后，后台向前端发送回调函数，调整{{isFollow}}的值进而改变前端“关注”显示，后端对关注粉丝操作成功后对前端的关注数粉丝数进行修改。

followMe: function (e) {var me = this;var user = app.getGlobalUserInfo();var userId = user.id;var publisherId = me.data.publisherId;var followType = e.currentTarget.dataset.followtype;  //followType提供给后端// 1：关注 0：取消关注var url = '';if (followType == '1') {url = '/user/beyourfans?userId=' + publisherId + '&fanId=' + userId;} else {url = '/user/dontbeyourfans?userId=' + publisherId + '&fanId=' + userId;}wx.showLoading();wx.request({url: app.serverUrl + url,method: 'POST',header: {'content-type': 'application/json', // 默认值'headerUserId': user.id,'headerUserToken': user.userToken},success: function () {wx.hideLoading();if (followType == '1') {me.setData({isFollow: true,fansCounts: ++me.data.fansCounts  //后端对关注粉丝操作成功后对前端的关注数粉丝数进行修改})} else {me.setData({isFollow: false,fansCounts: --me.data.fansCounts})}}})}

另外，当一个用户关注了视频发布者或取消关注后，视频发布者的个人信息页面也要进行实时的改变，这里我们采用动态展示的方法，写在onload()方法里面，每次的request请求采用 url:serverUrl + '/user/query?userId=' + userId + "&fanId=" + user.id方式即可。

//mine.js

 onLoad: function (params) {var me = this;// var user = app.userInfo;// fixme 修改原有的全局对象为本地缓存var user = app.getGlobalUserInfo();var userId = user.id;var publisherId = params.publisherId;if (publisherId != null && publisherId != '' && publisherId != undefined) {userId = publisherId;me.setData({isMe: false,publisherId: publisherId,})}wx.showLoading({title: '请等待...',});var serverUrl = app.serverUrl;// 实现视频发布者的被关注情况和粉丝的关注情况动态更新wx.request({url: serverUrl + '/user/query?userId=' + userId + "&fanId=" + user.id,method: "POST",header: {'content-type': 'application/json', // 默认值'headerUserId': user.id,'headerUserToken': user.userToken},success: function (res) {console.log(res.data);wx.hideLoading();if (res.data.status == 200) {var userInfo = res.data.data;var faceUrl = "../resource/images/noneface.png";if (userInfo.faceImage != null && userInfo.faceImage != '' && userInfo.faceImage != undefined) {faceUrl = serverUrl + userInfo.faceImage;}me.setData({faceUrl: faceUrl,fansCounts: userInfo.fansCounts,followCounts: userInfo.followCounts,receiveLikeCounts: userInfo.receiveLikeCounts,nickname: userInfo.nickname,isFollow: userInfo.follow});//502表示用户token失效} else if (res.data.status == 502) {wx.showToast({title: res.data.msg,duration: 3000,icon: "none",success: function () {wx.redirectTo({url: '../userLogin/login',})}})}}})me.getMyVideoList(1);}

微信小程序实现关注与取消关注功能相关推荐

微信小程序实现收藏和取消收藏功能
话不多说,直接上代码 js data:{isFavorite: false, },//收藏 collect: function(options) {console.log(options)var th ...
微信小程序实现点赞与取消点赞功能
一.数据库设计(3张) video表 user_like_videos表 users表 mapper.xml设计: <select id=" ...
微信小程序利用云开发实现评论功能
微信小程序利用云开发实现评论功能如果喜欢可以给我一个关注. 一.微信小程序,评论功能的实现. 首先我们先布局,一个文章或者是商品,底下是评论,  <vie ...
微信小程序开发教程第八章：微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...
微信授权绑定手机号 java_微信小程序获取手机号授权用户登录功能
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无 ...
php 微信小程序获取手机号_实例讲解微信小程序获取手机号授权用户登录功能...
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写.本文主要给大家分享微信小程序获取手机号授权用户登录功能,需要的朋友参考下吧, ...
java实现微信、手机号登陆_微信小程序获取手机号授权用户登录功能
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPaDirIrkFhoneNumber这个组件通过button来 ...
微信小程序基于云数据库实现点赞功能
微信小程序基于云数据库实现点赞功能微信小程序基于云数据库实现点赞功能小Tips 2022.04.27 更新微信小程序基于云数据库实现点赞功能首先你要开通云开发,然后点击数据库创建集合(这里我的 ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序开发（2） - 微信小程序实现拍照和录像拍摄功能方法
微信小程序开发2 - 本文实例讲述了微信小程序实现拍照和录像拍摄功能方法.分享给大家供大家参考,具体如下: 微信小程序拍照: API:wx.chooseImage 原先的想法是使用微信的camera组 ...

微信小程序实现关注与取消关注功能

微信小程序实现关注与取消关注功能相关推荐

最新文章

热门文章