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

news2024/11/18 9:39:36

锋哥原创的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.coloradmin.cn/o/1368085.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何通过bat文件启动应用程序

说明&#xff1a;在windows上&#xff0c;任何应用程序都是通过.exe启动的。我们可以通过配置环境的方式&#xff0c;将应用程序的路径配置到环境变量path变量里&#xff0c;这样就可以使用cmd窗口&#xff0c;敲应用程序的名称来启动应用程序。 如下&#xff0c;可启动wps应用…

Vue-8、Vue事件处理

1、点击事件 <!DOCTYPE html> <html lang"en" xmlns:v-model"http://www.w3.org/1999/xhtml" xmlns:v-bind"http://www.w3.org/1999/xhtml"xmlns:v-on"http://www.w3.org/1999/xhtml"> <head><meta charset&quo…

Nginx location 配置 - Part 2

接上文 链接: Nginx 简介和入门 - part1 上文 我们简单地在 nginx 创建了3个虚拟主机&#xff0c; 虽然这个3个主机都是用占用80端口 但是我们可以用不同的域名来实现区分访问3台虚拟主机。 但是&#xff0c; 实际项目上&#xff0c; 我们更加多地会使用location 配置而不是…

Docker实战08|Docker管道及环境变量识别

上一篇文章中&#xff0c;讲解了如何通过Go语言实现对Docker Cgroup的资源限制 具体文章可见《Docker就应该这么学-07》 有需要的小伙伴可以回顾一下。 接下来本文会详细介绍一下Docker 管道及环境变量识别 管道及环境变量识别 获取代码 git clone https://gitee.com/mjr…

物理机部署三节点Kafka集群

一、部署Kafka集群 官方下载地址&#xff1a;http://kafka.apache.org/downloads.html上传安装包到102的/opt/software目录下 解压安装包到/opt/module/目录下&#xff0c;修改解压包名为kafka 修改config目录下的配置文件server.properties内容 #broker的全局唯一编号&#…

【漏洞复现】ActiveMQ文件上传漏洞(CVE-2016-3088)

Nx01 产品简介 Apache ActiveMQ是Apache软件基金会所研发的开放源代码消息中间件。ActiveMQ是消息队列服务&#xff0c;是面向消息中间件&#xff08;MOM&#xff09;的最终实现&#xff0c;它为企业消息传递提供高可用、出色性能、可扩展、稳定和安全保障。 Nx02 漏洞描述 Ap…

excel统计分析——LSD多重比较

参考资料&#xff1a;生物统计学 一篇教你搞定显著性差异分析abcd字母标记法 LSD&#xff08;least significant difference&#xff0c;最小显著差数法&#xff09;是R. A. Fisher提出的&#xff0c;又称为Fisher LSD检验法&#xff0c;是最早用于检验各组均数间两两差异的方…

Unity | 渡鸦避难所-6 | 有限状态机控制角色行为逻辑

1 有限状态机简介 有限状态机&#xff08;英语&#xff1a;finite-state machine&#xff0c;缩写&#xff1a;FSM&#xff09;&#xff0c;简称状态机&#xff0c;是表示有限个状态以及在这些状态之间的转移和动作等行为的数学计算模型 在游戏开发中应用有限状态机&#xff…

NoSQL概述与Redis入门-redis安装与测试

一、Nosql概述 1、为什么使用Nosql 1、单机Mysql时代 90年代,一个网站的访问量一般不会太大&#xff0c;单个数据库完全够用。随着用户增多&#xff0c;网站出现以下问题 数据量增加到一定程度&#xff0c;单机数据库就放不下了数据的索引&#xff08;B Tree&#xff09;,一个…

38.深入MySQL

深入MySQL 索引 索引是关系型数据库中用来提升查询性能最为重要的手段。关系型数据库中的索引就像一本书的目录&#xff0c;我们可以想象一下&#xff0c;如果要从一本书中找出某个知识点&#xff0c;但是这本书没有目录&#xff0c;这将是意见多么可怕的事情&#xff01;我们…

【JaveWeb教程】(16) SpringBootWeb之 分层解耦 详细代码示例讲解

