转自:https://idig8.com/2018/09/09/xiaochengxujavashizhanxiaochengxutouxiangtupianshangchuan44/

接下来,我们应该通过用户的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:这个小程序获取用户信息和后端的一个联调。

「小程序JAVA实战」小程序头像图片上传(下)(45)的更多相关文章

  1. 「小程序JAVA实战」小程序的举报功能开发(68)

    转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...

  2. 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...

  3. 「小程序JAVA实战」小程序的关注功能(65)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...

  4. 「小程序JAVA实战」小程序的视频点赞功能开发(62)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...

  5. 「小程序JAVA实战」小程序的springboot后台拦截器(61)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudespringboothoutailanjieqi60/ 之前咱们把 ...

  6. 「小程序JAVA实战」小程序首页视频(49)

    转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxushouyeshipin48/ 视频显示的内容是视频的截图,用户的头像 ...

  7. 「小程序JAVA实战」小程序视频封面处理(48)

    转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinfengmianchuli47/ 截图这块,在微信小程序工 ...

  8. 「小程序JAVA实战」小程序上传短视频(46)

    转自:https://idig8.com/2018/09/14/xiaochengxujavashizhanxiaochengxushangchuanduanshipin45/ 个人信息:用户上传短视 ...

  9. 「小程序JAVA实战」小程序头像图片上传(上)(43)

    转自:https://idig8.com/2018/09/08/xiaochengxujavashizhanxiaochengxutouxiangtupianshangchuan40/ 在微信小程序中 ...

随机推荐

  1. 在mac os x 下升级emacs

    大概是09年的时候接触到emacs这个编辑器,当时我们c语言老师用的,他自信满满,而那时我是个vimer,所以每次看他按那么多组合键我就替他感觉手指头累啊. 再后来我用了几年vim写代码,再后来用了许 ...

  2. Django(一):从socket到MVC

    一.socket的http套路 web应用本质上是一个socket服务端,用户的浏览器是一个socket客户端.socket处在应用层与传输层之间,是操作系统中I/O系统的延伸部分(接口),负责系统进 ...

  3. python笔记-9(subprocess模块、面向对象、socket入门)

    一.subprocess 模块 1.了解os.system()与os.popen的区别及不足 1.1 os.system()可以执行系统指令,将结果直接输出到屏幕,同时可以将指令是否执行成功的状态赋值 ...

  4. LeetCode 755. Pour Water

    原题链接在这里:https://leetcode.com/problems/pour-water/description/ 题目: We are given an elevation map, hei ...

  5. JavaScript:基本包装类型

    为了方便操作,JavaScript提供了3个特殊的引用类型:Boolean.Number和String.实际上,每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而可以调用这些 ...

  6. BZOJ4547 Hdu5171 小奇的集合

    题意 有一个大小为n的可重集S,小奇每次操作可以加入一个数a+b(a,b均属于S),求k次操作后它可获得的S的和的最大值.(数据保证这个值为非负数) 对于100%的数据,有 n<=10^5,k& ...

  7. vim中的加密文件

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/sxhelijian/article/details/32911665 用vim编辑程序. 要连续输入 ...

  8. POJ2564:Edit Step Ladders

    浅谈\(Trie\):https://www.cnblogs.com/AKMer/p/10444829.html 题目传送门:http://poj.org/problem?id=2564 记\(f[i ...

  9. JavaSE 手写 Web 服务器(一)

    原文地址:JavaSE 手写 Web 服务器(一) 博客地址:http://www.extlight.com 一.背景 某日,在 Java 技术群中看到网友讨论 tomcat 容器相关内容,然后想到自 ...

  10. App测试工具

    1.App性能测试与安全测试工具 性能测试工具:Itest(众测平台) 安全测试:Utest