如何通过单API调用结合Spring Data Rest与React实现用户注册关联？

我正在使用React开发用户注册表单，后端采用Spring Data Rest。注册表单包含firstName、lastName、username、city和country字段，其中city与country字段为标准列表选项，数据来源于city和country数据表。

在常规Java MVC应用中，我们会向/registration地址提交类似firstName=Scot&lastName=Taylor&username=scot_taylor&city=45&country=32的参数，Spring控制器会通过如下DTO接收：

public class UserDetailDto {

    private String firstName;
    private String lastName;
    private String username;
    private Long city;   // city表的主键
    private Long country; // country表的主键

    // 省略getter/setter等其他代码
}

该DTO会被传递至registration service，由service加载city和country实体，关联至新创建的User实体后存入数据库。

查阅Spring Data Rest文档得知，默认需要执行三次HTTP请求：

• POST: 保存User，地址/users
• PUT: 更新城市关联，地址/users/1/city
• PUT: 更新国家关联，地址/users/1/country

请问如何结合Spring Data Rest与React，通过单次API调用实现上述功能？

解决方案1：自定义注册端点 #

这是最直接的方案，复用你熟悉的MVC模式，同时保留Spring Data Rest的其他原生功能。

后端实现 #

1. 创建自定义控制器，暴露/registration专属端点：

@RestController
@RequestMapping("/registration")
public class RegistrationController {

    private final UserRepository userRepository;
    private final CityRepository cityRepository;
    private final CountryRepository countryRepository;

    // 构造函数注入依赖
    public RegistrationController(UserRepository userRepository, CityRepository cityRepository, CountryRepository countryRepository) {
        this.userRepository = userRepository;
        this.cityRepository = cityRepository;
        this.countryRepository = countryRepository;
    }

    @PostMapping
    public ResponseEntity<User> registerUser(@RequestBody UserDetailDto dto) {
        // 加载关联实体，处理无效ID的异常
        City city = cityRepository.findById(dto.getCity())
                .orElseThrow(() -> new IllegalArgumentException("无效的城市ID"));
        Country country = countryRepository.findById(dto.getCountry())
                .orElseThrow(() -> new IllegalArgumentException("无效的国家ID"));

        // 创建并关联User实体
        User user = new User();
        user.setFirstName(dto.getFirstName());
        user.setLastName(dto.getLastName());
        user.setUsername(dto.getUsername());
        user.setCity(city);
        user.setCountry(country);

        // 保存用户并返回结果
        User savedUser = userRepository.save(user);
        return ResponseEntity.ok(savedUser);
    }
}

2. 可以给UserDetailDto添加校验注解（如@NotBlank、@NotNull），配合Spring Validation做参数合法性校验。

React前端实现 #

表单提交时直接组装DTO格式的数据，发送一次POST请求即可：

const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = {
        firstName: firstNameRef.current.value,
        lastName: lastNameRef.current.value,
        username: usernameRef.current.value,
        city: selectedCityId, // 下拉选择的city主键ID
        country: selectedCountryId // 下拉选择的country主键ID
    };

    try {
        const response = await fetch('/registration', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        });
        const savedUser = await response.json();
        // 处理注册成功逻辑，比如跳转首页、提示用户
    } catch (error) {
        console.error('注册失败:', error);
        // 前端错误提示
    }
};

解决方案2：利用Spring Data Rest原生关联URI提交 #

Spring Data Rest支持在创建主实体时，直接通过关联资源的URI设置关联关系，无需额外编写控制器。

后端准备 #

确保User实体中city、country的关联关系映射正确，且Spring Data Rest已暴露/cities和/countries端点（默认只要继承JpaRepository就会自动暴露）。

React前端实现 #

提交数据时，将city和country字段设置为对应资源的URI，而非主键ID：

const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = {
        firstName: firstNameRef.current.value,
        lastName: lastNameRef.current.value,
        username: usernameRef.current.value,
        city: `/cities/${selectedCityId}`, // 拼接city资源的完整URI
        country: `/countries/${selectedCountryId}` // 拼接country资源的完整URI
    };

    try {
        const response = await fetch('/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        });
        const savedUser = await response.json();
        // 处理注册成功逻辑
    } catch (error) {
        console.error('注册失败:', error);
    }
};

解决方案3：自定义DTO与Spring转换器结合 #

通过实现Spring的Converter接口，自动将自定义DTO转换为User实体，让Spring Data Rest直接处理DTO提交。

后端实现 #

1. 实现Converter<UserDetailDto, User>转换器：

@Component
public class UserDetailDtoToUserConverter implements Converter<UserDetailDto, User> {

    private final CityRepository cityRepository;
    private final CountryRepository countryRepository;

    public UserDetailDtoToUserConverter(CityRepository cityRepository, CountryRepository countryRepository) {
        this.cityRepository = cityRepository;
        this.countryRepository = countryRepository;
    }

    @Override
    public User convert(UserDetailDto source) {
        User user = new User();
        user.setFirstName(source.getFirstName());
        user.setLastName(source.getLastName());
        user.setUsername(source.getUsername());
        
        // 加载并关联城市、国家实体
        City city = cityRepository.findById(source.getCity())
                .orElseThrow(() -> new IllegalArgumentException("无效的城市ID"));
        user.setCity(city);
        
        Country country = countryRepository.findById(source.getCountry())
                .orElseThrow(() -> new IllegalArgumentException("无效的国家ID"));
        user.setCountry(country);
        
        return user;
    }
}

2. 确保转换器被Spring容器扫描到（比如放在Spring Boot的主应用包或子包下）。

React前端实现 #

和解决方案1的前端代码完全一致，直接提交DTO格式数据到/users端点即可：

const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = {
        firstName: firstNameRef.current.value,
        lastName: lastNameRef.current.value,
        username: usernameRef.current.value,
        city: selectedCityId,
        country: selectedCountryId
    };

    try {
        const response = await fetch('/users', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        });
        const savedUser = await response.json();
        // 处理注册成功逻辑
    } catch (error) {
        console.error('注册失败:', error);
    }
};

内容的提问来源于stack exchange，提问作者Kiran Kyle