Spring Boot + JPA + Mysql 게시판 (2) 게시판 조회

hazy1993 2023. 1. 8. 01:20

게시판 조회

조회는 나중에 게시판타입 조건이라던지

페이징이라던지 처리를 해야하나, 전체적인 데이터 조회하는 기능부터 추가하려고합니다.

(현재 시간이 너무 늦은관계로 ㅠ)

화면만 보여주던 컨트롤러에서

@GetMapping("/freeBoard")
public String FRboardList(Model model){
    return "/board/freeBoard";
}

뿌려줄 리스트를 가져오도록 service추가.

@GetMapping("/freeBoard")
public String FRboardList(Model model){
    List<BoardDto> list = boardService.BoardList();
    model.addAttribute("list",list);
    return "/board/freeBoard";
}

service단에

public List<BoardDto> BoardList(){
    List<Board> boards= boardRepository.findAll();
    List<BoardDto> boardDtoList = new ArrayList<BoardDto>();

    for(Board board : boards){
        boardDtoList.add(BoardDto.fromEntity(board));
    }
    return boardDtoList;
}

추가.

findAll() 하면 현 리파지토리 관련 데이터를 전부 가져오는 기능

데이터를 전부 가져와서 DTO로 변환해준다.

화면단 전체

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
   xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
   layout:decorate="~{layout/layout002}">
<th:block layout:fragment="content002">
<style>
.pink {
      color: #fa626b;
}
.small {
      font-size: 6px;
}
html body a {
   color: currentColor;
}
html body a:hover {
    text-decoration: none;
    color: #fa626b;
}
</style>
   <div class="app-content content">
      <div class="content-wrapper">
         <div class="content-wrapper-before"></div>
         <div class="content-header row">
            <div class="content-header-left col-md-4 col-12 mb-2">
               <h3 class="content-header-title">자유게시판</h3> <!-- Title 입력 -->
            </div>
            <div class="content-header-right col-md-8 col-12">
               <div class="breadcrumbs-top float-md-right">
                  <div class="breadcrumb-wrapper mr-1">
                     <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="/home">Home</a></li> <!-- Home LINK -->
                        <li class="breadcrumb-item active">자유게시판</li> <!-- Title 입력 -->
                     </ol>
                  </div>
               </div>
            </div>
         </div>
         <div class="content-body">
            <section id="chartjs-bar-charts">
               <div class="row">
                  <div class="col-12">
                     <div class="card">
                        <div class="card-header">
                           <h4 class="card-title">Check In Company 자유게시판</h4> <!-- 부제목 입력 -->
                        </div>
                        <div class="card-content collapse show">
                                <div class="row">
                              <div class="col-12">
                                 <div class="card">
                                    <div class="card-header">
                                       <h1 class="card-title"><a href="/FRWrite"><span class="pink"><i class="la la-dedent"></i> 글쓰기</span></a></h1>
                                       <a class="small">글쓰기를 클릭하여 새로운 게시글을 작성 할 수 있습니다.</a>
                                       <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                                       <div class="heading-elements">
                                          <ul class="list-inline mb-0">
                                             <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                                             <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                                             <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                                             <li><a data-action="close"><i class="ft-x"></i></a></li>
                                          </ul>
                                       </div>
                                    </div>
                                    <div class="card-content collapse show">
                                       <div class="card-body">
                                          <p class="card-text">자유게시판 게시글 목록</p>
                                       </div>
                                       <div class="table-responsive">
                                          <table class="table table-bordered mb-0">
                                             <thead>
                                                <tr>
                                                   <th>No</th>
                                                   <th width="55%">제목</th>
                                                   <th>작성자</th>
                                                   <th width="16%">작성일자</th>
                                                </tr>
                                             </thead>
                                             <tbody>
                                                <tr th:each="list: ${list}">
                                                   <td>
                                                      <span th:text="${list.boardNo}"></span>
                                                   </td>
                                                   <td>
                                                      <a th:href="@{'/getBoard/' + ${list.boardNo}}">
                                                         <span th:text="${list.boardTitle}"></span>
                                                      </a>
                                                   </td>
                                                   <td>
                                                      <span th:text="${list.boardContent}"></span>
                                                   </td>
                                                   <td>
                                                      <span th:text="${#temporals.format(list.insDate,'yyyy-MM-dd HH:mm')}"></span>
                                                   </td>
                                                </tr>
                                             </tbody>
                                          </table>
                                       </div>
                                    </div>
                                    <div style="padding-top: 20px; text-align: right;">
                                    <button type="button" class="btn mr-1 mb-1 btn-danger btn-sm"><i class="la la-angle-left"></i></button>
                                    <button type="button" class="btn mr-1 mb-1 btn-danger btn-sm"><i class="la la-angle-right"></i></button>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </section>
         </div>
      </div>
   </div>
</th:block>
</html>

list 데이터 thymeleaf 적용부분

<tbody>
   <tr th:each="list: ${list}">
      <td>
         <span th:text="${list.boardNo}"></span>
      </td>
      <td>
         <a th:href="@{'/getBoard/' + ${list.boardNo}}">
            <span th:text="${list.boardTitle}"></span>
         </a>
      </td>
      <td>
         <span th:text="${list.boardContent}"></span>
      </td>
      <td>
         <span th:text="${#temporals.format(list.insDate,'yyyy-MM-dd HH:mm')}"></span>
      </td>
   </tr>
</tbody>

끝

나중에 Optinal이라던지 추가하고 해야하는데.. 이번프로젝트에 적용할수 있을 지 모르겠다.