用户修改个人资料

用户-个人资料-持久层

1 、规划需要执行的SQL语句

1.1 执行修改用户个人资料的SQL语句大致是:

update t_user set phone = ?,email = ?,gender=?,modified_user = ?,modified_time=? where uid =?

1.2 在执行修改用户资料之前,当用户刚打开修改资料的页面时,就应把当前登录的用户信息显示到页面 中。显示用户资料可以通过:

SELECT * FROM t_user WHERE uid=?

说明: 1.该查询功能已经实现,无需再次开发; 2.在执行修改用户资料之前,还应检查用户数据是否存在、是否标记为“已删除”,也可以通过以上 查询来实现。

2 、接口与抽象方法

在UserMapper接口中添加updateInfoByUid(User user)方法。

/**
     * 更新用户数据信息
     * @param user    用户的数据
     * @return    返回值受影响的行数
     */
     Integer updateInfoByUid(User user);

3、配置SQL映射

3.1.在UserMapper.xml中配置Integer updateInfoByUid(User user)抽象方法的映射。

<update id="updateInfoByUid">
        update store.t_user set
                                <!--动态sql-->
        <if test="phone!=null">phone = #{phone},</if>
        <if test="email!=null">email = #{email},</if>
        <if test="gender!=null">gender=#{gender},</if>
                                modified_user = #{modifiedUser},
                                modified_time= #{modifiedTime}
        where uid =#{uid}

    </update>

4、单元测试

在UserMapperTests中编写并执行单元测试。

用户-个人资料-业务层

1、 规划异常

  1. 关于用户修改个人资料是由两个功能组成的:
    打开页面时获取用户的信息并且填充到对应的文本框中; 检测用户是否点击修改按钮。
  1. 打开页面时可能找不到用户的数据,点击删除按钮之前需要再次去检测用户数据是否真的存在

2、接口与抽象方法

在IUserService接口中添加两个抽象方法,分别对应以上两个功能。

User getByUid(Integer uid);

    void changeInfo(Integer uid,String username,User user);

3、实现抽象方法

在UserServiceImpl实现类中实现getByUid(Integer uid)和changeInfo(Integer uid, String username,User user)以上两个抽象方法。

@Override
    public User getByUid(Integer uid) {
          
   
        User result = usermapper.findByUid(uid);
        if (result==null||result.getIsDelete()==1){
          
   
            throw new UserNotFoundException("用户没有找到");
        }
        User user = new User();
        user.setUsername(result.getUsername());
        user.setPhone(result.getPhone());
        user.setEmail(result.getEmail());
        user.setGender(result.getGender());
         
        return user;
    }
@Override
    public void changeInfo(Integer uid, String username, User user) {
          
   
        User result = usermapper.findByUid(uid);
        if (result==null || result.getIsDelete()==1){
          
   
            throw new UserNotFoundException("用户没有找到");
        }
        user.setUid(uid);
        user.setModifiedUser(username);
        user.setModifiedTime(new Date());
// 调用userMapper的updateInfoByUid(User user)方法执行修改,并获取返回值
        Integer rows = usermapper.updateInfoByUid(user);
        if (rows != 1) {
          
   
            throw new UpdateException("更新用户数据时出现未知错误,请联系系统管理员");
        }

    }

4、单元测试

用户-个人资料-控制层

1 处理异常

说明:无需再次开发。

2、 设计请求

  1. 设置一打开页面就发送当前用户数据的查询

请求路径:/users/get_by_uid 请求参数:HttpSession session 请求类型:GET 响应结果:JsonResult

  1. 设计用户点击修改按钮发送用户的数据修改操作请求的设计 请求路径:/users/change_info 请求参数:User user, HttpSession session 请求类型:POST 响应结果:JsonResult

3、处理请求

1.处理获取用户信息请求

@RequestMapping("get_by_uid")
    public JsonResult<User> getByUid(HttpSession session){
          
   
        User data = userService.getByUid(getuidFromSession(session));
        return  new JsonResult<>(ok,data);
    }
    @RequestMapping("change_info")
    public JsonResult<Void> changeInfo(User user,HttpSession session){
          
   
        //user对象中有username、phone、email、gender
        //uid需要封装在user对象中
        Integer uid = getuidFromSession(session);
        String username = getUsernameFromSession(session);
        userService.changeInfo(uid,username,user);
        return new JsonResult<>(ok);
    }

用户-个人资料-前端页面

  1. 在打开userdata.html页面自动发送ajax请求,查询到的数据填充到这个页面。
<script type="text/javascript">
			/*
			* 一旦检测到当前的页面被加载就会出发ready方法
			* $(document).ready(function () {
			* 编写业务代码
			* }
			* */
			$(document).ready(function () {
            
     
				$.ajax({
            
     
					url: "/users/get_by_uid",
					type: "get",
					data: $("#form-change-info").serialize(),
					dataType: "JSON",
					success: function (json) {
            
     
						if (json.state == 200){
            
     
							//将查询到的数据重新设置到控件中
							$("#username").val(json.data.username);
							$("#phone").val(json.data.phone);
							$("#email").val(json.data.email);
							let radio = json.data.gender == 0 ? $("#gender-female") : $("#gender-male");
							//prop表示给某个元素添加属性以及属性的值
							radio.prop("checked","checked")

						}else {
            
     
							alert("用户数据不存在")
						}
					},
					error: function (xhr) {
            
     
						alert("查询用户信息时产生未知的错误!"+xhr.message)
					}
				})
			})
		</script>
  1. 在检测到用户点击了修改按钮之后发送ajax请求
$("#btn-change-info").click(function () {
				$.ajax({
					url: "/users/change_info",
					type: "post",
					data: $("#form-change-info").serialize(),
					dataType: "JSON",
					success: function (json) {
						if (json.state == 200){
						alert("用户信息修改成功")
							//修改成功后重新加载当前页面
                      location.href="userdata.html"
						}else {
							alert("用户信息修改失败")
						}
					},
					error: function (xhr) {
						alert("修改用户信息时产生未知的错误!"+xhr.message)
					}
				})
			})
经验分享 程序员 微信小程序 职场和发展