7월 27일 목요일 TIL 회고록

게시글 전체 조회 , 상세 조회 페이지 다시 제작

---

게시글 전체 조회 페이지(html)를 수정했다.

게시글 전체 조회 API를 사용해서 값을 받을때 원래는 이런식으로 받아오도록 만들었었다.

 var html = ''
 response.content.forEach(Element => {

   html += '<tr>';
   html += '	<td>'+Element.id+'</td>';
   html += '   <td><a href= "/viewBoard.html">'+Element.title+'</a></td>';
   html += '   <td>'+Element.username+'</td>';
   html += '   <td>'+Element.createdAt+'</td>';
   html += '   <td>'+Element.views+'</td>';
   html += '   <td>'+Element.boardLike+'</td>';
   html += '</tr>';

html을 선언하고 response.content를 forEach로 반복문을 돌려서 html에 Element의 값들을 넣었다.

이렇게 넣으니 게시글 선택 조회 페이지를 구현할때 어떻게 구현해야 할지 모르겠어서.. 며칠을 생각했지만 답은 나오지 않았다..

 

그래서 다시 코드를 짜서 게시글을 받아오도록 만들었다.

 

먼저 body 부분을 수정했다.

        <div class="row mb-5" id="boardList">
            <div class="card w-100 p-3" style="width: max-content">
              <div class="card-header">Quote</div>
              <div class="card-body">
                <blockquote class="blockquote mb-0">
                  <p>
                    A well-known quote, contained in a blockquote element.
                  </p>
                  <footer class="blockquote-footer">
                    Someone famous in
                    <cite title="Source Title">Source Title</cite>
                  </footer>
                </blockquote>
              </div>
            </div>
          </div>

부트스트랩 사이트를 참고해서 body부분을 수정했다.

 

스크립트 부분도 수정했다.

 $('#boardList').empty();
        for(var i = 0; i < response.content.length; i++) {
            $('#boardList').append(
                `<div class="card w-100 p-3" onclick="choiceOneBoard(${response.content[i].id})" style="width: max-content; cursor: pointer;">
                  <div class="card-header"></div>
                  <div class="card-body">
                    <blockquote class="blockquote mb-0">
                      <p>
                        ${response.content[i].title}
                      </p>
                      <span style="display:none;">${response.content[i].id}</span>
                      <footer class="blockquote-footer">
                        nickname:  
                        <cite title="Source Title">${response.content[i].username}</cite>
                        <span> / [좋아요: ${response.content[i].boardLike}]</span>
                       	<span> / [댓글수: ${response.content[i].countComments}]</span>
                        <span> / [작성 시간: ${response.content[i].createdAt}]</span>
                         <span> / [조회수: ${response.content[i].views}]</span>
                      </footer>
                    </blockquote>
                  </div>
                </div>`
            );
        }

.empty()를 사용해서 boardList의 값을 비운 후 for문을 사용해서 response.content 길이만큼 반복문을 돌게 만들었다.

$('boardList')에 append를 사용해 값을 넣어주었다. body 부분에 텍스트를 입력하는 부분에 response.content[i]번째의 값들이 들어가도록 만들었다.

 

    function choiceOneBoard(boardId) {
        console.log(boardId);
        localStorage.setItem("boardId", String(boardId));
        window.location = "ddd.html";
    }

boardId를 매개변수로 받는 choiceOneBoard 펑션을 만들었다.

localStorage.setItem을 사용하여 String(boardId)를 "boardId'에 저장한 후 window.loaction을 사용해서 ddd.html로 이동시킨다.

 

 

실행 결과

실행하면 이렇게 사이트가 나온다. 스타일은 나중에... 기능을 다 구현하고 시간이 남으면 만져야겠다.

제목과 이름, 작성시간, 조회수가 잘 나오는 것을 볼 수 있다. 댓글 부분은 아직 구현을 하지 않았다.

---

게시글 상세 조회 페이지 구현

 

상세 조회 페이지도 전체 조회 페이지와 비슷하게 만들었다. 부트스트랩을 사용하여 바디 부분을 만들었다.

<h2 class="text-black h5" style="font-size: 30px">
	 게시물 단건조회
  </h2>
	</div>
   </div>
  </div>
   <div class="row mb-5" id="boardList" style="display: block">
      보드 디자인 넣을 공간임. 

 	<div class="card" id="boardCard">
    <div class="card-body">
    <h3 class="card-title">Card title</h3>
    <div>작성자 명</div>
    <p class="card-text">
     This is a wider card with supporting text below as a
     natural lead-in to additional content. This content is a
     little bit longer.
     </p>
      <p class="card-text">
              <small class="text-muted">Last updated 3 mins ago</small>
       </p> 
   </div>

 

      function viewBoard() {
        var settings = {
          url: `http://localhost:8080/api/boards/${parseInt(
            localStorage.getItem("boardId")
          )}`,
          method: "GET",
          timeout: 0,
          headers: {
            Authorization: localStorage.getItem("accessToken"),
          },
        };

        $.ajax(settings)
          .done(function (response) {
            console.log(response);
            if (localStorage.getItem("username") == response.username) {
              $("#boardCard").append(
                `<div class="card-body">
                <p style="color:black;"> 카테고리 : [${response.boardSort}]</p>
                <p style="color:black;"> 조회수 : [${response.views}]</p>
                <hr/>
                    <h3 class="card-title"> ${response.title}</h3>

                    <p class="card-text">
                       ${response.content}
                    </p>
                    <hr/>
                    <span id="writerNickname">${response.username}</span>
                    <span>  <--작성자 닉네임</span>

                  </div>
                </div>`
              );

스크립트 부분에 상세 조회 API를 사용해서 값을 가져오도록 만들었다.

localStorage.getItem("boardId")를 사용해서 boardId 값을 가져온 후 parseInt를 사용해서 정수형으로 바꿔주었다.

if문을 사용해 localStorage.getItem("username")이 response.username과 같으면 $("#boardCard")에 response.의 값을 추가해주었다.

 

실행 결과

조회가 잘 되는 것을 볼 수 있다. 이것도 스타일은 나중에.. 해야겠다.

드디어 게시글 선택(상세) 조회 페이지를 만들었다.. 진짜 오래걸렸다. 모르는 부분은 저번 팀 프로젝트 프론트 부분을 참고하여 만들었다.

아직 해야 할 것들이 산더미이다 ㅠㅠ 얼른 만들고싶다.

---

내일은 게시글 수정, 삭제 기능, 더 시간이 된다면 aws에 배포까지 해보고싶다. 차차 완성이 되는 것 같아 기분이 좋다.