微信小程序实现点赞与取消点赞功能

一、数据库设计（3张）

• video表
  
• user_like_videos表
  
• users表
  

mapper.xml设计：

	<!-- 查询我喜欢的视频 -->
	<select id="queryMyLikeVideos" resultMap="BaseResultMap" parameterType="String">
		select v.*,u.face_image as face_image,u.nickname as nickname from videos v 
		left join users u on v.user_id = u.id
		where 
			v.id in (select ulv.video_id from users_like_videos ulv where ulv.user_id = #{userId})
			and v.status = 1
			order by v.create_time desc
	</select>
	
  <!-- 增加我喜欢的视频 -->
  <update id="addVideoLikeCount" parameterType="String">
  	update videos set like_counts=like_counts+1 where id=#{videoId}
  </update>
  
  
  <!-- 删除我喜欢的视频 -->
  <update id="reduceVideoLikeCount" parameterType="String">
  	update videos set like_counts=like_counts-1 where id=#{videoId}
  </update>

二、videoServiceImpl.java

    @Override
    public void userLikeVideo(String userId, String videoId, String videoCreaterId) {

        // 1. 保存用户和视频的喜欢点赞关联关系表
        String likeId = sid.nextShort();
        UsersLikeVideos ulv = new UsersLikeVideos();
        ulv.setId(likeId);
        ulv.setUserId(userId);
        ulv.setVideoId(videoId);
        usersLikeVideosMapper.insert(ulv);

        // 2. 视频喜欢数量累加
        videosMapperCustom.addVideoLikeCount(videoId);

        // 3. 用户受喜欢数量的累加
        usersMapper.addReceiveLikeCount(videoCreaterId);


    }

    @Override
    public void userUnLikeVideo(String userId, String videoId, String videoCreaterId) {

        // 1. 删除用户和视频的喜欢点赞关联关系表

        Example example = new Example(UsersLikeVideos.class);
        Example.Criteria criteria = example.createCriteria();

        criteria.andEqualTo("userId", userId);
        criteria.andEqualTo("videoId", videoId);

        usersLikeVideosMapper.deleteByExample(example);

        // 2. 视频喜欢数量累减
        videosMapperCustom.reduceVideoLikeCount(videoId);

        // 3. 用户受喜欢数量的累减
        usersMapper.reduceReceiveLikeCount(videoCreaterId);
    }

三、前端

前端首先获取当前的用户是否喜欢该视频的信息，然后在用户点击后触发likeVideoOrNot事件，根据获取的{{userLikeVideo}}值按照对应Url向后台发送request请求,后台数据库操作成功后，后台向前端发送回调函数，调整{{userLikeVideo}}的值进而改变前端“点赞”显示。

//index.wxml

    <!-- 喜欢收藏按钮 -->
      <block wx:if="{{userLikeVideo}}">
        <cover-image class="size-me" src='../resource/images/like.png' style='margin-top:30rpx;'
          bindtap='likeVideoOrNot'></cover-image>
      </block>
      <block wx:else>
        <cover-image class="size-me" src='../resource/images/unlike.png' style='margin-top:30rpx;'
          bindtap='likeVideoOrNot'></cover-image>
      </block>

//index.js

 likeVideoOrNot: function () {
    var me = this;
    var videoInfo = me.data.videoInfo;
    var user = app.getGlobalUserInfo();

    if (user == null || user == undefined || user == '') {
      wx.navigateTo({
        url: '../userLogin/login',
      })
    } else {
      
      var userLikeVideo = me.data.userLikeVideo;
      var url = '/video/userLike?userId=' + user.id + '&videoId=' + videoInfo.id + '&videoCreaterId=' + videoInfo.userId;
      if (userLikeVideo) {
        url = '/video/userUnLike?userId=' + user.id + '&videoId=' + videoInfo.id + '&videoCreaterId=' + videoInfo.userId;
      }

      var serverUrl = app.serverUrl;
      wx.showLoading({
        title: '...',
      })
      wx.request({
        url: serverUrl + url,
        method: 'POST',
        header: {
          'content-type': 'application/json', // 默认值
          'headerUserId': user.id,
          'headerUserToken': user.userToken
        },
        success:function(res) {   //回调函数
          wx.hideLoading();
          me.setData({
            userLikeVideo: !userLikeVideo
          });
        }
      })


    }
  }