在个人页面，根据发布者个人和个人的信息来进行展示，如果是发布者，可以进行关注和取消关注。源码：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{@Autowiredprivate 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;@Service
public class UserServiceImpl implements UserService {@Autowiredprivate UsersMapper usersMapper;@Autowiredprivate UsersLikeVideosMapper usersLikeVideosMapper;@Autowiredprivate UsersMapper userMapper;@Autowiredprivate Sid sid;@Autowiredprivate UsersFansMapper usersFansMapper;@Transactional(propagation =Propagation.SUPPORTS)@Overridepublic 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)@Overridepublic void saveUser(Users user) {String userId =sid.nextShort();user.setId(userId);usersMapper.insert(user);}@Transactional(propagation =Propagation.SUPPORTS)@Overridepublic 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 blocke.printStackTrace();}Users userOne =  usersMapper.selectOneByExample(queryExample);return userOne;}@Transactional(propagation =Propagation.REQUIRED)@Overridepublic 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)@Overridepublic 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)@Overridepublic 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)@Overridepublic 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)@Overridepublic 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)@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);}@Overridepublic 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.js
const 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, // 默认9sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function(res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePathsif (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里面的操作灵活的运用，业务逻辑的梳理。