springboot电脑商城项目 4_1用户修改资料

4.1用户修改资料

1.个人资料-持久层

1.1 规划sql语句

1.更新用户信息的sql语句

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

2.根据用户名查询用户的数据

select * from t_user where uid = ?

查询用户的数据不需要再重复开发

1.2 接口与抽象方法

更新用户信息方法的定义

/**
     * 更新用户信息的语句
     *
     */
Integer updateInfoByUid(User user);

1.3 抽象方法的映射

<update id="updateInfoByUid">
    UPDATE t_user
    set
        <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>

测试类中完成测试

@Test
public void updateInfoByUid(){
    User user = new User();
    user.setUid(24);
    user.setEmail("123@qq.com");
    user.setGender(0);
    user.setPhone("12345678901");
    userMapper.updateInfoByUid(user);
}

2.个人资料-业务层

2.1 异常规划

1.涉及两个功能：

• 当打开页面是获取用户的信息并填充到对应的文本框中。
• 检测用户是否点击了修改按钮，如果检测到则执行修改用户信息的操作。

2.2 接口和抽象方法

主要有两个功能的模块，对应的是两个抽象的方法的设计。

/**
     * 根据用户id查询用户数据
     * @param uid
     * @return
     */
User getUserById(Integer uid);

/**
     * 更新用户信息操作
     * @param uid 用户id
     * @param username 用户名称
     * @param user 用户对象的数据
     */
void changeInfo(Integer uid,String username,User user);

UserServiceImpl中实现这两个方法

@Override
public User getUserById(Integer uid) {
    User result = userMapper.findUserById(uid);
    if (result.getIsDelete() == 1 || result == null){
        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;
}

/**
     *
     * @param uid 用户id 在session中
     * @param username 用户名称 在session中
     * @param user 用户对象的数据
     */
@Override
public void changeInfo(Integer uid, String username, User user) {
    User result = userMapper.findUserById(uid);
    if (result.getIsDelete() == 1 || result == null){
        throw new UserNotFoundException("用户数据不存在");
    }
    user.setUid(result.getUid());
    //        user.setUsername(result.getUsername());
    user.setModifiedTime(new Date());
    user.setModifiedUser(username);

    Integer row = userMapper.updateInfoByUid(user);
    if (row != 1){
        throw new UpdateException("更新数据时发生未知异常");
    }
}

在测试类中测试

@Test
public void getUserById(){
    User userById = userService.getUserById(24);
    System.out.println(userById);
}

@Test
public void changeInfo(){

    User user = new User();
    user.setEmail("root@qq.com");
    user.setPhone("6665544433");
    user.setGender(1);

    userService.changeInfo(25,"root",user);
}

3.个人资料-控制层

3.1 处理异常

暂无

3.2 设计请求

1.设置一打开页面就发送当前用户数据的请求。

/user/get_by_uid
GET
HttpSession session
JsonResult<User>

2.点击修改按钮发送用户的数据修改请求的设计。

/users/change_info
POST
User user,HttpSession session
JsonResult<void>

3.3 处理请求

@RequestMapping("get_by_id")
public JsonResult<User> getByUid(HttpSession session){
    User data = iUserService.getUserById(getUidFromSession(session));
    return new JsonResult<>(OK,data);
}

@RequestMapping("change_info")
public JsonResult<Void> changeInfo(HttpSession session,User user){
    //user对象中有四部分数据，username phone email gender
    //uid需要再次封装进user对象中
    Integer uid = getUidFromSession(session);
    String username = getUsernameFormSession(session);
    iUserService.changeInfo(uid,username,user);
    return new JsonResult<>(OK);
}

4.个人资料-前端页面

1.在打开userdata.html页面自动发送ajax请求（get_by_id）,将查询到的数据填充进这个页面

/**
* 一旦检测到当前的页面被将加载就会触发ready方法
* $(document).ready(function(){
*     //编写业务代码
* })
*/
$(document).ready(function () {
    $.ajax({
        url: "/users/get_by_id",
        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")
                radio.prop("checked","checked")
            }else{
                alert("修改用户信息失败")
            }
        },
        error: function(xhr){
            alert("修改用户信息时产生未知异常123" + xhr.message)
        }
    });
})

2.在检测到用户点击修改按钮后发送一个ajax请求（change_info）

$("#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("用户信息修改时产生未知异常123" + xhr.message)
        }
    });
});