【UniApp开发小程序】”我的“界面实现+“信息修改“界面实现+登出账号实现+图片上传组件【基于若依管理系统开发】

news2024/11/24 1:48:22

文章目录

  • 界面实现
    • 界面效果
      • 我的
      • 修改信息
    • “我的”界面实现
      • api
      • 页面
        • 退出账号
        • 让自我介绍只显示一行,结尾多余的字使用...代替
        • 跳转到信息修改页面
    • 信息修改界面实现
      • api
      • 页面
        • 动态给对象设置属性名和值
        • 修改密码
        • 图片上传组件
  • 部分后端代码
    • Controller

界面实现

界面效果

我的

在这里插入图片描述

修改信息

修改信息

在这里插入图片描述
在这里插入图片描述

学校选择

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
校区选择

在这里插入图片描述
性别设置

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

“我的”界面实现

api

login.js

import httpRequest from '@/utils/request'

// 账号退出方法
export function logout() {
  return httpRequest.request({
    url: '/logout',
    method: 'post'
  })
}

logout方法用来向后端发起请求,让后端删除Redis中的登录token

在这里插入图片描述

在这里插入图片描述

user.js

import httpRequest from '@/utils/request'

// 查询用户个人信息Vo
export function getUserProfileVo() {
  return httpRequest.request({
    url: '/system/user/profile/vo',
    method: 'get'
  })
}



// 用户头像上传
export function uploadAvatar(data) {
  return httpRequest.request({
    url: '/system/user/profile/avatar',
    method: 'post',
    data: data
  })
}

页面

