JPA 맛보기 2

삭제, 수정 기능

 

Controller에 다음 문구들 추가

@PutMapping("{id}")
public Chicken updateChicken(@PathVariable("id") Integer id, @RequestBody Chicken chicken) {
    System.out.println(chicken);
    return chickenService.updateChicken(id, chicken);
}

@DeleteMapping("{id}")
public void deleteChicken(@PathVariable("id") Integer id) {
    chickenService.deleteChicken(id);
}

 

 

Service에 다음 문구들 추가

//수정하기
public Chicken updateChicken(Integer id, Chicken updateChicken) {
    Chicken chicken = chickenRepository.findById(id)
                        .orElseThrow(() -> new RuntimeException("일치하는 정보를 찾을 수 없습니다."));

    chicken.setChickenName(updateChicken.getChickenName()); //수정된 이름을 가져와서 넣기
    chicken.setDescription(updateChicken.getDescription());
    chicken.setPrice(updateChicken.getPrice());
    return chickenRepository.save(chicken);
}

//삭제하기
public void deleteChicken(Integer id) {
    Chicken chicken = chickenRepository.findById(id)
            .orElseThrow(() -> new RuntimeException("일치하는 정보를 찾을 수 없습니다."));
    System.out.println(chicken);
    chickenRepository.delete(chicken);
}

 

그리고 ChickenDetail.js에 다음 문구들 추가

	//중략...
    
    const [isEditing, setIsEditing] = useState(false);
    const navigate = useNavigate();

    const handleOpenForm = () => {
        setIsEditing(true);
    }

    const handleUpdate = () => {
        console.log(editData);

        axios.put(`http://localhost:9090/api/chicken/${id}`, editData, {
            headers: {
                "Content-Type": "application/json"
            }
        })
        .then(res => {
            setChicken(res.data); //기존 DB에 있는 내용 가져오기
            setEditData({
                chickenName: res.data.chickenName,
                description: res.data.description,
                price: res.data.price
            });
        })
        .catch(err => {
            console.log("에러 : ", err);
            
        })

        setIsEditing(false);

    }
    
    // 중략...

    const deleteMenu = () => {
        axios.delete(`http://localhost:9090/api/chicken/${id}`)
        .then(res => {
            alert("삭제 완료");
            navigate("/");
        })
        .catch(err => {
            alert("삭제 실패");
        })
    }
    
    //중략...

    return (
        <div className="chicken-detail-container">
            {/* 수정하기 버튼 누르면 수정하는 기능 나오고 안누르면 작성된 내용 보여주기 */}
            {
                isEditing ?
                    <div>
                        <input type="text" name="chickenName" value={editData.chickenName} onChange={(e) => setEditData({...editData, chickenName:e.target.value})} />
                        <textarea name="description" value={editData.description} onChange={(e) => setEditData({...editData, description:e.target.value})} />
                        <input type="number" name="price" value={editData.price} onChange={(e) => setEditData({...editData, price:e.target.value})} />
                        <button onClick={handleUpdate}>수정 완료</button>
                        <button onClick={돌아가기}>돌아가기</button>
                    </div>

                    :

                    <div>
                        <h1>{chicken.chickenName}</h1>
                        <p>{chicken.description}</p>
                        <p>{chicken.price}원</p>
                        <button onClick={handleOpenForm}>수정하기</button>
                        <button onClick={deleteMenu}>메뉴삭제</button>
                    </div>
            }
        </div>
    )
}
export default ChickenDetail;

 

메뉴 리스트

 

상세 수정 전

 

수정 폼 입력

 

수정 완료

 

삭제 버튼 클릭 시

 

삭제 완료

 

수정, 삭제 모두 DB와 연동이 되어 있음을 확인.

어차피 메뉴 리스트 불러올 때 DB에서 불러오므로 DB 내에서도 삭제 됐음을 알 수 있다.