本文介绍个人修改页面代码
1、操作界面展示
2、编辑UI实现
如上述图,编辑界面由三个输入框、一个单选框,一个提交按钮组成。
因为是表单提交,所以三个输入框、一个单选框使用form表单包含。
<uni-forms ref="form" :model="user" labelWidth="80px"> </uni-forms>
如下是三个输入框的代码,uni-forms-item标签,样式封装是一行,左侧是标题,右侧是输入框,是uniapp封装的基础组件,可以直接使用。
官网插件市场:
https://ext.dcloud.net.cn/plugin?id=2773,详细可以参考这个官网
<uni-forms-item label="用户昵称" name="nickName"> <uni-easyinput v-model="user.nickName" placeholder="请输入昵称" /> </uni-forms-item> <uni-forms-item label="手机号码" name="phonenumber"> <uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" /> </uni-forms-item> <uni-forms-item label="邮箱" name="email"> <uni-easyinput v-model="user.email" placeholder="请输入邮箱" /> </uni-forms-item>
如下是单选框代码
<uni-forms-item label="性别" name="sex" required> <uni-data-checkbox v-model="user.sex" :localdata="sexs" /> </uni-forms-item>
如下是按钮代码,点击事件绑定submit方法
<button type="primary" @click="submit">提交</button>
submit方法
submit(ref) {
this.$refs.form.validate().then(res => {
updateUserProfile(this.user).then(response => {
this.$modal.msgSuccess("修改成功")
})
})
}业务逻辑说明:
1、验证表单字段规则,如果验证通过,则继续执行,否则退出。
2、调用updateUserProfileAPI接口,更新数据库。
3、更新成功,提示修改成功,this.$modal.msgSuccess弹窗提示框信息。
表单验证规则,代码this.$refs.form.validate()
rules: {
nickName: {
rules: [{
required: true,
errorMessage: '用户昵称不能为空'
}]
},
phonenumber: {
rules: [{
required: true,
errorMessage: '手机号码不能为空'
}, {
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
errorMessage: '请输入正确的手机号码'
}]
},
email: {
rules: [{
required: true,
errorMessage: '邮箱地址不能为空'
}, {
format: 'email',
errorMessage: '请输入正确的邮箱地址'
}]
}nickName:验证内容值不能为空
phonenumber:使用正则表达式,格式是11位数字,以1位开始
email:邮箱不能为空,邮箱格式是***@###.com等
3、更新个人信息api接口代码
/**
* 修改用户
*/
@Log(title = "个人信息", businessType = BusinessType.UPDATE)
@PutMapping
public AjaxResult updateProfile(@RequestBody SysUser user)
{
LoginUser loginUser = getLoginUser();
SysUser sysUser = loginUser.getUser();
user.setUserName(sysUser.getUserName());
if (StringUtils.isNotEmpty(user.getPhonenumber()) && !userService.checkPhoneUnique(user))
{
return error("修改用户'" + user.getUserName() + "'失败,手机号码已存在");
} if (StringUtils.isNotEmpty(user.getEmail()) && !userService.checkEmailUnique(user))
{
return error("修改用户'" + user.getUserName() + "'失败,邮箱账号已存在");
}
user.setUserId(sysUser.getUserId());
user.setPassword(null);
user.setAvatar(null);
user.setDeptId(null);
if (userService.updateUserProfile(user) > 0)
{ // 更新缓存用户信息
sysUser.setNickName(user.getNickName());
sysUser.setPhonenumber(user.getPhonenumber());
sysUser.setEmail(user.getEmail());
sysUser.setSex(user.getSex());
tokenService.setLoginUser(loginUser); return success();
}
return error("修改个人信息异常,请联系管理员");
}业务逻辑说明:
1、获取登录用户信息。
2、将需要修改的信息赋值入sysUser实体对象。
3、验证手机号码、邮箱是否已经存在数据库,如果存在返回异常,手机号码和邮箱都是唯一。
4、更新数据。
5、更新缓存用户信息。
来源：
互联网
本文观点不代表源码解析立场，不承担法律责任，文章及观点也不构成任何投资意见。
评论列表