「小程序JAVA實戰」小程序的關注功能（65）

在個人頁面，根據發布者個人和個人的信息來進行展示，如果是發布者，可以進行關注和取消關注。源碼：https://github.com/limingios/wxProgram.git?中No.15和springboot

后端開發

涉及2漲表，一個關聯表，個人和粉絲的關聯表，用戶表。

UsersMapper.java

package?com.idig8.mapper;import?com.idig8.pojo.Users;import?com.idig8.utils.MyMapper;public?interface?UsersMapper?extends?MyMapper<Users>?{????public?void?addReceiveLikeCount(String?userId);????
????public?void?reduceReceiveLikeCount(String?userId);????
????/**
?????*?@Description:?增加粉絲數
?????*/
????public?void?addFansCount(String?userId);????
????/**
?????*?@Description:?增加關注數
?????*/
????public?void?addFollersCount(String?userId);????
????/**
?????*?@Description:?減少粉絲數
?????*/
????public?void?reduceFansCount(String?userId);????
????/**
?????*?@Description:?減少關注數
?????*/
????public?void?reduceFollersCount(String?userId);

}

UsersMapper.xml

<?xml?version="1.0"?encoding="UTF-8"??><!DOCTYPE?mapper?PUBLIC?"-//mybatis.org//DTD?Mapper?3.0//EN"?"http://mybatis.org/dtd/mybatis-3-mapper.dtd"?><mapper?namespace="com.idig8.mapper.UsersMapper"?>
??<resultMap?id="BaseResultMap"?type="com.idig8.pojo.Users"?>
????<!--
??????WARNING?-?@mbg.generated
????-->
????<id?column="id"?property="id"?jdbcType="VARCHAR"?/>
????<result?column="username"?property="username"?jdbcType="VARCHAR"?/>
????<result?column="password"?property="password"?jdbcType="VARCHAR"?/>
????<result?column="face_image"?property="faceImage"?jdbcType="VARCHAR"?/>
????<result?column="nickname"?property="nickname"?jdbcType="VARCHAR"?/>
????<result?column="fans_counts"?property="fansCounts"?jdbcType="INTEGER"?/>
????<result?column="follow_counts"?property="followCounts"?jdbcType="INTEGER"?/>
????<result?column="receive_like_counts"?property="receiveLikeCounts"?jdbcType="INTEGER"?/>
??</resultMap>
??
??<update?id="addReceiveLikeCount"?parameterType="String">
????update?users?set?receive_like_counts?=?receive_like_counts+1?where?id=#{userId}??</update>
??
????<update?id="reduceReceiveLikeCount"?parameterType="String">
????update?users?set?receive_like_counts?=?receive_like_counts-1?where?id=#{userId}??</update>
??
???<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>
??</mapper>

UserController.java

