[중간 프로젝트]스프링부트 페이지 클릭시 비동기식으로 이동하기

Glen(OH TaekJoo)·2023년 6월 21일
0

Study

목록 보기
20/53
  • model에 page 형태로 객체들을 저장하고 템플릿으로 넘어간다.
  • 템플릿에서는 받은 페이지 형태로 페이징이 진행되며 페이지버튼 클릭시 /url?page=num 형태로 맵핑이 된다.
  • 스크립트로 해당 버튼클릭시 이벤트로 처리하여 페이지 리로드를 방지하고
  • model값만 새로 받아와 리스트테이블에 적용하여 해당 리스트테이블만 리로드 되게 한다.

html

코드를 입력하세요

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="mypage.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script>
      //사진변경 쿼리
      $(document).ready(function () {
        $(".change-icon").click(function () {
          // "file" 타입의 input 요소 생성
          var inputFile = $('<input type="file">');

          // input 요소에 클릭 이벤트 트리거
          inputFile.trigger("click");

          // 파일 선택 시
          inputFile.change(function () {
            var file = this.files[0];

            if (file) {
              var reader = new FileReader();

              // 파일을 데이터 URL로 읽기
              reader.readAsDataURL(file);

              // 파일 로드가 완료되었을 때
              reader.onload = function (e) {
                // 선택한 파일로 프로필 이미지 업데이트
                $(".profile_img_1").attr("src", e.target.result);
              };
            }
          });
        });
      });




    </script>
    <script>
      $(document).ready(function () {
        $(".menu_box a").click(function (e) {
          e.preventDefault();
          var pageId = $(this).data("page");
          $(".page").hide();
          $("#" + pageId).show();
        });
      });



    </script>

    <script>
      $(document).ready(function () {
        $(".menu_box a").click(function (e) {
          e.preventDefault();
          var pageId = $(this).data("page");
          $(".page").hide();
          $("#" + pageId).show();
        });

        $("#change-password-btn").click(function () {
          if (!$("#current-password").is(":disabled")) {
            $("#current-password").prop("disabled", true);
            $("#save-password-btn").prop("disabled", true);
          } else {
            $("#current-password").prop("disabled", false);
            $(this).prop("disabled", true);
            $("#save-password-btn").prop("disabled", false);
          }
        });

        $("#change-nickname-btn").click(function () {
          $("#nickname").removeAttr("disabled");
          $(this).attr("disabled", true);
          $("#save-nickname-btn").removeAttr("disabled");
        });

        $("#change-email-btn").click(function () {
          $("#email").removeAttr("disabled");
          $(this).attr("disabled", true);
          $("#save-email-btn").removeAttr("disabled");
        });

        $("#save-password-btn").click(function () {
          $("#current-password").attr("disabled", true);
          $(this).attr("disabled", true);
          $("#change-password-btn").removeAttr("disabled");
        });

        $("#save-nickname-btn").click(function () {
          $("#nickname").attr("disabled", true);
          $(this).attr("disabled", true);
          $("#change-nickname-btn").removeAttr("disabled");
        });

        $("#save-email-btn").click(function () {
          $("#email").attr("disabled", true);
          $(this).attr("disabled", true);
          $("#change-email-btn").removeAttr("disabled");
        });
        $("#current-password").prop("disabled", true);
        $("#save-password-btn").prop("disabled", true);
      });




    </script>
    <title>My툴</title>
