个人博客-2（用户信息修改）

最新推荐文章于 2023-05-18 11:52:37 发布

初夏那片海

最新推荐文章于 2023-05-18 11:52:37 发布

阅读量681

点赞数

分类专栏：个人博客项目

本文链接：https://blog.csdn.net/qq_42265394/article/details/114537519

版权

个人博客项目专栏收录该内容

8 篇文章 6 订阅

订阅专栏

用户信息修改

声明：该项目是GitHub上的开源项目，本人已购买作者相关课程，仅供个人学习使用。
课程链接：https://www.lanqiao.cn/courses/1367

修改登录名和昵称

先从session中获取已登录用户的登录名和昵称显示在输入框中
用户可以根据原信息进行修改
使用ajax异步交互

profile.html

<form role="form" id="userNameForm">

   <div class="form-group col-sm-8">
       <div class="alert alert-danger" id="updateUserName-info" style="display: none;"></div>
   </div>
   
   <!-- 文本输入框 -->
   <div class="form-group">
       <label>登陆名称</label>
       <!-- 登录名不能修改-->
       <input type="text" class="form-control" id="loginUserName"
              name="loginUserName"
              placeholder="请输入登录名" required="true"
              th:value="${session.loginUser.getUserName()}"
              readonly="true">
   </div>
   
   <div class="form-group">
       <label>昵称</label>
       <input type="text" class="form-control" id="nickName"
              name="nickName"
              placeholder="请输入昵称" required="true" 
              th:value="${session.loginUser.getNickName()}">
   </div>
   
   <div class="card-footer">
       <button type="button" id="updateUserNameButton" onsubmit="return false;"
               class="btn btn-danger float-right">确认修改
       </button>
   </div>
</form>

profile.js

//修改个人信息
$('#updateUserNameButton').click(
	
	function () {
	
	   $("#updateUserNameButton").attr("disabled",true);
	   var userName = $('#loginUserName').val();
	   var nickName = $('#nickName').val();
	   if (validUserNameForUpdate(userName, nickName)) {
	       //ajax提交数据
	       var params = $("#userNameForm").serialize();
	       $.ajax({
	           type: "POST",
	           url: "/admin/profile/name",
	           data: params,
	           success: function (r) {
	               if (r == 'success') {
	                   alert('修改成功');
	               } else {
	                   alert('修改失败');
	                   $("#updateUserNameButton").prop("disabled",false);
	               }
	           }
	       });
	    } else {
	       $("#updateUserNameButton").prop("disabled",false);
	    }
	   
	 }
);

/**
 * 名称验证
 */
function validUserNameForUpdate(userName, nickName) {
    if (isNull(userName) || userName.trim().length < 1) {
        $('#updateUserName-info').css("display", "block");
        $('#updateUserName-info').html("请输入登陆名称！");
        return false;
    }
    if (isNull(nickName) || nickName.trim().length < 1) {
        $('#updateUserName-info').css("display", "block");
        $('#updateUserName-info').html("昵称不能为空！");
        return false;
    }
    if (!validUserName(userName)) {
        $('#updateUserName-info').css("display", "block");
        $('#updateUserName-info').html("请输入符合规范的登录名！");
        return false;
    }
    if (!validCN_ENString2_18(nickName)) {
        $('#updateUserName-info').css("display", "block");
        $('#updateUserName-info').html("请输入符合规范的昵称！");
        return false;
    }
    return true;
}

dao层

//修改用户名和昵称,使用万能的map传参
int updateName(Map<String,Object> map);

<update id="updateName" parameterType="map">
   update rm_blog.admin_user set user_name=#{loginUserName},nick_name=#{nickName} where id=#{id};
</update>

service层

int updateName(Map<String,Object> map);

@Override
public int updateName(Map<String, Object> map) {
    return adminUserMapper.updateName(map);
}

controller层

//修改name属性
@PostMapping("/profile/name")
@ResponseBody
public String nameUpdate(
						HttpServletRequest request, 
						@RequestParam("loginUserName") String loginUserName,
                        @RequestParam("nickName") String nickName) {
                        
    if (StringUtils.isEmpty(loginUserName) || StringUtils.isEmpty(nickName)) {
        return "参数不能为空";
    }
    
    Integer loginUserId = (int) request.getSession().getAttribute("loginUserId");
    HashMap<String, Object> map = new HashMap<>();
    map.put("loginUserName",loginUserName);
    map.put("nickName",nickName);
    map.put("id",loginUserId);

    if (adminUserService.updateName(map)>0) {
        return "success";
    } else {
        return "修改失败";
    }
}

修改密码

增加密码校验功能，最少6位，最多20位字母或数字、特殊字符的组合

profile.html