package?com.idig8.controller;import?org.apache.commons.lang3.StringUtils;import?org.springframework.beans.BeanUtils;import?org.springframework.beans.factory.annotation.Autowired;import?org.springframework.beans.factory.annotation.Value;import?org.springframework.web.bind.annotation.PostMapping;import?org.springframework.web.bind.annotation.RequestMapping;import?org.springframework.web.bind.annotation.RequestParam;import?org.springframework.web.bind.annotation.RestController;import?org.springframework.web.multipart.MultipartFile;import?com.idig8.pojo.Users;import?com.idig8.pojo.vo.PublisherVideo;import?com.idig8.pojo.vo.UsersVO;import?com.idig8.service.UserService;import?com.idig8.utils.JSONResult;import?com.idig8.utils.file.FileUtil;import?io.swagger.annotations.Api;import?io.swagger.annotations.ApiImplicitParam;import?io.swagger.annotations.ApiImplicitParams;import?io.swagger.annotations.ApiOperation;import?io.swagger.annotations.ApiParam;@RestController@Api(value="用戶接口",tags={"用戶的controller"})@RequestMapping(value?=?"/user")public?class?UserController?extends?BasicController{????
????@Autowired
????private?UserService?userService;????
????@Value("${server.file.path}")????private?String?fileSpace;????
????@ApiOperation(value="用戶上傳頭像",notes="用戶上傳頭像的接口")????@ApiImplicitParams({????????@ApiImplicitParam(name="userId",value="用戶id",required=true,dataType="String",paramType="query"),
????})????@PostMapping(value="/uploadFace",headers="content-type=multipart/form-data")????public?JSONResult?uploadFace(String?userId,@ApiParam(value="圖片",required=true)?MultipartFile?file)?{????????if?(StringUtils.isBlank(userId))?{????????????return?JSONResult.errorMsg("用戶id不能為空...");
????????}????????
????????//?文件保存的命名空間
????????String?fileName?=?file.getOriginalFilename();????????//?保存到數據庫中的相對路徑
????????String?path?=?"";?????????try?{
?????????????path?=?FileUtil.uploadFile(file.getBytes(),?fileSpace,?fileName);
????????????}?catch?(Exception?e)?{
????????????????e.getStackTrace();????????????????return?JSONResult.errorMsg(e.getMessage());
????????????}
?????????
?????????Users?user?=?new?Users();
?????????user.setId(userId);
?????????user.setFaceImage(path);
?????????userService.updateUser(user);????????
????
????????return?JSONResult.ok(path);
????}????
????@ApiOperation(value="通過用戶Id獲取用戶信息",notes="通過用戶Id獲取用戶信息的接口")????@ApiImplicitParam(name="userId",value="用戶id",required=true,dataType="String",paramType="query")????@PostMapping("/queryByUserId")????public?JSONResult?queryByUserId(String?userId,?String?fanId)?{????????if?(StringUtils.isBlank(userId))?{????????????return?JSONResult.errorMsg("用戶id不能為空...");
????????}
????????
????????Users?user?=?userService.queryUserId(userId);
????????UsersVO?usersVO=?new?UsersVO();
????????BeanUtils.copyProperties(user,?usersVO);
????????
????????usersVO.setFollow(userService.queryIfFollow(userId,?fanId));????????return?JSONResult.ok(usersVO);
????}????
????@PostMapping("/queryPublisher")????public?JSONResult?queryPublisher(String?loginUserId,?String?videoId,?
????????????String?publishUserId)?throws?Exception?{????????
????????if?(StringUtils.isBlank(publishUserId))?{????????????return?JSONResult.errorMsg("");
????????}????????
????????//?1.?查詢視頻發布者的信息
????????Users?userInfo?=?userService.queryUserInfo(publishUserId);
????????UsersVO?publisher?=?new?UsersVO();
????????BeanUtils.copyProperties(userInfo,?publisher);????????
????????//?2.?查詢當前登錄者和視頻的點贊關系
????????boolean?userLikeVideo?=?userService.isUserLikeVideo(loginUserId,?videoId);
????????
????????PublisherVideo?bean?=?new?PublisherVideo();
????????bean.setPublisher(publisher);???
????????bean.setUserLikeVideo(userLikeVideo);????????
????????return?JSONResult.ok(bean);
????}????
????
????@PostMapping("/beyourfans")????public?JSONResult?beyourfans(String?userId,?String?fanId)?throws?Exception?{????????
????????if?(StringUtils.isBlank(userId)?||?StringUtils.isBlank(fanId))?{????????????return?JSONResult.errorMsg("");
????????}
????????
????????userService.saveUserFanRelation(userId,?fanId);????????
????????return?JSONResult.ok("關注成功...");
????}????
????@PostMapping("/dontbeyourfans")????public?JSONResult?dontbeyourfans(String?userId,?String?fanId)?throws?Exception?{????????
????????if?(StringUtils.isBlank(userId)?||?StringUtils.isBlank(fanId))?{????????????return?JSONResult.errorMsg("");
????????}
????????
????????userService.deleteUserFanRelation(userId,?fanId);????????
????????return?JSONResult.ok("取消關注成功...");
????}
????

}

UserService.java

package?com.idig8.service;import?com.idig8.pojo.Users;public?interface?UserService?{????/**
?????*?判斷用戶名是否存在
?????*?@param?username
?????*?@return
?????*/
????public?boolean?queryUsernameIsExist(String?username);????
????/**
?????*?保存用戶
?????*?@param?user
?????*?@return
?????*/
????public?void?saveUser(Users?user);????
????/**
?????*?查詢用戶對象
?????*?@param?username
?????*?@return
?????*/
????public?Users?queryUserIsExist(Users?user);????
????/**
?????*?更新對象
?????*?@param?username
?????*?@return
?????*/
????public?void?updateUser(Users?user);????
????
????/**
?????*?userId查詢用戶對象
?????*?@param?username
?????*?@return
?????*/
????public?Users?queryUserId(String?userId);????
????/**
?????*?查詢用戶信息
?????*/
????public?Users?queryUserInfo(String?userId);????
????/**
?????*?查詢用戶是否喜歡點贊視頻
?????*/
????public?boolean?isUserLikeVideo(String?userId,?String?videoId);????
????/**
?????*?@Description:?增加用戶和粉絲的關系
?????*/
????public?void?saveUserFanRelation(String?userId,?String?fanId);????
????/**
?????*?@Description:?刪除用戶和粉絲的關系
?????*/
????public?void?deleteUserFanRelation(String?userId,?String?fanId);????
????/**
?????*?@Description:?查詢用戶是否關注
?????*/
????public?boolean?queryIfFollow(String?userId,?String?fanId);
????
????
}

