SpringBoot+React按钮点击更新实体属性的实现方案咨询

1. 修正实体类Pakketje #

原实体类缺少JPA必需的Getter/Setter方法，还混入了不属于实体的注解，修正后代码如下：

package com.Code.Pakket.management.model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Pakketje {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private int id;
    private int code;
    private String status = "In magazijn";

    // JPA要求的空构造器
    public Pakketje() {
    }

    // 可选：带参数构造器，方便创建实例
    public Pakketje(int code) {
        this.code = code;
    }

    // Getter & Setter 必须实现，否则JPA无法操作属性
    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }
}

2. 优化Repository层 #

原Repository基础上新增高效的直接更新方法（避免先查再存的冗余操作）：

package com.Code.Pakket.management.repository;

import com.Code.Pakket.management.model.Pakketje;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Modifying;
import org.springframework.data.jpa.repository.Query;
import org.springframework.stereotype.Repository;
import org.springframework.transaction.annotation.Transactional;

@Repository
public interface PakketjeRepository extends JpaRepository<Pakketje, Integer> {

    // 直接通过ID更新状态，无需查询整个实体
    @Modifying
    @Transactional
    @Query("UPDATE Pakketje p SET p.status = ?1 WHERE p.id = ?2")
    void updateStatusById(String status, int id);
}

说明：@Modifying标记这是修改操作，@Transactional保证事务一致性，自定义JPQL语句直接操作数据库，性能更优。

3. 完善Service层 #

3.1 Service接口 #

package com.Code.Pakket.management.service;

public interface PakketjeService {
    // 根据ID将状态改为"Onderweg"
    void updateStatusToOnderweg(int id);
}

3.2 Service实现类 #

package com.Code.Pakket.management.service.impl;

import com.Code.Pakket.management.repository.PakketjeRepository;
import com.Code.Pakket.management.service.PakketjeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class PakketjeServiceImpl implements PakketjeService {

    private final PakketjeRepository pakketjeRepository;

    // 推荐构造器注入方式
    @Autowired
    public PakketjeServiceImpl(PakketjeRepository pakketjeRepository) {
        this.pakketjeRepository = pakketjeRepository;
    }

    @Override
    public void updateStatusToOnderweg(int id) {
        // 用自定义的高效更新方法
        pakketjeRepository.updateStatusById("Onderweg", id);

        // 备选方案：先查后改（适合多属性修改场景）
        // Pakketje pakketje = pakketjeRepository.findById(id)
        //         .orElseThrow(() -> new RuntimeException("Pakketje niet gevonden met id: " + id));
        // pakketje.setStatus("Onderweg");
        // pakketjeRepository.save(pakketje);
    }
}

4. 编写Controller层（提供React调用的REST接口） #

package com.Code.Pakket.management.controller;

import com.Code.Pakket.management.service.PakketjeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api/pakketjes")
@CrossOrigin // 解决React跨域问题，也可配置全局跨域
public class PakketjeController {

    private final PakketjeService pakketjeService;

    @Autowired
    public PakketjeController(PakketjeService pakketjeService) {
        this.pakketjeService = pakketjeService;
    }

    // PUT请求：修改指定ID的Pakketje状态
    @PutMapping("/{id}/status/onderweg")
    public ResponseEntity<String> updateStatusToOnderweg(@PathVariable int id) {
        try {
            pakketjeService.updateStatusToOnderweg(id);
            return new ResponseEntity<>("Status succesvol gewijzigd naar Onderweg", HttpStatus.OK);
        } catch (RuntimeException e) {
            return new ResponseEntity<>(e.getMessage(), HttpStatus.NOT_FOUND);
        }
    }
}

5. React端调用示例 #

在React组件中，点击按钮时发送PUT请求到后端接口：

const updatePakketStatus = (pakketId) => {
    fetch(`/api/pakketjes/${pakketId}/status/onderweg`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.text())
    .then(message => {
        console.log(message);
        // 这里可以刷新列表或更新组件状态，比如重新获取Pakketje列表
    })
    .catch(error => {
        console.error('Fout bij wijzigen status:', error);
    });
};

// 组件中使用按钮触发
// <button onClick={() => updatePakketStatus(pakket.id)}>Zet naar Onderweg</button>

内容的提问来源于stack exchange，提问作者Cezar P