1. 控制层
1. 异常处理
可能会出现用户不存在的异常–UserNotFoundException
更新数据时可能会发生未知的异常–UpdateException
2. 请求设计
- 一进入个人资料页面,发送查询当前用户数据的请求
请求路径:/users/get_by_uid
请求方式:GET
请求数据:HttpSession session
响应结果:JsonResult< User > - 点击修改按钮,发送修改用户数据的请求
请求路径:/users/change_Info
请求方式:POST
请求数据:User user, HttpSession session
响应结果:JsonResult< Void >
3. 请求处理
@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) {
Integer uid = getUidFromSession(session);
String username = getUsernameFromSession(session);
userService.changeInfoByUid(uid, username,user);
return new JsonResult<>(OK);
}
4. 测试
测试1:/users/get_by_uid
- 使用用户luck登录
- 登录成功后再在浏览器地址栏输入以下地址,回车,查看是否查询到用户数据
测试2:/users/change_Info
- 使用用户luck登录
- 登录成功后再在浏览器地址栏输入以下地址,回车
- 查看数据库数据:
2. 前端页面
页面代码使用已提供的,只编写处理数据的部分
1. 前端代码
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "/users/get_by_uid",
type: "GET",
dataType: "json",
success: function(json) {
if (json.state == 200) {
console.log("username=" + json.data.username);
console.log("phone=" + json.data.phone);
console.log("email=" + json.data.email);
console.log("gender=" + json.data.gender);
$("#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("获取用户信息失败!" + json.message);
}
}
});
});
$("#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 = "login.html";
} else {
alert("修改失败!" + json.message);
}
},
error: function(xhr) {
alert("您的登录信息已经过期,请重新登录!HTTP响应码:" + xhr.status);
location.href = "login.html";
}
});
});
</script>
2. 测试
登录luck用户后,切换到个人资料页面:
重新输入数据,点击修改:
查看数据库中的数据: