728x90
반응형
안녕하세요 놀이방사장입니다.
이번 포스팅은
글 상세 화면에서[삭제]버튼을 눌러 글을 삭제하는 기능을 만들어보겠습니다.
삭제코드는 자바스크립트로 작성
src/main/resources/static 디렉터리에 js 디렉터리를 만들고 article.js파일을 만든다.
const deleteButton = document.getElementById('delete-btn');
if(deleteButton){
deleteButton.addEventListener('click', event => {
let id = document.getElementById('article-id').value;
fetch(`/api/articles/${id}`,{
method : 'DELETE'
})
.then(()=>{
alert('삭제가 완료되었습니다.');
location.replace('/articles');
});
});
} 자바스크립트 코드 HTML에서 id를 delete-btn 으로 설정한 엘리먼트를 찾아 그 엘리멘트에서 클릭 이벤트가 발생하면 fetch() 메서드를 통해 /api/articles/DELETE 요청을 보내는 역활을 한다.
fetch() 메서드에 이어지는 then()메서드는 fetch() 가 잘 완료되면 연이어 실행되는 메서드입니다.
alert() 메서드는 then 메서드가 실행되는 시점에 웹 브라우저 화면으로 삭제가 완료되었음을 알리는 팝업을 띄어주는 메서드이고 location.replace() 메서드는 실행시 사용자의 웹 브라우저 화면을 현재 주소를 기반해 옮겨주는 역할을 한다.
article.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>블로그 상세보기</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/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>
<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')}|"></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>
<button type="button" id="delete_btn"
class="btn btn-secondary btn-sm">삭제</button>
</article>
</div>
<a th:href="@{/articles}">메인화면으로</a>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-lg-8">
<article>
<input type="hidden" id="article_id" th:value="${article.id}">
<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="|Post on
${#temporals.format(article.createdAt, 'yyyy-MM-dd')}|"></div>
</header>
</article>
</div>
</div>
</div>
<script src="/js/article.js"></script>
</body>
</html>
이렇게 하면 글 삭제가 됩니다!
반응형
'웹 > Spring' 카테고리의 다른 글
| 스프링부트3 회원가입 로그인, 로그아웃 구현하기 - 회원 도메인 만들기 (0) | 2023.10.23 |
|---|---|
| 스프링부트3 회원가입 로그인, 로그아웃 구현하기 - 사전지식 스프링 시큐리티 (0) | 2023.10.23 |
| 스프링부트3 블로그 글 상세보기 구현하기 (0) | 2023.10.21 |
| 스프링부트3 블로그 목록 뷰 구현하기 (0) | 2023.10.21 |
| 스프링부트3 - 블로그 화면 구성하기 알고 갈 사전지식 - 타임리프 (1) | 2023.10.21 |
