◎ 글 상세 화면에서 [ 삭제 ] 버튼 클릭 시, 글을 삭제해보자.
삭제 API로 요청을 보낼 코드를 작성하고 테스트해보자
1. 삭제 기능 코드 작성
- 삭제 코드는 자바스크립트로 작성
▪︎ article.js ( src/main/resources/static 디렉터리)
// * 삭제 버튼이 눌러졌으면 그 삭제 버튼의 이벤트 등록
// HTML에서 id를 'delete-btn'으로 설정한 엘리멘트를 찾아 상수로 선언
const deleteButton = document.getElementById('delete-btn')
// deleteButton이 있는 경우
if (deleteButton) {
// 그 엘리멘트에 클릭 이벤트를 발생하면 fetch() 메서드를 통해
// '/api/articles/DELETE' 요청을 보내는 역할
deleteButton.addEventListener('click', event => {
let id = document.getElementById('article-id').value;
fetch(`/api/articles/${id}`, {
method: 'DELETE'
})
// * then() : fetch()가 잘 완료되면 연이어 실행되는 메서드
.then(() => {
// * alert() : then() 메서드가 실행되는 시점에 웹 브라우저 화면으로
// 삭제가 완료되었음을 알리는 팝업을 띄어주는 메서드
alert('삭제가 완료되었습니다.');
// * location.replace() : 실행 시 사용자의 웹 브라우저 화면을
// 현재 주소를 기반해 옮겨주는 역할
location.replace('/articles');
});
});
}• deleteButton 코드 상세 설명
❶ deleteButton을 document.getElementById()로 찾음
❷ deleteButton 객체에 ‘click’ 이벤트를 addEventListener() 메서드로 등록함
→ 이 때 비동기 처리할 콜백함수를 하나 정의함
이 콜백함수에서 fetch( ) 메서드를 사용함
❸ fetch( ) 메서드
- XMLHttpRequest 객체보다 최근에 나온, HTTP 요청 전송 기능을 제공하는 Web API
- fetch( ) 메서드로 HTTP 요청하기
• HTTP 요청을 전송할 URL, HTTP 요청 메서드, HTTP 요청 헤더, 페이로드 등을 설정한 객체를 전달
• fetch( ‘요청할 주소’, { 요청메서드와 요청파라미터의 JSON 객체} )로 요청서버로 요청정보를 보냄
= 웹 브라우저에서 요청하는 것을 구현
❹ then( ) 메서드
- 요청 서버가 응답을 보내주면, then( ) 메서드에서 서버 응답을 처리함
- 즉, fetch( ) 메서드 호출 후 실행 결과 then( ) 메서드가 호출되는 순서
- 응답 처리 결과를 alert( ) 메서드를 통해 사용자게 알려주는 역할
fetch( `/api/articles/${id}`, { method: 'DELETE’ } )
- 요청 주소 : 경로 변수를 이용한 방법으로 데이터 전송
- 요청메서드 : DELETE
- 요청정보 : 없음
❺ location 객체
- location.replace( “URL 주소” );
: 현재 URL을 지정한 URL로 대체해서 바꾸고 이동 불가
2) [ 삭제 ] 버튼을 눌렀을 때 삭제하도록 [ 삭제 ] 버튼, 즉 button 엘리멘트에 'delete-btn'이라는 아이디 값을 추가
article.js가 이 화면에서 동작하도록 임포트함
▪︎ article.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>블로그 글</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="p-5 mb-5 text-center</> bg-light">
<h1 class="mb-3">My Blog</h1>
<h4 class="mb-3">블로그에 오신 것을 환영합니다!</h4>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-lg-8">
<article>
<!-- 블로그 글 id 추가 -->
<input type="hidden" id="article-id" th:value="${article.id}">
<!-- header 영역 -->
<header class="mb-4">
<h1 class="fw-bolder mb-1" th:text="${article.title}"></h1>
<div class="text-muted fst-italic mb-2"
th:text="|Posted on ${ #temporals.format(article.createdAt, 'yyyy-MM-dd HH:mm')}|"></div>
</header>
<section class="mb-5">
<p class="fs-5 mb-4" th:text="${article.content}"></p>
</section>
<button type="button" class="btn btn-primary btn-sm">수정</button>
<!-- [삭제] 버튼에 id 추가 -->
<button type="button"id="delete-btn" class="btn btn-secondary btn-sm">삭제</button>
</article>
</div>
</div>
</div>
<!-- article.js 파일 추가 -->
<script src="/js/article.js"></script>
</body>
2) 실행 테스트하기
- 웹 브라우저에서 'localhost/articles/1'에 접속한 다음, 상세 글에서 [ 삭제 ] 버튼을 클릭해 삭젝가 잘 되는지 확인
- [ 확인 ]을 누르면 삭제가 완료되고, 글 목록 화면으로 이동했을 때 실제로 삭제되었는지 확인
- id = 1인 글 삭제된 것 확인 가능
'백엔드 > Spring Boot' 카테고리의 다른 글
| Maven Project를 Gradle Project로 변경하기 (0) | 2023.08.11 |
|---|---|
| 7. 블로그 화면 구성하기 (5) - 수정 / 생성 기능 추가 (0) | 2023.08.10 |
| Oracle Database 연결 시 환경설정 및 확인 방법 (0) | 2023.08.09 |
| 7. 블로그 화면 구성하기 (3) - 블로그 글 구현하기 (0) | 2023.08.08 |
| 외부 파일 import 방법 (0) | 2023.08.08 |