<template>
	<view class="container">

		<!-- 头像、昵称展示 -->
		<view class="userDisplay">
			<view class="avatar" @click="this.avatarChangeShow=true">
				<u--image :src="userInfo.avatar" width="60px" height="60px" @click="click" shape="circle"></u--image>
			</view>
			<view class="nameView">
				<view>
					<view style="font-weight: bold;font-size: 36rpx;color: #ffffff;">{{userInfo.nickName}}</view>
					<view style="font-size: 30rpx;display: flex;margin-top: 10rpx;color: #ffffff;">
						<text class="iconfont" style="margin-right: 7rpx;color: #ffffff;">&#xe654;</text>
						<text class="selfIntroductionText"> {{userInfo.selfIntroduction}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="userMessage">
			<view style="font-size: 18px;font-weight: bold;	padding: 20rpx;">
				<text>我的信息</text>
			</view>
			<u-cell-group>
				<u-cell name="userName" :value="userInfo.userName" :isLink="true"
					@click="editMessage('userName',userInfo.userName,'用户名')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 7rpx;">&#xe605;</text>
						<text class="u-cell-text">用户名</text>
					</view>
				</u-cell>
				<u-cell name="nickName" :value="userInfo.nickName" :isLink="true"
					@click="editMessage('nickName',userInfo.nickName,'昵称')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 7rpx;">&#xe605;</text>
						<text class="u-cell-text">昵称</text>
					</view>
				</u-cell>
				<u-cell name="avatar" :isLink="true" @click="editMessage('avatar',userInfo.avatar,'头像')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 7rpx;">&#xe60d;</text>
						<text class="u-cell-text">头像</text>
					</view>
				</u-cell>
				<u-cell name="schoolName" :value="userInfo.schoolName" :isLink="true"
					@click="editMessage('schoolId',userInfo.schoolName,'大学',userInfo.schoolId)">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 7rpx;">&#xe916;</text>
						<text class="u-cell-text">大学</text>
					</view>
				</u-cell>
				<u-cell name="campusName" :value="userInfo.campusName" :isLink="true"
					@click="editMessage('campusId',userInfo.campusName,'校区',userInfo.campusId,userInfo.schoolId)">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 7rpx;">&#xe628;</text>
						<text class="u-cell-text">校区</text>
					</view>
				</u-cell>
				<u-cell name="sex" :value="sexName" :isLink="true" @click="editMessage('sex',userInfo.sex,'性别')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 7rpx;">&#xe614;</text>
						<text class="u-cell-text">性别</text>
					</view>
				</u-cell>
				<u-cell name="email" :value="userInfo.email" :isLink="true"
					@click="editMessage('email',userInfo.email,'邮箱')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 7rpx;">&#xe672;</text>
						<text class="u-cell-text">邮箱</text>
					</view>
				</u-cell>
				<u-cell name="contactInformation" :isLink="true"
					@click="editMessage('contactInformation',userInfo.contactInformation,'联系方式')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 7rpx;">&#xe637;</text>
						<text class="u-cell-text">联系方式</text>
					</view>
				</u-cell>
				<u-cell name="selfIntroduction" :isLink="true"
					@click="editMessage('selfIntroduction',userInfo.selfIntroduction,'自我介绍')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 7rpx;">&#xe654;</text>
						<text class="u-cell-text">自我介绍</text>
					</view>
				</u-cell>
				<u-cell name="password" :isLink="true" @click="editMessage('password','-1','修改密码')">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 7rpx;">&#xe603;</text>
						<text class="u-cell-text">修改密码</text>
					</view>
				</u-cell>
				<u-cell :isLink="true" @click="logout()">
					<view slot="title" class="u-slot-title">
						<text class="iconfont" style="margin-right: 7rpx;">&#xe659;</text>
						<text class="u-cell-text">退出账号</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>

	</view>
</template>

<script>
	import {
		logout
	} from "@/api/login";
	import {
		getUserProfileVo
	} from "@/api/user";

	export default {

		data() {
			return {
				userInfo: {
					avatar: '',
					nickName: "你好呀",
					userName: "admin",
					schoolName: "XX大学",
					campusName: "XX学院",
					sex: 0,
					selfIntroduction: "自我介绍,打撒活动啊速宏达搜好滴傻大搜到阿斯顿撒旦好骚",
					contactInformation: "联系方式",
					email: "32136712361@qq.com"
				},
				sexName: '其他',
			}
		},
		created() {
			this.getUserProfile();
		},
		methods: {
			editMessage(editKey, currentValue, editName, valueId = 0, schoolId = 0) {
				uni.navigateTo({
					url: "/pages/my/prodileEdit?editKey=" + editKey + "&currentValue=" + currentValue +
						"&editName=" + editName + "&valueId=" + valueId + "&schoolId=" + schoolId
				})
			},
			/**
			 * 登出账号
			 */
			logout() {
				// console.log("退出账号:")
				logout().then(res => {
					// console.log("退出账号:" + JSON.stringify(res));
					// 清除所有缓存
					uni.clearStorageSync();
					// 跳转到登录页
					uni.redirectTo({
						url: "/pages/login/login"
					})
				})
			},
			/**
			 * 获取用户信息
			 */
			getUserProfile() {
				getUserProfileVo().then(res => {
					// console.log("getUserProfile:" + JSON.stringify(res));
					this.userInfo = res.data;
					this.sexName = this.getSexName(this.userInfo.sex);
					// console.log("this.userInfo.sex:" + this.userInfo.sex + ",this.sexName:" + this.sexName);
					// console.log("this.userInfo:" + JSON.stringify(this.userInfo));
				})
			},
			getSexName(type) {
				if (type == 0) {
					return "男";
				} else if (type == 1) {
					return "女";
				} else if (type == 2) {
					return "其他";
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background: #F4F5F7;
		min-height: 100vh;

		.userDisplay {
			display: flex;
			padding: 20rpx;
			background: #2B92FF;

			.avatar {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 30rpx;
				background: #ffffff;
				border-radius: 50%;
				padding: 3px;
			}

			.nameView {
				display: flex;
				justify-content: center;
				align-items: center;

				.selfIntroductionText {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					/* 显示1行 */
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}

		.userMessage {
			margin: 30rpx 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}
	}
</style>

退出账号

退出账号需要做三件事,分别是:

  1. 调用后端接口,让其清除Redis中的token
  2. 小程序清除客户端的token缓存
  3. 重新跳转到登录页面
/**
* 登出账号
 */
logout() {
	logout().then(res => {
		// 清除所有缓存
		uni.clearStorageSync();
		// 跳转到登录页
		uni.redirectTo({
			url: "/pages/login/login"
		})
	})
},

让自我介绍只显示一行,结尾多余的字使用…代替

.selfIntroductionText {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	/* 显示1行 */
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

在这里插入图片描述

跳转到信息修改页面

editMessage(editKey, currentValue, editName, valueId = 0, schoolId = 0) {
	uni.navigateTo({
		url: "/pages/my/prodileEdit?editKey=" + editKey + "&currentValue=" + currentValue +
			"&editName=" + editName + "&valueId=" + valueId + "&schoolId=" + schoolId
	})
},

所有信息的修改都在prodileEdit页面完成,跳转的时候需要携带一些参数,prodileEdit页面根据路由携带的参数来判断是修改什么信息,进而执行不同的代码

valueId = 0指的是,如果valueId没有接收到传值,就赋予默认值0

信息修改界面实现

api

user.js

import httpRequest from '@/utils/request'

// 修改用户个人信息
export function updateUserProfile(data) {
	return httpRequest.request({
		url: '/system/user/profile',
		method: 'put',
		data: data
	})
}

// 用户密码重置
export function updateUserPwd(oldPassword, newPassword) {
	const data = {
		oldPassword,
		newPassword
	}
	return httpRequest.request({
		url: '/system/user/profile/updatePwd',
		method: 'put',
		data: data
	})
}

school.js

import httpRequest from '@/utils/request'

// 查询学校列表
export function listSchool(query) {
	return httpRequest.request({
		url: '/market/school/list',
		method: 'post',
		data: query
	})
}

campus.js

import httpRequest from '@/utils/request'

// 查询校区列表
export function listCampus(query) {
	return httpRequest.request({
		url: '/market/campus/list',
		method: 'post',
		data: query
	})
}

logout方法在上面有了,这里就不重复写了,两个页面都调用了账号退出的逻辑,按理说应该单独写一个工具js来封装一个方法的,这样不同页面直接调用即可,可以减少代码的冗余,但是我看只有两个页面调用,而且代码量也不多,于是就偷懒了

页面

<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>

		<!-- 设置头像 -->
		<view v-if="editUser.editKey==='avatar'">
			<imageUpload v-model="picList"></imageUpload>
		</view>

		<!-- 设置学校 -->
		<view v-else-if="editUser.editKey==='schoolId'">
			<view style="align-items: center;background:#2B92FF ;padding: 20rpx;border-radius: 10rpx;">
				<view
					style="border: 2rpx solid white ;border-radius: 10rpx;width:100%;display: flex;align-items: center;background:#ffffff ;">
					<u-search placeholder="请输入搜索内容" v-model="schoolId" @custom="seachSchool"></u-search>
				</view>
				<view style="margin: 10px;"></view>
				<view @click="this.selectSchoolShow = true"
					style="border: 2rpx solid white ;border-radius: 10rpx;width:100%;display: flex;align-items: center;background:#ffffff ;">
					<text style="margin: 5px;width: 55px;">
						学校
					</text>
					<view
						style="padding: 0px 5px; background:#F2F2F2;border-radius: 3px;width: 100%;margin-right: 5px;">
						{{editUser.currentValue}}
					</view>
				</view>
			</view>

			<u-picker :show="selectSchoolShow" :columns="schoolOptions" keyName="name" @cancel="closeSchoolSelect"
				@confirm="confirmSchoolSelect">
			</u-picker>
		</view>

		<!-- 设置校区 -->
		<view v-else-if="editUser.editKey==='campusId'">
			<view style="align-items: center;background:#2B92FF ;padding: 20rpx;border-radius: 10rpx;">
				<view @click="this.selectCampusShow = true"
					style="border: 2rpx solid white ;border-radius: 10rpx;width:100%;display: flex;align-items: center;background:#ffffff ;">
					<text style="margin: 5px;width: 55px;">
						校区
					</text>
					<view
						style="padding: 0px 5px; background:#F2F2F2;border-radius: 3px;width: 100%;margin-right: 5px;">
						{{editUser.currentValue}}
					</view>
				</view>
			</view>

			<u-picker :show="selectCampusShow" :columns="campusOptions" keyName="name" @cancel="closeCampusSelect"
				@confirm="confirmCampusSelect">
			</u-picker>
		</view>

		<!-- 设置性别 -->
		<view v-else-if="editUser.editKey==='sex'">
			<u-radio-group v-model="sexName" placement="column">
				<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in sexList" :key="index"
					:label="item.name" :name="item.name" @change="sexChange">
				</u-radio>
			</u-radio-group>
		</view>

		<!-- 修改密码 -->
		<view v-else-if="editUser.editKey==='password'">
			<u--form :model="editPasswordForm" ref="editPasswordForm">
				<u-form-item label="输入原密码" :prop="editPasswordForm.oldPassword" borderBottom="true" labelWidth="80">
					<u-input v-model="editPasswordForm.oldPassword" password />
				</u-form-item>
				<u-form-item label="输入新密码" :prop="editPasswordForm.newPassword1" borderBottom="true" labelWidth="80">
					<u-input v-model="editPasswordForm.newPassword1" password />
				</u-form-item>
				<u-form-item label="再次输入新密码" :prop="editPasswordForm.newPassword2" borderBottom="true" labelWidth="80">
					<u-input v-model="editPasswordForm.newPassword2" password />
				</u-form-item>
			</u--form>
			<view style="margin: 10px;"></view>
			<u-button type="primary" @click="resetPassword" style="width: 90%;">提交</u-button>
		</view>

		<!-- 设置其他信息 -->
		<view v-else>
			<u--form :model="editUser" ref="uForm">
				<u-form-item :label="editUser.editName" :prop="editUser.editKey" borderBottom="true" labelWidth="80">
					<u--textarea v-if="editUser.editKey=='contactInformation'||editUser.editKey=='selfIntroduction'"
						v-model="editUser.currentValue" placeholder="请输入内容" autoHeight count
						maxlength='250'></u--textarea>
					<u-input v-else v-model="editUser.currentValue" />
				</u-form-item>
			</u--form>
		</view>

		<view style="margin: 10px;" v-if="editUser.editKey!='password'"></view>
		<u-button type="primary" @click="updateUserProfile" style="width: 90%;"
			v-if="editUser.editKey!='password'">提交</u-button>

		</u-picker>
	</view>
</template>

<script>
	import {
		updateUserProfile,
		updateUserPwd
	} from "@/api/user";
	import {
		listSchool
	} from "@/api/schoolMessage/school.js";
	import {
		listCampus
	} from "@/api/schoolMessage/campus.js";
	import {
		logout
	} from "@/api/login";
	import imageUpload from "@/components/ImageUpload/ImageUpload.vue";

	export default {
		components: {
			imageUpload
		},
		data() {
			return {
				editUser: {},
				/// 学校选择
				selectSchoolShow: false,
				schoolOptions: [],
				// 搜索学校名称
				schoolId: '',
				schoolQueryParams: {
					name: ''
				},
				/// 校区选择
				campusId: '',
				campusOptions: [],
				selectCampusShow: false,
				/// 性别选择
				sexList: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},
					{
						name: '其他',
						disabled: false
					}
				],
				sexName: "其他",
				// 图片集合
				picList: [],
				/// 修改密码
				editPasswordForm: {
					oldPassword: '',
					newPassword1: '',
					newPassword2: ''
				}

			}
		},
		created() {

		},
		// 获取路由的参数
		onLoad(e) {
			// console.log("e:" + JSON.stringify(e));
			if (e) {
				this.editUser = {
					editKey: e.editKey,
					currentValue: e.currentValue,
					editName: e.editName,
					valueId: e.valueId,
					schoolId: e.schoolId
				};
				if (e.editKey === 'schoolId') {
					this.getSchoolList();
				} else if (e.editKey === 'campusId') {
					this.getCampusList();
				} else if (e.editKey === 'sex') {
					this.sexName = this.getSexName(e.currentValue);
				} else if (e.editKey === 'avatar') {
					this.picList.push(e.currentValue);
					// console.log("this.picList:" + JSON.stringify(this.picList));
				}
			}
		},
		methods: {
			updateUserProfile() {
				let updateUser = {};
				if (this.editUser.editKey === 'schoolId' || this.editUser.editKey === 'campusId') {
					updateUser = {
						[this.editUser.editKey]: this.editUser.valueId
					};
				} else if (this.editUser.editKey === 'avatar') {
					updateUser = {
						[this.editUser.editKey]: this.picList[0]
					};
				} else {
					updateUser = {
						[this.editUser.editKey]: this.editUser.currentValue
					};
				}
				// console.log("updateUser:" + JSON.stringify(updateUser));
				updateUserProfile(updateUser).then(res => {
					// 修改成功,返回之前的页面
					uni.reLaunch({
						url: "/pages/my/my"
					})
					this.$refs.uToast.show({
						type: 'success',
						message: "修改成功"
					})
				}).catch(res => {
					// console.log("响应出错");
					// console.log("res:" + JSON.stringify(res));
					this.$refs.uToast.show({
						type: 'error',
						message: res.msg
					})
				})
			},
			/**
			 * 修改密码
			 */
			resetPassword() {
				let isSame = this.editPasswordForm.newPassword1 === this.editPasswordForm.newPassword2;
				if (isSame == false) {
					this.$refs.uToast.show({
						type: 'error',
						message: '两次输入的新密码不同,请重新输入'
					})
				} else if (this.editPasswordForm.newPassword1.length < 6) {
					this.$refs.uToast.show({
						type: 'error',
						message: '新密码长度小于6个字符,请重新输入'
					})
				} else {
					updateUserPwd(this.editPasswordForm.oldPassword, this.editPasswordForm.newPassword1).then(res => {
						this.$refs.uToast.show({
							type: 'success',
							message: '密码修改成功,即将退出账号,请重新登录'
						})
						setTimeout(() => {
							this.logout();
						}, 2000)
					}).catch(res => {
						this.$refs.uToast.show({
							type: 'error',
							message: res.msg
						})
					})
				}
			},
			getSchoolList() {
				listSchool(this.schoolQueryParams).then(res => {
					this.schoolOptions = [];
					this.schoolOptions.push(res.rows);
					// console.log("this.schoolOptions:" + JSON.stringify(this.schoolOptions));
				})
			},
			/**
			 * 搜索学校
			 */
			seachSchool() {
				this.schoolQueryParams.name = this.schoolId;
				// console.log("this.schoolQueryParams:"+JSON.stringify(this.schoolQueryParams))
				this.getSchoolList();
				this.selectSchoolShow = true;
			},
			/**
			 * 关闭学校选择
			 */
			closeSchoolSelect() {
				// console.log("closeSchoolSelect")
				this.selectSchoolShow = false;
			},
			/**
			 * 确定选择学校
			 */
			confirmSchoolSelect(e) {
				this.editUser.valueId = e.value[0].id;
				this.editUser.currentValue = e.value[0].name;
				// console.log("this.editUser.schoolId:" + this.editUser.schoolId);
				this.selectSchoolShow = false;
			},
			getCampusList() {
				let CampusQueryParams = {
					schoolId: this.editUser.schoolId
				}
				listCampus().then(res => {
					this.campusOptions = [];
					this.campusOptions.push(res.rows);
					// console.log("this.schoolOptions:" + JSON.stringify(this.schoolOptions));
				})
			},
			/**
			 * 关闭校区选择
			 */
			closeCampusSelect() {
				// console.log("closeSchoolSelect")
				this.selectCampusShow = false;
			},
			/**
			 * 确定选择校区
			 */
			confirmCampusSelect(e) {
				this.editUser.valueId = e.value[0].id;
				this.editUser.currentValue = e.value[0].name;
				// console.log("this.editUser.schoolId:" + this.editUser.schoolId);
				this.selectCampusShow = false;
			},
			/**
			 * 修改性别
			 */
			sexChange(e) {
				// console.log("sexChange:" + JSON.stringify(e));
				if (e == "男") {
					this.editUser.currentValue = 0;
				} else if (e == "女") {
					this.editUser.currentValue = 1;
				} else if (e == "其他") {
					this.editUser.currentValue = 2;
				}
			},
			getSexName(type) {
				if (type == 0) {
					return "男";
				} else if (type == 1) {
					return "女";
				} else if (type == 2) {
					return "其他";
				}
			},
			/**
			 * 登出账号
			 */
			logout() {
				console.log("退出账号:")
				logout().then(res => {
					console.log("退出账号:" + JSON.stringify(res));
					// 清除所有缓存
					uni.clearStorageSync();
					// 跳转到首页
					uni.redirectTo({
						url: "/pages/login/login"
					})
				})
			},

		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20px;
	}
</style>

动态给对象设置属性名和值

updateUser = {
	[this.editUser.editKey]: this.editUser.valueId
};

修改密码

/**
* 修改密码
 */
resetPassword() {
	let isSame = this.editPasswordForm.newPassword1 === this.editPasswordForm.newPassword2;
	if (isSame == false) {
		this.$refs.uToast.show({
			type: 'error',
			message: '两次输入的新密码不同,请重新输入'
		})
	} else if (this.editPasswordForm.newPassword1.length < 6) {
		this.$refs.uToast.show({
			type: 'error',
			message: '新密码长度小于6个字符,请重新输入'
		})
	} else {
		updateUserPwd(this.editPasswordForm.oldPassword, this.editPasswordForm.newPassword1).then(res => {
			this.$refs.uToast.show({
				type: 'success',
				message: '密码修改成功,即将退出账号,请重新登录'
			})
			setTimeout(() => {
				this.logout();
			}, 2000)
		}).catch(res => {
			this.$refs.uToast.show({
				type: 'error',
				message: res.msg
			})
		})
	}
},

在修改密码之前,前端需要做一些数据校验,来减轻后台的工作压力,如提前将不合法的密码拦截,不让其提交。我这里只是做了最简单的校验,还可以使用正则表达式做一些复杂的密码校验,如密码必须包含英文、数字、符号

图片上传组件

<template>
	<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="maxCount"
		:previewFullImage="true"></u-upload>
</template>

<script>
	import ossApi from "@/api/thirdParty/oss.js";
	import uuidApi from "@/utils/uuid.js"
	export default {
		name: "ImageUpload",
		props: {
			value: [String, Object, Array],
			// 图片最大上传数量
			maxCount: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				fileList1: [],
				uploadUrl: "http://smart-scheduling-system-13184.oss-cn-beijing.aliyuncs.com",
				// 图片数量
				pictureNum: 0,
			};
		},
		created() {
			for (var i = 0; i < this.value.length; i++) {
				this.fileList1.push({
					url: this.value[i]
				});
			}

			// console.log("this.fileList1:" + JSON.stringify(this.fileList1))
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
				this.pictureNum--;
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式,否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			// 上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let dataObj = {
						policy: '',
						signature: '',
						key: '',
						OSSAccessKeyId: '',
						dir: '',
						host: ''
					};
					ossApi.getPolicy()
						.then((response) => {
							// console.log('policy response:' + JSON.stringify(response))
							// debugger;
							dataObj.policy = response.data.policy
							dataObj.signature = response.data.signature
							dataObj.OSSAccessKeyId = response.data.accessId
							dataObj.key = response.data.dir + uuidApi.getUUID() + '_${filename}'
							dataObj.dir = response.data.dir
							dataObj.host = response.data.host
							// console.log('获取policy成功')
							let a = uni.uploadFile({
								url: this.uploadUrl,
								filePath: url,
								name: 'file',
								formData: dataObj,
								success: (res) => {
									// console.log('图片上传成功,url:' + JSON.stringify(url));
									// console.log('图片上传成功,this.fileList1:' + JSON.stringify(this
									// 	.fileList1));
									// 拼接出可以直接访问的oss图片 "http://tmp/":windows电脑的前缀 "wxfile://":安卓微信的前缀
									let picUrl = dataObj.host +
										'/' +
										dataObj.key.replace('${filename}', url.indexOf(
											"http://tmp/") != -1 ? url.replace(
											"http://tmp/", '') : url.replace(
											"wxfile://", ''));
									// 设置之后,才可以预览图片
									this.fileList1[this.fileList1.length - (this.fileList1.length -
										this.pictureNum)].url = picUrl;
									this.pictureNum++;
									let urlList = [];
									for (var i = 0; i < this.fileList1.length; i++) {
										urlList.push(this.fileList1[i].url);
									}
									this.$emit("input", urlList);
									// console.log("urlList:" + JSON.stringify(urlList))
									setTimeout(() => {
										resolve(res)
									}, 1000)
								}
							});
							resolve(true)
						})
						.catch((err) => {
							// console.log('获取policy失败')
							reject(false)
						})

				})
			},
		}
	}
</script>

<style>

</style>

OSS后端代码和讲解可以参考OSS对象存储后端实现+Vue实现图片上传【基于若依管理系统开发】

通过定义在props中定义value属性,并结合this.$emit("input", 值);方法,可以将值同步给组件v-model所绑定的变量

<imageUpload v-model="picList"></imageUpload>

注意:imageUpload 接收的属性需要是一个图片url数组

部分后端代码

后端基于若依后端管理系统开发,很多接口在系统中已经内置,或者可以直接通过系统的生成器生成出来,这里就不再贴上来,只贴部分基于系统已有接口修改而来的接口,避免读者迷惑

Controller

/**
 * 修改用户
 */
@Log(title = "个人信息", businessType = BusinessType.UPDATE)
@PutMapping
public AjaxResult updateProfile(@RequestBody SysUser user) {
    LoginUser loginUser = getLoginUser();
    SysUser sysUser = loginUser.getUser();
    if (StringUtils.isNotEmpty(user.getUserName()) && !userService.checkUserNameUnique(user)) {
        return error("修改用户 '" + sysUser.getUserName() + "' 失败,用户名已存在");
    }
    if (StringUtils.isNotEmpty(user.getPhonenumber()) && !userService.checkPhoneUnique(user)) {
        return error("修改用户 '" + sysUser.getUserName() + "' 失败,手机号码已存在");
    }
    if (StringUtils.isNotEmpty(user.getEmail()) && !userService.checkEmailUnique(user)) {
        return error("修改用户 '" + sysUser.getUserName() + "' 失败,邮箱账号已存在");
    }
    user.setUserId(sysUser.getUserId());
    user.setPassword(null);
//        user.setAvatar(null);
    user.setDeptId(null);
    if (userService.updateUserProfile(user) > 0) {
        // 更新缓存用户信息
        sysUser.setUserName(user.getUserName());
        sysUser.setNickName(user.getNickName());
        sysUser.setPhonenumber(user.getPhonenumber());
        sysUser.setEmail(user.getEmail());
        sysUser.setSex(user.getSex());
        tokenService.setLoginUser(loginUser);
        return success();
    }
    return error("修改个人信息异常,请联系管理员");
}
 /**
  * 重置密码
  */
 @Log(title = "个人信息", businessType = BusinessType.UPDATE)
 @PutMapping("/updatePwd")
 public AjaxResult updatePwd(@RequestBody Map<String, String> map) {
     LoginUser loginUser = getLoginUser();
     String userName = loginUser.getUsername();
     String password = loginUser.getPassword();
     String oldPassword = map.get("oldPassword");
     String newPassword = map.get("newPassword");
     if (!SecurityUtils.matchesPassword(oldPassword, password)) {
         return error("修改密码失败,旧密码错误");
     }
     if (SecurityUtils.matchesPassword(newPassword, password)) {
         return error("新密码不能与旧密码相同");
     }
     if (userService.resetUserPwd(userName, SecurityUtils.encryptPassword(newPassword)) > 0) {
         // 更新缓存用户密码
         loginUser.getUser().setPassword(SecurityUtils.encryptPassword(newPassword));
         tokenService.setLoginUser(loginUser);
         return success();
     }
     return error("修改密码异常,请联系管理员");
 }

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

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

相关文章

CTF PWN-攻防世界CGfsb格式化字符串漏洞

文章目录 前言格式化字符串漏洞格式化字符串漏洞基本原理简单典型案例 漏洞的危害与利用拒绝服务攻击内存数据读取内存数据覆盖 攻防世界&#xff1a;CGfsg题目思路简析任意地址覆写 总结 前言 距离 2021 年年底短暂接触学习 CTF PWN 相关知识&#xff08;CTF PWN-攻防世界XCT…

Matlab对FS32K144编程--CAN通讯

1、系统运行时间周期-10ms 2、配置CAN通讯初始化---波特率&#xff1a;500k&#xff0c;测试用CAN0 3、设置初始化配置优先级最高 4、清除CAN接受中断标志位初始化--仅运行一次&#xff0c;把要接受的CAN地址都要配置一下&#xff0c;如ID:0X245 5、建立全局变量--从单片机向外…

Android Studio安装和设置SDK、Gradle(国内源)、AVD下载目录详细教程

本机环境&#xff1a;win11家庭版 Android Studio版本&#xff1a;android-studio-2022.2.1.20-windows 文章目录 安装Android Studio官网下载安装Android Studio设置Android Studio的gradle使用的JDK版本设置Android Studio的SDK下载目录设置虚拟设备内存 设置Android Studio…

MySQL主从复制原理及实验

原理 1.环境搭建 1.需要两台服务器&#xff0c;如我的分别是&#xff1a; 1. -》 192.168.197.146---主库 2. -》 192.168.197.147---从库 2.分别关闭防火墙或者放行mysql端口号3306 如&#xff1a; systemctl stop firewalld systemctl disable firewalld 2.配置主库…

iOS pod EaseIMKit库如何放在本地使用

在使用环信EaseIMKit库的时候&#xff0c;发现有些开发者需要改动库中的一些逻辑&#xff0c;或者有UI上的一些调整&#xff0c;如果直接去改pods里面的库&#xff0c;在之后的库版本升级会把之前修改过的代码覆盖掉&#xff0c;这个时候我们就需要pod指向本地的库&#xff0c;…

vue父组件和子组件数据传递

vue --父组件向子组件传递数据 父组件&#xff1a; <template><div class"parent"><p>父组件&#xff1a;{{ msg }}</p><Child message"Hello, I am parent!"></Child></div> </template><script>…

NetSuite财务报表General Ledger Report的缺陷及改造案例

本周有用户提到一个特殊的业务场景&#xff0c;比较有代表性&#xff0c;在此分享。 问题 “如果在一张JE中&#xff0c;某个科目既有借又有贷&#xff0c;金额相同。那么在General Ledger Report中此JE的借贷都显示为0。这与事实不符&#xff0c;所以是不对的。” JE 155&a…

【JavaEE】Spring中注解的方式去存储Bean对象

Spring的开发要点总结 文章目录 【JavaEE】Spring的开发要点总结&#xff08;2&#xff09;1. 通过类注解的方式存储Bean对象1.1 五大 类注解1.1.1 Controller 控制器存储1.1.2 Service 服务存储1.1.3 Repository 仓库存储1.1.4 Component 组件存储1.1.5 Configuration 配置存储…

对比CahtGPT Bard Claude2对中文的理解

对比CahtGPT Bard Claude2对中文的理解 今天简单测试了一下目前这三个很火的模型对中文的理解能力 简单问题 鲁迅和周树人的关系 Bard CahtGPT Claude 介绍一下平凡的世界这本书 Bard CahtGPT

ES6 (js)

学习了很多vue的视频&#xff0c;还有nuxt的&#xff0c;还是不会。 还是要学ES6 本文的大部分出自小马老师的资料&#xff0c;还有曾大佬的文章 变量&#xff08;Let 和 const&#xff09; 在es6中&#xff0c;多用let 和const 来声明变量类型。因为var 会提前声明&#xff0…

【JDBC系列】- 核心API之preparedstatement用法

核心API之preparedstatement用法 &#x1f604;生命不息&#xff0c;写作不止 &#x1f525; 继续踏上学习之路&#xff0c;学之分享笔记 &#x1f44a; 总有一天我也能像各位大佬一样 &#x1f3c6; 博客首页 怒放吧德德 To记录领地 &#x1f31d;分享学习心得&#xff0c;…

docker学习笔记——狂神说视频学习笔记

Ubuntu上docker安装 UBUNTU 20.04 LTS 安装DOCKER看高博主的博文&#xff0c;一键复制命令安装即可。 docker命令 docker version查看你docker版本信息 docker info显示docker系统级别的信息 docker --helpdocker命令查询 docker docs的referrence介绍了docker的详细命令 …

chrome查看浏览器内核日志

由于经常在网页上调试播放音视频&#xff0c;但是总遇到一些未知原因&#xff0c;导致无法正常播放&#xff0c;亟需查看浏览器内核日志&#xff0c;分析原因&#xff0c;做一下笔记。 (1) 查看浏览器快捷键属性 &#xff08;2&#xff09;在快捷键启动位置补充参数 --enable-…

[ 容器 ] Docker 的数据管理

目录 一、Docker 的数据管理1.1 数据卷2. 数据卷容器 二、 端口映射三、容器互联&#xff08;使用centos镜像&#xff09;四、Docker 镜像的创建1&#xff0e;基于现有镜像创建2&#xff0e;基于本地模板创建3&#xff0e;基于Dockerfile 创建3.1 联合文件系统&#xff08;Unio…

vue3前端分页,全选翻页状态保持

直接贴代码&#xff0c;代码中有注释 <template><div class"viewer-container" id"viewer-container"><!-- 表格 --><el-table:row-key"getRowKeys":data"data.tableDataCopy"style"width: 100%"ref&…

Go语言开发小技巧易错点100例(八)

往期回顾&#xff1a; Go语言开发小技巧&易错点100例&#xff08;一&#xff09;Go语言开发小技巧&易错点100例&#xff08;二&#xff09;Go语言开发小技巧&易错点100例&#xff08;三&#xff09;Go语言开发小技巧&易错点100例&#xff08;四&#xff09;Go…

Linux网络--UDP套接字

文章目录 预备知识socket套接字UDP网络编程 一、预备知识 1.源IP地址和目的IP地址 IP地址&#xff1a;标识计算机在网络中的唯一性。 在IP数据包头部中, 有两个IP地址, 分别叫做源IP地址, 和目的IP地址。 源IP地址 &#xff1a; 网络通信的发起者。 目的IP地址 &#xff1a; …

element ui 上传控件携带参数到后端

1.携带固定参数&#xff1a; 2.携带不固定参数&#xff1a; <el-row> <el-col :span"24"> <el-upload :multiple"false" :show-file-list"false" :on-success"f_h…

矿井人员视频行为分析算法 opencv

矿井人员视频行为分析算法通过opencvpython网络模型技术&#xff0c;矿井人员视频行为分析算法实时监测人员的作业行为&#xff0c;并与安全标准进行比对&#xff0c;可以及时发现不符合安全要求的行为&#xff0c;预防事故的发生。OpenCV的全称是Open Source Computer Vision …

json-server Node.js 服务,前端模拟后端提供json接口服务

json-server Node.js 服务,前端模拟后端提供json接口服务 背景&#xff1a; 前后端分离的项目&#xff0c;如果前端写页面的话&#xff0c;必须的后端提供接口文件&#xff0c;作为前端等待时间太久&#xff0c;不便于开发进行&#xff0c;如果前端写的过程中自己搭建一个简要的…