</head>
<body>
<div class="my_page">
    <!--topbar-->
    <div class="detail_top__bar">
        <nav class="detail_top__bar_menu">
            <div class="logo_box">
                <ul>
                    <li>
                        <a href="http://localhost:8080/">
                            <button type="button" class="logo_button">
                                <img src="/img/230605_툴툴_로고 복사 1.png"/>
                            </button>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="main_menu">
                <ul class="main_menu_ul">
                    <li>
                        <a href="http://localhost:8080/article/list">
                            <span>Review</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://localhost:8080/market/list">
                            <span>Market</span>
                        </a>
                    </li>
                    <li>
                        <a href="http://localhost:8080/notice/list">
                            <span>Notice</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="signLine">
                <div class="signIn" sec:authorize="isAuthenticated()" th:href="@{/user/logout}">
                    <a href="http://localhost:8080/user/logout">
                        <button type="button" class="signIn_button">
                            <img src="https://i.postimg.cc/sDydgSfq/logout.png" class="signIn_img"/>
                            <span>로그아웃</span>
                        </button>
                    </a>
                </div>

                <div class="signIn" sec:authorize="isAnonymous()" th:href="@{/user/login}">
                    <a href="http://localhost:8080/user/login">
                        <button type="button" class="signIn_button">
                            <img src="https://i.postimg.cc/dQGcFnFG/login.png" class="signIn_img"/>
                            <span>로그인</span>
                        </button>
                    </a>
                </div>

                <div class="signUp" sec:authorize="isAuthenticated()" th:href="@{/user/logout}">
                    <a href="http://localhost:8080/mypage">
                        <button type="button" class="signUp_button">
                            <img src="https://i.postimg.cc/wMXCkx2w/mypage.png" class="signUp_img"/>
                            <span>마이페이지</span>
                        </button>
                    </a>
                </div>
                <div class="signUp" sec:authorize="isAnonymous()" th:href="@{/user/login}">
                    <a href="user/signup_menual">
                        <button type="button" class="signUp_button">
                            <img src="https://i.postimg.cc/vHzRgBcB/signup.png" class="signUp_img"/>
                            <span>회원가입</span>
                        </button>
                    </a>
                </div>
            </div>
        </nav>
    </div>
    <!--secondbar-->
    <div class="my_page_second_bar">
        <div class="profile_img">
            <img
                    src="https://i.postimg.cc/m23RYKm6/product-box1.png"
                    class="profile_img_1"
            />
            <button class="change-icon">
                <img
                        src="https://i.postimg.cc/13HmB7VP/Vector.png"
                        class="icon-img"
                />
            </button>
        </div>
        <div class="profile_nickname">
            <div class="nickname">
                <ul>
                    <li>
                        <span class="nick" th:text="${user.nickname}" >닉네임</span>
                        <span th:text="${user.createDate}" >가입일</span>
                    </li>
                </ul>
            </div>
            <div class="level">
                <ul>
                    <li>
                        <p></p>
                    </li>
                </ul>
            </div>
            <div class="undetermined">
                <ul>
                    <li>
                        <p></p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="profile_mark">
            <div class="mark_total_review">
                <ul>
                    <li>
                        <img src="https://i.postimg.cc/43GKgpk2/1.png"/>
                    </li>
                    <li>
                        <a href="#">
                            <span>내가 쓴 리뷰</span>
                        </a>
                    </li>
                    <li>
                        <span th:text="${articleCount}">articleCount</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="profile_mark">
            <div class="mark_total_review">
                <ul>
                    <li>
                        <img src="https://i.postimg.cc/43GKgpk2/1.png"/>
                    </li>
                    <li>
                        <a href="#">
                            <span>내가 쓴 판매글</span>
                        </a>
                    </li>
                    <li>
                        <span th:text="${marketCount}">marketCount</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--flex_box-->
    <div class="flex_box" layout:fragment="content">
        <!--menu_box-->
        <div class="menu_box">
            <ul>
                <li>
                    <span class="my_page">MY ToolTool</span>
                </li>
                <li>
                    <a href="#" data-page="menu1">
                        <span>내 정보</span>
                    </a>
                </li>
                <li>
                    <a href="#" data-page="menu2">
                        <span>내가 쓴 리뷰</span>
                    </a>
                </li>
                <li>
                    <a href="#" data-page="menu3">
                        <span>내가 쓴 판매글</span>
                    </a>
                </li>
                <li>
                    <a href="#" data-page="menu4">
                        <span>찜 목록</span>
                    </a>
                </li>
            </ul>
        </div>
        <!--content_box-->
        <div class="content_box">
            <div id="menu1" class="page page-1 menu_information">
                <div class="title">내 정보</div>
                <div class="underline"></div>
                <form>
                    <div class="form_group">
                        <label for="username">아이디</label>
                        <input th:placeholder="${user.username}" type="text" id="username"  disabled/>
                    </div>
                    <div class="underline"></div>
                    <div class="form_group">
                        <label for="current-password">현재 비밀번호</label>
                        <input type="password" id="current-password" value="132131"/>
                        <button type="button" id="change-password-btn">
                            비밀번호 변경
                        </button>
                        <button type="button" id="save-password-btn" disabled>
                            완료
                        </button>
                    </div>
                    <div class="underline"></div>
                    <div class="form_group">
                        <label for="nickname">닉네임</label>
                        <input th:placeholder="${user.nickname}" type="text" id="nickname"  disabled/>
                        <button type="button" id="change-nickname-btn">
                            닉네임 변경
                        </button>
                        <button type="button" id="save-nickname-btn" disabled>
                            완료
                        </button>
                    </div>
                    <div class="underline"></div>
                    <div class="form_group">
                        <label for="email">이메일</label>
                        <input  th:placeholder="${user.email}"
                                type="email"
                                id="email"

                                disabled
                        />
                        <button type="button" id="change-email-btn">이메일 변경</button>
                        <button type="button" id="save-email-btn" disabled>완료</button>
                    </div>
                </form>
            </div>

            <div id="menu2" class="page menu_review">
                <div class="title">내가 쓴 리뷰</div>
                <div class="review_board_page_1">
                <div class="underline"></div>
                <table class="review_board_table">
                    <tr>
                        <th class="number">게시글 번호</th>
                        <th>제목</th>
                        <th class="date">작성일</th>
                    </tr>
                    <tr th:each="article, stat : ${articlePaging}" th:if="${stat.index < 9}" >
                        <td class="number" th:text="${article.id}"></td>
                        <td class="content"><a th:href="@{|/article/detail/${article.id}|}"
                                               th:text="${article.subject}"></a></td>
                        <td class="date" th:text="${article.createDate}"></td>
                    </tr>
                </table>
                </div>
                <div class="pagination-1">
                <div class="pagination">
                    <ul class="page-list">
                        <li th:classappend="${!articlePaging.hasPrevious} ? 'disabled'" class="disabled">
                            <a class="page-link"
                               th:href="${articlePaging.hasPrevious} ? @{|?page=${articlePaging.number-1}|} : @{|?page=0|}">
                                <span>이전</span>
                            </a>
                        </li>
                        <li th:each="page: ${#numbers.sequence(0, articlePaging.totalPages)}"
                            th:if="${page >= articlePaging.number-3 and page <= articlePaging.number+3}"
                            th:classappend="${page == articlePaging.number} ? 'active'"
                            class="page-item">
                            <a th:text="${page}" class="page-link" th:href="@{|?page=${page}|}"></a>
                        </li>
                        <li th:classappend="${!articlePaging.hasNext} ? 'disabled'" class="disabled">
                            <a class="page-link"
                               th:href="${articlePaging.hasNext} ? @{|?page=${articlePaging.number+1}|} : @{|?page=${articlePaging.totalPages}|}">
                                <span>다음</span>
                            </a>
                        </li>
                    </ul>
                </div>
                </div>
            </div>


            <div id="menu3" class="page menu_sale">
                <div class="title">내가 쓴 판매글</div>
                <div class="review_board_page_2">
                <div class="underline"></div>
                <table class="market_board_table">
                    <tr>
                        <th class="number">게시글 번호</th>
                        <th>제목</th>
                        <th class="date">작성일</th>
                    </tr>
                    <tr th:each="market, stat : ${marketPaging}" th:if="${stat.index < 9}">
                        <td class="number" th:text="${market.id}"></td>
                        <td class="content"><a th:href="@{|/market/detail/${market.id}|}"
                                               th:text="${market.subject}"></a></td>
                        <td class="date" th:text="${market.createDate}"></td>
                    </tr>
                </table>
                </div>
                <div class="pagination-2">
                <div class="pagination">
                    <ul class="page-list">
                        <li th:classappend="${!marketPaging.hasPrevious} ? 'disabled'" class="disabled">
                            <a class="page-link"
                               th:href="${marketPaging.hasPrevious} ? @{|?page=${marketPaging.number+1}|} : @{|?page=0|}">
                                <span>이전</span>
                            </a>
                        </li>
                        <li th:each="page: ${#numbers.sequence(0, marketPaging.totalPages)}"
                            th:if="${page >= marketPaging.number-3 and page <= marketPaging.number+3}"
                            th:classappend="${page == marketPaging.number+1} ? 'active'"
                            class="page-item">
                            <a th:text="${page}" class="page-link" th:href="@{|?page=${page}|}"></a>
                        </li>
                        <li th:classappend="${!marketPaging.hasNext} ? 'disabled'" class="disabled">
                            <a class="page-link"
                               th:href="${marketPaging.hasNext} ? @{|?page=${marketPaging.number+1}|} : @{|?page=${marketPaging.totalPages}|}">
                                <span>다음</span>
                            </a>
                        </li>
                    </ul>
                </div>
                </div>

            </div>

            <div id="menu4" class="page menu_pick">
                <div class="title">찜 목록</div>
                <div class="underline"></div>
                <table>
                    <tr>
                        <th class="number">게시글 번호</th>
                        <th>제목</th>
                        <th class="date">작성일</th>
                    </tr>
                    <tr>
                        <td class="number">1</td>
                        <td class="content"><a href="#">여름 휴가 계획</a></td>
                        <td class="date">2023-06-01</td>
                    </tr>
                    <tr>
                        <td class="number">2</td>
                        <td class="content"><a href="#">카페 이벤트</a></td>
                        <td class="date">2023-06-02</td>
                    </tr>
                    <tr>
                        <td class="number">3</td>
                        <td class="content"><a href="#">맛있는 케이크</a></td>
                        <td class="date">2023-06-03</td>
                    </tr>
                    <tr>
                        <td class="number">4</td>
                        <td class="content"><a href="#">맛있는 케이크</a></td>
                        <td class="date">2023-06-03</td>
                    </tr>
                    <tr>
                        <td class="number">5</td>
                        <td class="content"><a href="#">맛있는 케이크</a></td>
                        <td class="date">2023-06-03</td>
                    </tr>
                    <tr>
                        <td class="number">6</td>
                        <td class="content"><a href="#">맛있는 케이크</a></td>
                        <td class="date">2023-06-03</td>
                    </tr>
                    <tr>
                        <td class="number">7</td>
                        <td class="content"><a href="#">맛있는 케이크</a></td>
                        <td class="date">2023-06-03</td>
                    </tr>
                    <tr>
                        <td class="number">8</td>
                        <td class="content"><a href="#">맛있는 케이크</a></td>
                        <td class="date">2023-06-03</td>
                    </tr>
                    <tr>
                        <td class="number">9</td>
                        <td class="content"><a href="#">맛있는 케이크</a></td>
                        <td class="date">2023-06-03</td>
                    </tr>
                    <tr>
                        <td class="number">10</td>
                        <td class="content"><a href="#">맛있는 케이크</a></td>
                        <td class="date">2023-06-03</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <!--footer-->
    <footer>
        <div class="footer-content">
            <p>&copy; 툴툴 Welcome</p>
            <nav>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
            </nav>
        </div>
    </footer>