UserServiceImpl.java

package?com.idig8.service.Impl;import?java.util.List;import?org.apache.commons.lang3.StringUtils;import?org.n3r.idworker.Sid;import?org.springframework.beans.factory.annotation.Autowired;import?org.springframework.stereotype.Service;import?org.springframework.transaction.annotation.Propagation;import?org.springframework.transaction.annotation.Transactional;import?com.idig8.mapper.UsersFansMapper;import?com.idig8.mapper.UsersLikeVideosMapper;import?com.idig8.mapper.UsersMapper;import?com.idig8.pojo.Users;import?com.idig8.pojo.UsersFans;import?com.idig8.pojo.UsersLikeVideos;import?com.idig8.service.UserService;import?com.idig8.utils.MD5Utils;import?tk.mybatis.mapper.entity.Example;import?tk.mybatis.mapper.entity.Example.Criteria;@Servicepublic?class?UserServiceImpl?implements?UserService?{????@Autowired
????private?UsersMapper?usersMapper;????
????@Autowired
????private?UsersLikeVideosMapper?usersLikeVideosMapper;????
????@Autowired
????private?UsersMapper?userMapper;????
????@Autowired
????private?Sid?sid;????
????@Autowired
????private?UsersFansMapper?usersFansMapper;????
????@Transactional(propagation?=Propagation.SUPPORTS)????@Override
????public?boolean?queryUsernameIsExist(String?username)?{
????????Users?user?=?new?Users();
????????user.setUsername(username);
????????Users?result?=?usersMapper.selectOne(user);????????return?result==null??false:true;
????}????@Transactional(propagation?=Propagation.REQUIRED)????@Override
????public?void?saveUser(Users?user)?{
????????String?userId?=sid.nextShort();
????????user.setId(userId);
????????usersMapper.insert(user);
????}????@Transactional(propagation?=Propagation.SUPPORTS)????@Override
????public?Users?queryUserIsExist(Users?user)?{
????????Example?queryExample?=?new?Example(Users.class);
????????Criteria?criteria?=?queryExample.createCriteria();
????????criteria.andEqualTo("username",user.getUsername());????????try?{
????????????criteria.andEqualTo("password",MD5Utils.getMD5Str(user.getPassword()));
????????}?catch?(Exception?e)?{????????????//?TODO?Auto-generated?catch?block
????????????e.printStackTrace();
????????}
????????Users?userOne?=??usersMapper.selectOneByExample(queryExample);????????return?userOne;
????}????
????@Transactional(propagation?=Propagation.REQUIRED)????@Override
????public?void?updateUser(Users?user)?{
????????
????????Example?userExample?=?new?Example(Users.class);
????????Criteria?criteria?=?userExample.createCriteria();
????????criteria.andEqualTo("id",?user.getId());
????????usersMapper.updateByExampleSelective(user,?userExample);
????}????
????@Transactional(propagation?=Propagation.SUPPORTS)????@Override
????public?Users?queryUserId(String?userId){
????????Example?queryExample?=?new?Example(Users.class);
????????Criteria?criteria?=?queryExample.createCriteria();
????????criteria.andEqualTo("id",userId);
????????Users?userOne?=??usersMapper.selectOneByExample(queryExample);????????return?userOne;
????}????
????@Transactional(propagation?=?Propagation.SUPPORTS)????@Override
????public?Users?queryUserInfo(String?userId)?{
????????Example?userExample?=?new?Example(Users.class);
????????Criteria?criteria?=?userExample.createCriteria();
????????criteria.andEqualTo("id",?userId);
????????Users?user?=?userMapper.selectOneByExample(userExample);????????return?user;
????}????@Transactional(propagation?=?Propagation.SUPPORTS)????@Override
????public?boolean?isUserLikeVideo(String?userId,?String?videoId)?{????????if?(StringUtils.isBlank(userId)?||?StringUtils.isBlank(videoId))?{????????????return?false;
????????}
????????
????????Example?example?=?new?Example(UsersLikeVideos.class);
????????Criteria?criteria?=?example.createCriteria();
????????
????????criteria.andEqualTo("userId",?userId);
????????criteria.andEqualTo("videoId",?videoId);
????????
????????List<UsersLikeVideos>?list?=?usersLikeVideosMapper.selectByExample(example);????????
????????if?(list?!=?null?&&?list.size()?>0)?{????????????return?true;
????????}????????
????????return?false;
????}????@Transactional(propagation?=?Propagation.REQUIRED)????@Override
????public?void?saveUserFanRelation(String?userId,?String?fanId)?{

????????String?relId?=?sid.nextShort();
????????
????????UsersFans?userFan?=?new?UsersFans();
????????userFan.setId(relId);
????????userFan.setUserId(userId);
????????userFan.setFanId(fanId);
????????
????????usersFansMapper.insert(userFan);
????????
????????userMapper.addFansCount(userId);
????????userMapper.addFollersCount(fanId);
????????
????}????@Transactional(propagation?=?Propagation.REQUIRED)????@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);
????????
????}????

