第9讲用户信息修改实现

用户信息修改实现

后端修改用户昵称：

/*** 更新用户昵称* @param wxUserInfo* @param token* @return*/
@RequestMapping("/updateNickName")
public R updateNickName(@RequestBody WxUserInfo wxUserInfo,@RequestHeader String token){if(StringUtil.isNotEmpty(wxUserInfo.getNickName())) {Claims claims = JwtUtils.validateJWT(token).getClaims();wxUserInfoService.update(new UpdateWrapper<WxUserInfo>().eq("openid", claims.getId()).set("nick_name", wxUserInfo.getNickName()));}return R.ok();
}

前端修改用户昵称：

<input type="nickname"  placeholder="请输入昵称" v-model="userInfo.nickName" @blur="onChangeNickName"/>

			onChangeNickName:async function(e){console.log(e.detail.value);let nickName=e.detail.value;if(!isEmpty(nickName)){const result=await requestUtil({url:"/user/updateNickName",data:{nickName:nickName},method:"post"});}}

export const isEmpty=(str)=>{if(str === '' || str.trim().length === 0 ){return true}else{return false;}
}

头像上传 后端：

定义上传路径：

userImagesFilePath: D://uniapp/userImgs/

@Value("${userImagesFilePath}")
private String userImagesFilePath;

/*** 上传用户头像图片* @param userImage* @return* @throws Exception*/
@RequestMapping("/uploadUserImage")
public Map<String,Object> uploadUserImage(MultipartFile userImage, @RequestHeader String token)throws Exception{System.out.println("filename:"+userImage.getName());Map<String,Object> resultMap=new HashMap<>();if(!userImage.isEmpty()){// 获取文件名String originalFilename = userImage.getOriginalFilename();String suffixName=originalFilename.substring(originalFilename.lastIndexOf("."));String newFileName= DateUtil.getCurrentDateStr()+suffixName;FileUtils.copyInputStreamToFile(userImage.getInputStream(),new File(userImagesFilePath+newFileName));resultMap.put("code",0);resultMap.put("msg","上传成功");resultMap.put("userImageFileName",newFileName);// 更新到数据库UpdateWrapper<WxUserInfo> updateWrapper=new UpdateWrapper<>();Claims claims = JwtUtils.validateJWT(token).getClaims();updateWrapper.eq("openid",claims.getId()).set("avatar_url",newFileName);wxUserInfoService.update(new UpdateWrapper<WxUserInfo>().eq("openid",claims.getId()).set("avatar_url",newFileName));}return resultMap;
}

前端头像实现：

button上加下 open-type=“chooseAvatar”

		onChooseAvatar:function(e){console.log(e.detail.avatarUrl)uni.uploadFile({header:{token:uni.getStorageSync("token")},url:getBaseUrl()+"/user/uploadUserImage",filePath:e.detail.avatarUrl,name:"userImage",success: (res) => {let result=JSON.parse(res.data);if(result.code==0){this.userInfo.avatarUrl=result.userImageFileName;}}})},

my.vue

<template><view class="user_center"><!-- 用户信息开始 --><view class="user_info_wrap"><!--获取头像--><button class="user_image" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"><image :src="this.baseUrl+'/image/userAvatar/'+userInfo.avatarUrl"></image></button> <view class="user_name"><input type="nickname" placeholder="请输入昵称" v-model="userInfo.nickName" @blur="onChangeNickName"></view></view><!-- 用户信息结束 --><!-- 用户菜单开始 --><view class="user_menu_wrap"><view class="user_menu_item" ><text>我创建的投票</text></view><view class="user_menu_item"   ><text>我参与的投票</text></view></view><!-- 用户菜单结束 --><!-- 用户信息修改开始 --><view class="user_info_modify_wrap"><view class="user_info_modify_wrap_item" ><text>联系小锋老师</text></view></view><!-- 用户信息修改结束 --></view>
</template><script>import {getBaseUrl,requestUtil} from "../../util/requestUtil.js"import {isEmpty} from "../../util/stringUtil.js"export default{data(){return{userInfo:{nickName:'',avatarUrl:''},baseUrl:''}},onShow() {this.getUserInfo()this.baseUrl=getBaseUrl();},methods:{getUserInfo:async function(){const result=await requestUtil({url:'/user/getUserInfo',method:'get'});console.log("result="+result)this.userInfo=result.currentUser;},onChangeNickName:async function(e){console.log(e.detail.value)let nickName=e.detail.value;if(!isEmpty(nickName)){const result=await requestUtil({url:'/user/updateNickName',data:{nickName:nickName},method:'post'});}},onChooseAvatar:function(e){console.log(e.detail.avatarUrl);uni.uploadFile({header:{token:uni.getStorageSync("token")},url:getBaseUrl()+"/user/updateUserImage",filePath:e.detail.avatarUrl,name:"userImage",success: (res) => {let result=JSON.parse(res.data);if(result.code==0){this.userInfo.avatarUrl=result.userImageFileName}}})}}}
</script><style lang="scss">.user_center{.user_info_wrap{width: 100%;height: 120rpx;display: flex;flex-direction: row;background-color: white;padding-left: 50rpx;.user_image{width: 100rpx;height: 100rpx;text-align: center;padding: 0rpx;margin: 0rpx;image{width: 90rpx;height: 90rpx;}}.user_name{display: flex;flex-direction: column;justify-content: center;padding-left: 20rpx;padding-bottom: 15rpx;}}.user_menu_wrap{margin: 15rpx;margin-top: 20rpx;background-color: #fff;.user_menu_item{padding: 20rpx;padding-left: 35rpx;border-bottom: 5rpx solid #F6F6F4;}}.user_info_modify_wrap{margin: 15rpx;margin-top: 20rpx;background-color: #fff;padding: 20rpx 0;padding-left: 35rpx;}}
</style>

注意 id

weixin:jscode2sessionUrl: https://api.weixin.qq.com/sns/jscode2sessionappid: 自己的secret: 自己的userImagesFilePath: D://uniapp/userImgs/

用户信息问题