uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -用户信息修改实现

锋哥原创的uniapp微信小程序投票系统实战:

uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )共计21条视频,包括:uniapp微信小程序投票系统实战课程 (SpringBoot2+vue3.2+element plus ) ( 火爆连载更新中... )、第2讲 投票项目后端架构搭建、第3讲 小程序端 TabBar搭建等,UP主更多精彩视频,请关注UP账号。icon-default.png?t=N7T8https://www.bilibili.com/video/BV1ea4y137xf/后端修改用户昵称:

/*** 更新用户昵称* @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;}}})},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/333968.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[ArkUI开发技巧] 应用的全屏式沉浸适配

引言 在开发应用的过程中&#xff0c;为了使用户聚焦在应用本身&#xff0c;最好对应用进行沉浸适配。先前有一种适配方法&#xff0c;将SystemBarProperties设置成应用页面顶部和底部的颜色&#xff0c;但是这种方法在切换页面的过程中过渡十分僵硬&#xff0c;且应用在小窗模…

MySql01:初识

1.mysql数据库2.配置环境变量3. 列的类型和属性&#xff0c;索引&#xff0c;注释3.1 类型3.2 属性3.3 主键(主键索引)3.4 注释 4.结构化查询语句分类&#xff1a;5.列类型--表列类型设置 1.mysql数据库 数据库&#xff1a; ​ 数据仓库&#xff0c;存储数据&#xff0c;以前我…

linux(ubuntu)中drontab定时器命令详解

linux&#xff08;ubuntu&#xff09;中drontab定时器命令详解 crontab 是一个用于创建、编辑和管理用户的定时任务的命令&#xff0c;它可以让用户在指定的时间自动执行指定的命令或脚本。 基本语法 -e&#xff1a;编辑用户的 crontab 文件&#xff1b;-l&#xff1a;列出用…

抖店如何绑定官方账号?实操详解!

我是电商珠珠 都说抖店在开通之后&#xff0c;需要用抖音号去与店铺进行绑定&#xff0c;在绑定官方账号后&#xff0c;就可以为店铺带来更多的曝光&#xff0c;还能免费开通商品橱窗&#xff0c;认证蓝V。 但是有很多人并不了解怎么做&#xff0c;接下来我就来给大家讲讲绑定…

游戏版 ChatGPT,要用 AI 角色完善生成工具实现 NPC 自由

微软与 AI 初创公司 Inworld 合作&#xff0c;推出基于 AI 的角色引擎和 Copilot 助理&#xff0c;旨在提升游戏中 NPC 的交互力和生命力&#xff0c;提升游戏体验。Inworld 致力于打造拥有灵魂的 NPC&#xff0c;通过生成式 AI 驱动 NPC 行为&#xff0c;使其动态响应玩家操作…

软件测试|MySQL SHOW DATABASES详解

简介 在MySQL中&#xff0c;SHOW DATABASES是一条SQL语句&#xff0c;用于显示当前MySQL服务器上所有可用的数据库。这条简单而常用的命令可以让你快速查看服务器上的数据库列表。本文将详细介绍SHOW DATABASES的使用方法以及相关注意事项。 语法 在 MySQL 中&#xff0c;可…

java---变量

变量 什么是变量 在Java中&#xff0c;变量是用于存储数据的一种容器。它可以是不同的数据类型&#xff0c;并且可以在程序执行过程中被赋予不同的值。在Java中&#xff0c;变量需要先声明后使用&#xff0c;并且可以被重新赋值。声明一个变量的语法为&#xff1a;数据类型 变量…

typora 序列号(不使用也可以激活)

解决一下typora不使用序列号也能激活问题。 1.找到typora的安装目录 右击typora图标&#xff0c;点击属性即可看到 2.按照 Typora路径到 —> resources —> page-dist —> static —> js 这个路径找到这两个文件 LicenseIndex.180dd4c7.xxxxxxx.chunk.js License…

详细分析高频的TCP知识点总结

TCP 作为传输层的协议&#xff0c;了解它&#xff0c;拿下它&#xff0c;是一个网络工程师素养的体现&#xff0c;也是面试中经常被问到的知识点。 我们账号之前的文章里也写过不少关于TCP相关的文章&#xff0c;感兴趣的朋友们可以点击下方搜索框进行搜索。 今天&#xff0c…

HuiYong.Online 私有化博客系统

HuiYong.Online 私有化博客系统 一站式支持MarkDown、Drawio、XMind 免费、简单、强大... 用思维导图、流程图、写文章、做笔记、记录生活;搭建自己 / 组织 / 公司的知识储备系统;这里就是你所寻找的。 官网 https://huiyong.online 初心 很喜欢写博客&#xff0c;可以静…

Python从入门到精通 第十一章(面向对象)

一、类和对象 1、面向对象基本概念 &#xff08;1&#xff09;之前学习的编程方式是面向过程的&#xff0c;面向过程和面向对象是两种不同的编程方式。 &#xff08;2&#xff09;过程和函数&#xff1a;过程是早期的一个编程概念&#xff0c;过程类似于函数&#xff0c;只能…

Python办公自动化 – 操作SQLite数据库和数据迁移

Python办公自动化 – 操作SQLite数据库和数据迁移 以下是往期的文章目录&#xff0c;需要可以查看哦。 Python办公自动化 – Excel和Word的操作运用 Python办公自动化 – Python发送电子邮件和Outlook的集成 Python办公自动化 – 对PDF文档和PPT文档的处理 Python办公自动化 –…