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

本文档详细介绍了在SpringBoot项目中,如何处理个人资料的控制层异常和请求设计,包括用户数据查询及更新的请求路径、方式和响应结果。同时,概述了前端页面的代码编写和测试过程,确保用户数据能正确显示和更新。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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用户后,切换到个人资料页面:
在这里插入图片描述
重新输入数据,点击修改:
在这里插入图片描述
查看数据库中的数据:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值