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

一、数据库设计（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.在粉丝的用户信息表中添加一个关注者数目

 @Override
    public void saveUserFanRelation(String userId, String fanId) {

        String relId = sid.nextShort();

        UsersFans userFan = new UsersFans();
        userFan.setId(relId);
        userFan.setUserId(userId);//视频发布者的id
        userFan.setFanId(fanId);//粉丝id

        //添加粉丝对应三张表的操作
        //1.在用户-粉丝表中添加一条信息
        usersFansMapper.insert(userFan);
        //2.在视频发布者的用户信息表里面添加一个粉丝数目
        userMapper.addFansCount(userId);
        //3.在粉丝的用户信息表中添加一个关注者数目
        userMapper.addFollersCount(fanId);

    }

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

    @Override
    public 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);
  }