「小程序JAVA實戰」小程序頭像圖片上傳（下）（45）

接下來，我們應該通過用戶的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：這個小程序獲取用戶信息和后端的一個聯調。