「小程式JAVA實戰」小程式的關注功能（64）

摘要： 在個人頁面，根據釋出者個人和個人的資訊來進行展示，如果是釋出者，可以進行關注和取消關注。 後端開發 涉及2漲表，一個關聯表，個人和粉絲的關聯表，使用者表。 UsersMapper.java package com.idig8.mapper; import com.idig8....

在個人頁面，根據釋出者個人和個人的資訊來進行展示，如果是釋出者，可以進行關注和取消關注。

後端開發

涉及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;

@Service
public 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.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, // 預設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裡面的操作靈活的運用，業務邏輯的梳理。

ofollow,noindex" target="_blank" href="http://zhanzhang.baidu.com/sitesubmit/index?sitename=https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/">百度未收錄

>>原創文章，歡迎轉載。轉載請註明：轉載自IT人故事會，謝謝！

>>原文連結地址：