Springboot入门项目二：个人资料页面设计与实现

2023-05-15 20:13:12

个人资料管理：控制层与前端设计指南

背景

个人资料管理页面是用户在网站或应用程序中管理其个人信息的关键功能。为了确保此页面的平稳运行和用户满意度，控制层和前端设计必须精心地协同工作。本文将深入探讨个人资料管理中控制层和前端设计的最佳实践，重点介绍异常处理、请求设计和代码示例。

控制层设计

1. 异常处理

异常处理是控制层中的关键考虑因素。个人资料管理可能遇到多种异常，例如用户不存在的异常（UserNotFoundException）和更新数据时发生的未知异常（UpdateException）。为了确保程序的稳定运行，需要在控制层中处理这些异常。

示例代码：

@RestController
@RequestMapping("/users")
public class UserController {

    @GetMapping("/get_by_uid")
    public JsonResult<User> getByUid(HttpSession session) {
        try {
            User user = userService.getByUid((Integer) session.getAttribute("uid"));
            return JsonResult.ok(user);
        } catch (UserNotFoundException e) {
            return JsonResult.err(e.getMessage());
        }
    }

    @PostMapping("/change_info")
    public JsonResult<String> changeInfo(@RequestBody User user, HttpSession session) {
        try {
            userService.changeInfo(user, (Integer) session.getAttribute("uid"));
            return JsonResult.ok("修改成功");
        } catch (UpdateException e) {
            return JsonResult.err(e.getMessage());
        }
    }

}

2. 请求设计

请求设计是控制层与前端交互的关键因素。对于个人资料管理，需要两个请求：

获取当前用户数据： 请求路径 /users/get_by_uid，请求方式 GET，响应结果为 JsonResult。
修改用户数据： 请求路径 /users/change_info，请求方式 POST，响应结果为 JsonResult。

前端设计

前端需要根据控制层的请求设计，发送相应的请求。

示例代码：

// 获取当前用户数据
function getUserInfo() {
    $.ajax({
        url: "/users/get_by_uid",
        type: "GET",
        success: function (data) {
            if (data.code === 200) {
                // 填充个人资料页面数据
                $("#username").val(data.data.username);
                $("#email").val(data.data.email);
                $("#phone").val(data.data.phone);
            } else {
                alert(data.msg);
            }
        },
        error: function () {
            alert("请求失败");
        }
    });
}

// 修改个人资料
function changeInfo() {
    var user = {
        username: $("#username").val(),
        email: $("#email").val(),
        phone: $("#phone").val()
    };
    $.ajax({
        url: "/users/change_info",
        type: "POST",
        data: JSON.stringify(user),
        contentType: "application/json",
        success: function (data) {
            if (data.code === 200) {
                alert("修改成功");
            } else {
                alert(data.msg);
            }
        },
        error: function () {
            alert("请求失败");
        }
    });
}