目录 SpringBootWeb请求响应3. 分层解耦3.1 三层架构3.1.1 介绍3.1.2 代码拆分 3.2 分层解耦3.2.1 耦合问题3.2.2 解耦思路 3.3 IOC&DI3.3.1 IOC&DI入门3.3.2 IOC详解3.3.2.1 bean的声明3.3.2.2 组件扫描 3.3.3 DI详解 SpringBootWeb请求响应 3. 分层解耦 3.1 三层架…

【UE Niagara学习笔记】01 - 浮动的蒲公英

目录 效果 步骤 一、创建材质 二、创建Niagara粒子 2.1 创建Niagara模板 2.2 通过用户参数设置粒子大小 2.3 设置数量、风速、透明度变化 2.4 设置粒子旋转 效果 步骤 一、创建材质 1. 在虚幻商城中把“Realistic Starter VFX Pack Vol 2”添加到项目中&#xff…

机器学习周刊 第4期:动手实战人工智能、计算机科学热门论文、免费的基于ChatGPT API的安卓端语音助手、每日数学、检索增强 (RAG) 生成技术综述

LLM开发者必读论文&#xff1a;检索增强&#xff08;RAG&#xff09;生成技术综述&#xff01; 目录&#xff1a; 1、动手实战人工智能 Hands-on Al2、huggingface的NLP、深度强化学习、语音课3、Awesome Jupyter4、计算机科学热门论文5、LLM开发者必读论文:检索增强 (RAG) 生…

用css给宽高不固定的矩形画对角线

.kong{width: 200rpx;height: 76rpx;background: linear-gradient(to bottom right, #E5E5E5 0%, rgba(0, 0, 0, 0.1) calc(50% - 1px),#175CFF 50%, rgba(0, 0, 0, 0.1) calc(50% 1px),rgba(0, 0, 0, 0.1) 100%);}参考&#xff1a; https://blog.csdn.net/weixin_38779534/a…

GCN的使用和包的安装(超详细)

文章目录 工具包安装方法首先进入官网&#xff0c;找到安装包的地址进入后&#xff0c;找到自己的torch版本进入后&#xff0c;将每种对应的包都下载到本地&#xff0c;用本地命令安装然后就是本地安装了最后就是pip install pytorch_geometric 工具包安装方法 一定参考其GITH…

css选择器有哪些?优先级?哪些属性可以继承?

面试官&#xff1a;css选择器有哪些&#xff1f;优先级&#xff1f;哪些属性可以继承&#xff1f; 一、选择器 CSS选择器是CSS规则的第一部分 它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式 选择器所选择的元素&#xff0c;叫做…

web前端(html)练习

第一题 1. 用户名为文本框&#xff0c;名称为 UserName&#xff0c;长度为 15&#xff0c;最大字符数为 20。 2. 密码为密码框&#xff0c;名称为 UserPass&#xff0c;长度为 15&#xff0c;最大字符数为 20。 3. 性别为两个单选按钮&#xff0c;名称为 sex&#xff0c;值分…

苹果Find My查找芯片-伦茨科技ST17H6x支持苹果Find My认证

Apple「查找」Find My可通过庞大的“Apple Find My Network” 实现全球查找功能。无数iOS、iPadOS、macOS、watchOS激活设备与Find My 设备结合在一起&#xff0c;无需连接到Wi-Fi或者蜂窝网络&#xff0c;用户也可以给遗失的设备定位。对于任何iOS、iPadOS、macOS、watchOS设备…

【小白专用】(C#)用户、角色、权限控制体系

我们在开发很多项目的时候,都会用到用户权限管理,我也在很多项目里做过权限控制,所以,我也总结出一套条理清晰的角色权限控制体系。本文采用RBAC&#xff08;Role Based Access Control&#xff09;的基本思想&#xff0c;RBAC&#xff08;角色访问控制&#xff09;的基本思想可…

SpringBoot 中 @Transactional 注解的使用

一、基本介绍 事务管理是应用系统开发中必不可少的一部分。Spring 为事务管理提供了丰富的功能支持。Spring 事务管理分为编程式和声明式的两种方式。本篇只说明声明式注解。 1、在 spring 项目中, Transactional 注解默认会回滚运行时异常及其子类&#xff0c;其它范…