springboot入门项目-个人资料2-控制层/前端

1. 控制层

1. 异常处理

可能会出现用户不存在的异常–UserNotFoundException
更新数据时可能会发生未知的异常–UpdateException

2. 请求设计

1. 一进入个人资料页面，发送查询当前用户数据的请求
   请求路径：/users/get_by_uid
   请求方式：GET
   请求数据：HttpSession session
   响应结果：JsonResult< User >
2. 点击修改按钮，发送修改用户数据的请求
   请求路径：/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

1. 使用用户luck登录
   
2. 登录成功后再在浏览器地址栏输入以下地址，回车，查看是否查询到用户数据
   

测试2：/users/change_Info

1. 使用用户luck登录
   
2. 登录成功后再在浏览器地址栏输入以下地址，回车
   
3. 查看数据库数据：
   

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用户后，切换到个人资料页面：

重新输入数据，点击修改：

查看数据库中的数据：