ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 4. 블로그 프로젝트
    프로그래밍 2022. 7. 9. 14:50
    반응형

    각 게시물을 세부적으로 보는 detail 페이지와 수정하는 update 페이지를 추가하고 update, delete를 구현하였다.

     

    update.html

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
        <head>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
            
            <title>블로그</title>
        </head>
    
        <body>
            <div class="container">
    
                <h1 class="display-3 center-block">재원블로그</h1>
                
                <input id="postID" hidden th:value="${post.id}">
    
                <p th:text="${post.title}"></p>
                <p th:text="${post.content}"></p>
                <button id="updateButtonClicked" class="btn btn-light">수정</button>
                <button id="deletePost" class="btn btn-light">삭제</button>
    
            </div>
    
    
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
            <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
            <script src="/js/main.js"></script>
        </body>
    </html>

    update.html를 구성할 때 문제는 id를 어떻게 전달하냐였다. 이를 해결하기 위해서 input의 hidden 속성을 이용하여 화면에는 뜨지 않게 하고, thymeleaf에서 값을 렌더링하도록 하여 자바스크립트에서 사용할 수 있도록 하였다. 

    반응형

    '프로그래밍' 카테고리의 다른 글

    6. 블로그 프로젝트  (0) 2022.07.19
    5. 블로그 프로젝트  (0) 2022.07.17
    3. 블로그 프로젝트  (0) 2022.07.06
    2. 블로그 프로젝트  (0) 2022.07.05
    1. 블로그 프로젝트  (0) 2022.07.02
Designed by Tistory.