????@Override
????public?boolean?queryIfFollow(String?userId,?String?fanId)?{

????????Example?example?=?new?Example(UsersFans.class);
????????Criteria?criteria?=?example.createCriteria();
????????
????????criteria.andEqualTo("userId",?userId);
????????criteria.andEqualTo("fanId",?fanId);
????????
????????List<UsersFans>?list?=?usersFansMapper.selectByExample(example);????????
????????if?(list?!=?null?&&?!list.isEmpty()?&&?list.size()?>?0)?{????????????return?true;
????????}????????
????????return?false;
????}

}

前端小程序

<view>

??<view?class='container'>
??????<image?src="{{faceImage}}"?class="face"?bindtap='uploadFace'></image>
????<label?class='nickname'>{{nickname}}</label>

????<block?wx:if='{{isMe}}'>
??????<button?size='mini'?class='primary'?bindtap='uploadVideo'>?上傳作品</button>
??????<button?size='mini'?type=''?class='logout'?bindtap='logout'>注銷</button>
????</block>
????<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>

????<view?class='container-row'>
??????<label?class='info-items'>{{fansCounts}}?粉絲</label>
??????<label?class='info-items'>{{followCounts}}?關注</label>
??????<label?class='info-items'>{{receiveLikeCounts}}?獲贊</label>
????</view>
??</view></view><view?class="line"></view>