<form role="form" id="userPasswordForm">

   <!--显示信息-->
   <div class="form-group col-sm-8">
       <div class="alert alert-danger updatePassword-info" 
       id="updatePassword-info" style="display: none;"></div>
   </div>

   <!-- 输入框 -->
   <div class="form-group">
       <label class="control-label"><i class="fa fa-key"></i> 原密码</label>
       <input type="text" class="form-control" id="oldPassword"
              name="oldPassword"
              placeholder="请输入原密码" required="true">
   </div>
   <div class="form-group">
       <label class="control-label"><i class="fa fa-key"></i> 新密码</label>
       <input type="text" class="form-control" id="newPassword" name="newPassword"
              placeholder="请输入新密码" required="true">
   </div>
   <div class="card-footer">
       <button type="button" id="updatePasswordButton" onsubmit="return false;"
               class="btn btn-danger float-right">确认修改
       </button>
   </div>
</form>

profile.js

//修改密码
$('#updatePasswordButton').click(
    function () {
    $("#updatePasswordButton").attr("disabled",true);

    var oldPassword = $('#oldPassword').val();
    console.log(oldPassword);
    var newPassword = $('#newPassword').val();

    if (validPasswordForUpdate(oldPassword, newPassword)) {

        var params = $("#userPasswordForm").serialize();
        $.ajax({
            type: "POST",
            url: "/admin/profile/password",
            data: params,
            success: function (r) {
                console.log(r);
                if (r === 'success') {
                    alert('修改成功');
                    window.location.href = '/admin/login';
                } else {
                    alert('修改失败');
                    $("#updatePasswordButton").attr("disabled",false);
                }
            }
        });
    } else {
        $("#updatePasswordButton").attr("disabled",false);
    }
});


/**
 * 密码验证
 */
function validPasswordForUpdate(oldPassword, newPassword) {
    if (isNull(oldPassword) || oldPassword.trim().length < 1) {
        $('#updatePassword-info').css("display", "block");
        $('#updatePassword-info').html("请输入原密码222！");
        return false;
    }
    if (isNull(newPassword) || newPassword.trim().length < 1) {
        $('#updatePassword-info').css("display", "block");
        $('#updatePassword-info').html("新密码不能为空！");
        return false;
    }
    if (!validPassword(newPassword)) {
        $('#updatePassword-info').css("display", "block");
        $('#updatePassword-info').html("请输入符合规范的密码！");
        return false;
    }
    return true;
}

public.js
正则表达式

/**
 * 用户密码验证 最少6位，最多20位字母或数字、特殊字符的组合
 *
 * @param password
 * @returns {boolean}
 */
function validPassword(password) {
    var pattern = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$)^.{6,20}$/;
    if (pattern.test(password.trim())) {
        return (true);
    } else {
        return (false);
    }
}

dao层

//修改密码
int updatePassword(Map<String,Object> map);

<update id="updatePassword" parameterType="map">
    update rm_blog.admin_user 
    set password=md5(#{newPassword})
    where id=#{id} and password=md5(#{oldPassword});
</update>

service层

int updatePassword(Map<String,Object> map);

@Override
public int updatePassword(Map<String, Object> map) {
    return adminUserMapper.updatePassword(map);
}

controller层

//修改密码
@PostMapping("/profile/password")
@ResponseBody
public String passwordUpdate(@RequestParam("oldPassword") String oldPassword,
                             @RequestParam("newPassword") String newPassword,
                             HttpSession session) {

    if (StringUtils.isEmpty(oldPassword) || StringUtils.isEmpty(newPassword)) {
        return "参数不能为空";
    }

    int loginUserId = (int) session.getAttribute("loginUserId");
    HashMap<String, Object> map = new HashMap<>();
    map.put("id",loginUserId);
    map.put("oldPassword",oldPassword);
    map.put("newPassword",newPassword);
    System.out.println(map);

    if (adminUserService.updatePassword(map)>0) {
        //修改成功后清空session中的数据，前端控制跳转至登录页
        session.removeAttribute("loginUserId");
        session.removeAttribute("loginUser");
        session.removeAttribute("errorMsg");
        return "success";
    } else {
        return "修改失败";
    }
}

安全退出用户

点击退出按钮，移除session，重定向到登录页
index.html

<li class="nav-item">
    <a th:href="@{/admin/logout}" class="nav-link">
        <i class="fa fa-sign-out nav-icon"></i>
        <p>安全退出</p>
    </a>
</li>

controller

//退出功能
 @RequestMapping("/logout")
 public String logout(HttpSession session){
     session.removeAttribute("loginUserId");
     session.removeAttribute("loginUser");
     session.removeAttribute("errorMsg");
     return "redirect:/admin/login";
 }

初夏那片海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人博客-2（用户信息修改）

用户信息修改修改登录名和昵称先从session中获取已登录用户的登录名和昵称显示在输入框中用户可以根据原信息进行修改使用ajax异步交互profile.html<form role="form" id="userNameForm"> <div class="form-group col-sm-8"> <div class="alert alert-danger" id="updateUserName-info" style="
复制链接

扫一扫