第7章 ：视频展示页开发（7-26 点赞与取消点赞后台接口开发 7-27 点赞与取消点赞功能前后端联调）

学习目标：

7-26 点赞与取消点赞后台接口开发
7-27 点赞与取消点赞功能前后端联调

---

学习内容：

7-26 点赞与取消点赞后台接口开发

数据库中关联三个表：

用户喜欢的视频表：

用户所发某视频被喜欢的数量

某用户所有视频被喜欢的总量：

1、在VideosMapperCustom.java中对mapper进行自定义：

	/**
	 * 对视频喜欢的数量进行累加
	 * @param videoId
	 */
	public void addVideoLikeCount(String videoId);
	
	/**
	 * 对视频喜欢的数量进行累减
	 * @param videoId
	 */
	public void reduceVideoLikeCount(String videoId);

2、在自定义mapper的xml中也需要去进行实现：VideosMapperCustom.java的代码如下：

  <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>

3、将用户收到喜欢的总量进行累加或者累减：
在AsayiUsersMapper.java中对mapper进行自定义：

	/**
	 * 用户受喜欢的数量进行累加
	 * @param userId
	 */
	public void addReceiveLikeCount(String userId);
	
	/**
	 * 用户受喜欢的数量进行累减
	 * @param userId
	 */
	public void reduceReceiveLikeCount(String userId);

4、在：AsayiUsersMapper.xml中也需要去进行实现的代码如下：

  <update id="addReceiveLikeCount" parameterType="String">
  update asayi_users set receive_like_counts =receive_like_counts+1 where id=#{
     userId}
  </update>
  
    <update id="reduceReceiveLikeCount" parameterType="String">
  update asayi_users set receive_like_counts =receive_like_counts-1 where id=#{
     userId}
  </update>

4、在VideoService.java中对接口进行完善：

	/**
	 * 用户喜欢视频
	 */
	public void userLikeVideo(String userId,String videoId,String videoCreaterId);
	
	/**
	 * 用户取消点赞视频
	 */
	public void userUnLikeVideo(String userId,String videoId,String videoCreaterId);

5、在VideoServiceImpl.java中对接口进行实现：

@Transactional(propagation = Propagation.REQUIRED)
	@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、用户受喜欢数量的累加
		asayiUsersMapper.addReceiveLikeCount(userId);
		
		
	}

	@Transactional(propagation = Propagation.REQUIRED)
	@Override
	public void userUnLikeVideo(String userId, String videoId, String videoCreaterId) {
     
		
		//1、删除用户和视频的喜欢点赞关联关系表
		Example example=new Example(UsersLikeVideos.class);
		Criteria criteria=example.createCriteria();
		
		criteria.andEqualTo("userId",userId);
		criteria.andEqualTo("videoId",videoId);
		
		usersLikeVideosMapper.deleteByExample(example);
		
		
		//2、视频喜欢数量累减
		videosMapperCustom.reduceVideoLikeCount(videoId);
		
		
		//3、用户受喜欢数量的累减
		asayiUsersMapper.reduceReceiveLikeCount(userId);
		
		
	}

6、完善VideoController.java

	@PostMapping(value = "/userLike")
	public IMoocJSONResult userLike(String userId,String videoId, String videoCreaterId)throws Exception{
     
		videoService.userLikeVideo(userId, videoId, videoCreaterId);
		return IMoocJSONResult.ok();
	}
	
	@PostMapping(value = "/userUnLike")
	public IMoocJSONResult userUnLike(String userId,String videoId, String videoCreaterId)throws Exception{
     
		videoService.userUnLikeVideo(userId, videoId, videoCreaterId);
		return IMoocJSONResult.ok();
	}

7-27 点赞与取消点赞功能前后端联调

1、前端对应代码如下：

            <!-- 喜欢收藏按钮 -->
            <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>

2、编写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){
     
        var 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',//默认值
          'userId':user.id,//用于安全验证的信息
          'userToken':user.userToken
        },
        success:function(res){
     
          wx.hideLoading();
          me.setData({
     
            userLikeVideo:!userLikeVideo
          });


        }
      })


    }

  }