在个人页面,根据发布者个人和个人的信息来进行展示,如果是发布者,可以进行关注和取消关注。源码: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里面的操作灵活的运用,业务逻辑的梳理。