//?pages/mine/mine.jsconst?app?=?getApp()var?videoUtils?=?require('../../utils/videoUtils.js')
Page({??/**
???*?頁面的初始數據
???*/
??data:?{????faceImage:?"../../resource/images/noneface.png",????nickname:?"昵稱",????fansCounts:?0,????followCounts:?0,????receiveLikeCounts:?0,????isMe:true,????isFollow:false,????publisherId:?''
??},??/**
???*?用戶注銷
???*/
??logout:?function(e)?{????var?user?=?app.getGlobalUserInfo();
????wx.showLoading({??????title:?'正在注銷中。。。'
????});




????wx.request({??????url:?app.serverUrl?+?"/logout?userId="?+?user.id,??????method:?"POST",??????header:?{????????'content-type':?'application/json'?//?默認值
??????},??????success:?function(res)?{????????console.log(res.data);????????var?status?=?res.data.status;
????????wx.hideLoading();????????if?(status?==?200)?{
??????????wx.showToast({????????????title:?"用戶注銷成功~！",????????????icon:?'none',????????????duration:?3000
??????????})??????????//?app.userInfo?=?null;
??????????wx.removeStorageSync("userInfo");
??????????wx.redirectTo({????????????url:?'../userRegister/userRegister',
??????????})

????????}?else?if?(status?==?500)?{
??????????wx.showToast({????????????title:?res.data.msg,????????????icon:?'none',????????????duration:?3000
??????????})
????????}
??????}
????})
??},??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;????//?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
??????????})
????????}
??????}
????})
??},??/**
???*?頭像上傳
???*/
??uploadFace:?function(e)?{????//?var?user?=?app.userInfo;
????var?user?=?app.getGlobalUserInfo();????var?me?=?this;
????wx.chooseImage({??????count:?1,?//?默認9
??????sizeType:?['compressed'],?//?可以指定是原圖還是壓縮圖，默認二者都有
??????sourceType:?['album',?'camera'],?//?可以指定來源是相冊還是相機，默認二者都有
??????success:?function(res)?{????????//?返回選定照片的本地文件路徑列表，tempFilePath可以作為img標簽的src屬性顯示圖片
????????var?tempFilePaths?=?res.tempFilePaths????????if?(tempFilePaths.length?>?0)?{??????????console.log(tempFilePaths[0]);
??????????wx.uploadFile({????????????url:?app.serverUrl?+?"/user/uploadFace?userId="?+?user.id,?//僅為示例，非真實的接口地址
????????????filePath:?tempFilePaths[0],????????????name:?'file',????????????success:?function(res)?{??????????????var?data?=?JSON.parse(res.data);??????????????console.log(data);
??????????????wx.hideLoading();??????????????if?(data.status?==?200)?{
????????????????wx.showToast({??????????????????title:?"用戶上傳成功~！",??????????????????icon:?'none',??????????????????duration:?3000
????????????????})
????????????????me.setData({??????????????????faceUrl:?app.serverUrl?+?data.data
????????????????})


??????????????}?else?if?(data.status?==?500)?{
????????????????wx.showToast({??????????????????title:?data.msg,??????????????????icon:?'none',??????????????????duration:?3000
????????????????})
??????????????}
????????????}
??????????})
????????}

??????}
????})
??},??/**
???*?生命周期函數--監聽頁面加載
???*/
??onLoad:?function(params)?{????var?me?=?this;????var?userInfo?=?app.getGlobalUserInfo();????var?publisherId?=?params.publisherId;????var?userId?=?userInfo.id;????if?(publisherId?!=?null?&&?publisherId?!=?''?&&?publisherId!=undefined){
??????userId?=?publisherId;
??????me.setData({????????isMe:false,????????publisherId:?publisherId,
??????})
????}

??
????wx.showLoading({??????title:?'正在獲取用戶信息。。。'
????});
????wx.request({??????url:?app.serverUrl?+?"/user/queryByUserId?userId="?+?userId?+?"&fanId"?+?userInfo.id,??????method:?"POST",??????header:?{????????'content-type':?'application/json',?//?默認值
????????'headerUserId':?userInfo.id,????????'headerUserToken':?userInfo.userToken
??????},??????success:?function(res)?{????????console.log(res.data);????????var?status?=?res.data.status;????????if?(status?==?200)?{??????????var?userInfo?=?res.data.data;
??????????wx.hideLoading();??????????var?faceImage?=?me.data.faceUrl;??????????if?(userInfo.faceImage?!=?null?&&?userInfo.faceImage?!=?''?&&?userInfo.faceImage?!=?undefined)?{
????????????faceImage?=?app.serverUrl?+?userInfo.faceImage;
??????????}

??????????me.setData({????????????faceImage:?faceImage,????????????fansCounts:?userInfo.fansCounts,????????????followCounts:?userInfo.followCounts,????????????receiveLikeCounts:?userInfo.receiveLikeCounts,????????????nickname:?userInfo.nickname,????????????isFollow:?userInfo.follow

??????????})
????????}?else?if?(status?==?502){
??????????wx.showToast({????????????title:?res.data.msg,????????????duration:3000,????????????icon:'none',????????????complete:function(){
??????????????wx.removeStorageSync("userInfo");

??????????????wx.navigateTo({????????????????url:?'../userLogin/userLogin',
??????????????})
????????????}
??????????})
??????????
????????}
??????}
????})
??},??uploadVideo:?function(e)?{
????videoUtils.uploadVideo();
??},??/**
???*?生命周期函數--監聽頁面初次渲染完成
???*/
??onReady:?function()?{

??},??/**
???*?生命周期函數--監聽頁面顯示
???*/
??onShow:?function()?{

??},??/**
???*?生命周期函數--監聽頁面隱藏
???*/
??onHide:?function()?{

??},??/**
???*?生命周期函數--監聽頁面卸載
???*/
??onUnload:?function()?{

??},??/**
???*?頁面相關事件處理函數--監聽用戶下拉動作
???*/
??onPullDownRefresh:?function()?{

??},??/**
???*?頁面上拉觸底事件的處理函數
???*/
??onReachBottom:?function()?{

??},??/**
???*?用戶點擊右上角分享
???*/
??onShareAppMessage:?function()?{

??}
})

PS：關注跟點贊類似也是操作后端的幾張表來完成的，重點是前端需要判斷狀態，來進行顯示對應的按鈕，其實小程序把邏輯都給了前端。data里面的操作靈活的運用，業務邏輯的梳理。