</div>
<script>
$(document).ready(function() {
  // .pagination-1 내의 페이지 링크 클릭 이벤트 처리
  $('.pagination-1 a.page-link').on('click', function(e) {
    e.preventDefault(); // 기본 링크 동작 방지

    var pageUrl = $(this).attr('href'); // 클릭된 링크의 URL 가져오기

    // 업데이트된 내용을 가져오기 위해 AJAX 요청 생성
    $.ajax({
      url: pageUrl,
      method: 'GET',
      success: function(response) {
        // 응답에서 업데이트된 내용 추출하기
        var updatedContent = $(response).find('.review_board_table').html();

        // 기존 테이블 내용 대체하기
        $('.review_board_table').html(updatedContent);
      },
      error: function() {
        // AJAX 요청이 실패한 경우 에러 처리
        console.log('내용을 가져오는 중에 오류가 발생했습니다.');
      }
    });
  });
});

</script>
<script>
    $(document).ready(function() {
  // .pagination-2 내의 페이지 링크 클릭 이벤트 처리
  $('.pagination-2 a.page-link').on('click', function(e) {
    e.preventDefault(); // 기본 링크 동작 방지

    var pageUrl = $(this).attr('href'); // 클릭된 링크의 URL 가져오기

    // 업데이트된 내용을 가져오기 위해 AJAX 요청 생성
    $.ajax({
      url: pageUrl,
      method: 'GET',
      success: function(response) {
        // 응답에서 업데이트된 내용 추출하기
        var updatedContent = $(response).find('.market_board_table').html();

        // 기존 테이블 내용 대체하기
        $('.market_board_table').html(updatedContent);
      },
      error: function() {
        // AJAX 요청이 실패한 경우 에러 처리
        console.log('내용을 가져오는 중에 오류가 발생했습니다.');
      }
    });
  });
});
</script>

</body>
</html>
profile
Glen(OH TaekJoo)
병아리 개발자 의 우당탕탕 성장기
이전 포스트

[중 프로젝트] 게시글 작성 폼 , 클래스 추가 (풀스택 / 점프투 스프링부트 기반 )

다음 포스트

[점프 투 스프링부트] 점프투 스트링부트 배포

0개의 댓글