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

時間 2020-01-25

標籤程序 java 實戰頭像圖片上傳欄目 Java 简体版

原文原文鏈接

接下來，咱們應該經過用戶的id，調用後端的接口，查詢出來點讚的數量，關注的數量，粉絲數量，直接更新頭像圖片。源碼：https://github.com/limingios/wxProgram.git 中wx-springboot 和 No.15java

後端開發

spring boot-service 增長經過user的id，得到Users的方法ios

UserService.javagit

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.javagithub

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中添加方法web

增長controller 接口，傳遞user中的id參數spring

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方法，當進入頁面的時候請求後臺獲取信息，用於頁面的展現。apache

// 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：這個小程序獲取用戶信息和後端的一個聯調。json