个人资料功能

用户提交在页面填写个人资料，点击修改按钮提交至后台程序，保存至数据库

image-20230806093455640

持久层

规划执行的SQL语句

更新用户信息的SQL语句

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

根据用户名查询用户数据

1
select * from t_user where uid=?;

此功能在修改密码功能模块已经实现

接口和抽象方法的设计

在UserMapper接口中定义更新用户信息方法

1
2
3
4
5
6
/**
     * 根据uid更新用户信息
     * @param user 用户信息对象
     * @return 更新操作受影响的行数
     */
Integer updateInfoByUid(User user);

抽象方法配置到映射文件UserMapper.xml中

采用Mybatis的if标签，只有在各个字段不为空时，才会执行更新操作

1
2
3
4
5
6
7
8
9
<update id="updateInfoByUid" parameterType="com.bang.store.pojo.User">
    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>

单元测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@Test
public void updateInfoByUid(){
    User user = new User();
    user.setUid(2);
    user.setPhone("15823209876");
    user.setGender(1);
    user.setEmail("zhangfei@163.com");
    user.setModifiedUser("管理员");
    user.setModifiedTime(new Date());

    Integer rows = userMapper.updateInfoByUid(user);

    System.out.println("受影响函数:"+rows);
}

业务层

业务层主要实现的功能

  • 用户进入当前页面，系统查询用户信息，并填充到页面对应的文本框
  • 用户如果点击修改按钮，则执行用户信息更新操作，将对应信息写入数据库

规划异常

  • 打开页面时，可能找不到用户的信息或用户已被删除
  • 信息插入过程中发生未知错误

接口和抽象方法

在IUserService接口中，定义对应的抽象方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* 根据用户id查询对应用户信息
* @param uid 用户id
* @return 用户信息
*/
User findUserByUid(Integer uid);

/**
* 修改更新用户信息
* @param uid 用户id
* @param username 用户姓名
* @param user 用户信息对象
*/
void alertInfo(Integer uid,String username,User user);

抽象方法实现

在`UserServiceImpl中实现上述两个抽象方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
@Override
public User findUserByUid(Integer uid) {
    User user = userMapper.findByUid(uid);
    if(user==null || user.getIsDelete()==1){
        throw new UsernameNotFoundException("当前用户不存在");
    }
    return user;
}

@Override
public void alertInfo(Integer uid, String username, User user) {
    //存入信息之前，仍然要判断当前用户是否存在
    //可能用户在此页面停留很久导致用户不存在
    User curuser = userMapper.findByUid(uid);
    if(curuser==null || curuser.getIsDelete()==1){
        throw new UsernameNotFoundException("当前用户不存在");
    }

    //填充信息
    user.setUid(uid);
    user.setUsername(username);
    user.setModifiedUser(username);
    user.setModifiedTime(new Date());

    //更新数据库
    Integer rows = userMapper.updateInfoByUid(user);
    if(rows!=1){
        throw new UpdateException("更新用户信息过程发生未知错误");
    }

}

单元测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Test
public void findUserByUid(){
    User user = iUserService.findUserByUid(1);
    System.out.println(user);
}

@Test
public void updateInfoByUid(){
    User user = new User();
    user.setUid(2);
    user.setPhone("122");
    user.setGender(1);
    user.setEmail("zhangfei@163.com");
    user.setModifiedUser("管理员");
    user.setModifiedTime(new Date());

    iUserService.alertInfo(2,"张飞2",user);
}

控制层

异常处理

用户不存在异常和插入过程异常在前面的功能中均已经实现，所以异常处理类中无需增加新的代码逻辑

设计请求

打开页面，用户信息展示

一打开个人资料页面，便向后台发送查询当前用户请求

1
2
3
4
request url: /user/get_by_id
request method: GET
request params: HttpSession session
response data: new JsonResult<User>

点击修改按钮，更新用户信息

用户点击修改按钮，向后台发送请求，后台进行数据库更新

1
2
3
4
request url: /user/alert_info
request method: POST
request params: User user,HttpSession session
response data: JsonResult<Void>

处理请求

在UserController里编写对应的请求处理方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 @RequestMapping("/get_by_id")
public JsonResult<User> getById(HttpSession session){
    Integer uid = getUidFromSession(session);
    User user = userService.findUserByUid(uid);
    return new JsonResult<>(200,"OK",user);
}

@RequestMapping("/alert_info")
public JsonResult<Void> alertInfo(User user,HttpSession session){
    Integer uid = getUidFromSession(session);
    String username = getUsernameFromSession(session);
    userService.alertInfo(uid,username,user);
    return new JsonResult<>(200,"OK");
}

前端页面修改

功能1

打开userdata.html页面，会自动发送ajax请求到\user\get_by_uid，查询对应数据并展示到页面

1
2
$(document).ready(function (){} );
//页面加载完成自动执行里面的函数逻辑
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(function () {
    $.ajax({
        url: "/user/get_by_id"
        ,type: "GET"
        ,data: null
        ,dataType: "JSON"
        ,success: function (data){
            if(data.state == 200){
                //请求成功，数据展示
                $("#username").val(data.data.username);
                $("#phone").val(data.data.phone);
                $("#email").val(data.data.email);
                let gender = (data.data.gender==0?$("#gender-female"):$("#gender-male"));
                gender.prop("checked","checked");
            }else{
                alert("用户信息获取失败" +data.message);
            }
        }
        ,error:function (xmh){
            alert("用户信息获取失败"+xmh.status);
        }
    });
});

功能2

检测用户点击修改按钮，发送请求到\user\alert_info，进行后台数据更新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$("#btn-change-info").click(function (){
    $.ajax({
        url: "/user/alert_info"
        ,type: "POST"
        ,data: $("#form-change-info").serialize()
        ,dataType: "JSON"
        ,success: function (data){
            if(data.state == 200){
                alert("用户信息修改成功");
            }else{
                alert("用户信息修改失败 "+data.message);
            }
        }
        ,error:function (xmh){
            alert("用户信息修改失败"+xmh.status);
        }
    });
});