接下來，我們應該通過用戶的id，調用後端的接口，查詢出來點讚的數量，關注的數量，粉絲數量，直接更新頭像圖片。源碼：https://github.com/limingios/wxProgram.git 中wx-springboot 和 No.15
後端開發
spring boot-service 增加通過user的id，獲得Users的方法
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);
}
UserServiceImpl.java
package com.idig8.service;
import org.n3r.idworker.Sid;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.security.SecurityProperties.User;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;
import com.idig8.mapper.UsersMapper;
import com.idig8.pojo.Users;
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 Sid sid;
@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;
}
}
spring boot -api 中 在UserController中添加方法
增加controller 接口，傳遞user中的id參數
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.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;
@RestController
@Api(value="用戶接口",tags={"用戶的controller"})
@RequestMapping(value = "/user")
public class UserController extends BasicController{
@Autowired
private UserService userService;
@Value("${server.face.path}")
private String fileSpace;
@ApiOperation(value="用戶上傳頭像",notes="用戶上傳頭像的接口")
@ApiImplicitParams({
@ApiImplicitParam(name="userId",value="用戶id",required=true,dataType="String",paramType="query"),
@ApiImplicitParam(name="file",value="文件上傳",required=true,dataType="String",paramType="query"),
})
@PostMapping("/uploadFace")
public JSONResult uploadFace(String userId,@RequestParam("file") 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) {
if (StringUtils.isBlank(userId)) {
return JSONResult.errorMsg("用戶id不能爲空...");
}
Users user = userService.queryUserId(userId);
UsersVO usersVO= new UsersVO();
BeanUtils.copyProperties(user, usersVO);
return JSONResult.ok(usersVO);
}
}
運行後端項目，查看swagger2的效果
小程序開發
主要通過的是小程序生命週期中的onload方法，當進入頁面的時候請求後臺獲取信息，用於頁面的展示。
// pages/mine/mine.js
const app = getApp()
Page({
/**
* 頁面的初始數據
*/
data: {
faceImage: "../../resource/images/noneface.png",
nickname: "暱稱",
fansCounts: 0,
followCounts: 0,
receiveLikeCounts: 0,
},
/**
* 用戶註銷
*/
logout:function(e){
var user = app.userInfo;
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.redirectTo({
url: '../userRegister/userRegister',
})
} else if (status == 500) {
wx.showToast({
title: res.data.msg,
icon: 'none',
duration: 3000
})
}
}
})
},
/**
* 頭像上傳
*/
uploadFace:function(e){
var user = app.userInfo;
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 (options) {
var me = this;
wx.showLoading({
title: '正在獲取用戶信息。。。'
});
wx.request({
url: app.serverUrl + "/user/queryByUserId?userId=" + app.userInfo.id,
method: "POST",
header: {
'content-type': 'application/json' // 默認值
},
success: function (res) {
console.log(res.data);
var status = res.data.status;
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
})
}
})
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
PS：這個小程序獲取用戶信息和後端的一個聯調。