2023.12.04 - [백엔드(Back-End)/Spring Boot] - [sts4-Spring Boot] 07. Create - 웹에서 게시글 등록하기 구현
[sts4-Spring Boot] 07. Create - 웹에서 게시글 등록하기 구현
2023.11.30 - [백엔드(Back-End)/Spring Boot] - [sts4-Spring Boot] 06. Layout (Presentation Layer - 컨트롤러 처리) [sts4-Spring Boot] 06. Layout (Presentation Layer - 컨트롤러 처리) 2023.11.29 - [백엔드(Back-End)/Spring Boot] - [sts4-Spring
silvow94.tistory.com
게시글을 등록했던 글에 이어, 작성한 게시글을 웹에서 보여주려고 한다.
역시 controller를 조정해야겠지.
@GetMapping(value = "/board/list.do")
public String openBoardList(Model model) {
List<BoardDTO> boardList = boardService.getBoardList();
model.addAttribute("boardList", boardList);
return "board/list";
}
Boardservice에서 호출한 getBoardList 메서드의 실행 결과물을 가져와서 boardList에 저장한다.
Model 은 컨트롤러에서 화면(view)으로 데이터를 전달할 때 사용되는 인터페이스
return : 지정된 경로의 HTML이 화면에 출력, & model의 boardList를 list.html에 같이 넘겨준다.
이제 src/메인/리소스 폴더의 templates/board 패키지에 게시글 리스트를 보여줄 list.html을 생성하자.
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="board/layout/basic">
<th:block layout:fragment="title">
<title>This is a list page</title>
</th:block>
<th:block layout:fragment="search">
<form action="#" id="searchform-header" class="searchform js__toggle active pull-right">
<input type="search" placeholder="Search..." class="input-search">
<button class="mdi mdi-magnify button-search" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</form>
</th:block>
<th:block layout:fragment="content">
<div class="table-responsive clearfix">
<table class="table table-hover">
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>등록일</th>
<th>조회 수</th>
</tr>
</thead>
<tbody>
<tr th:if="${not #lists.isEmpty(boardList)}" th:each="row : ${boardList}">
<td scope="row" th:text="${#strings.equals(row.noticeYn, 'Y') ? '공지' : row.idx}"></td>
<td class="text-left">
<a th:href="@{/board/view.do(idx=${row.idx})}" th:text="${row.title}"></a>
</td>
<td th:text="${row.writer}"></td>
<td th:text="${#temporals.format(row.insertTime, 'yyyy-MM-dd')}"></td>
<td th:text="${row.viewCnt}"></td>
</tr>
<tr th:unless="${not #lists.isEmpty(boardList)}">
<td colspan="5">조회된 결과가 없습니다.</td>
</tr>
</tbody>
</table>
<div class="btn_wrap text-right">
<a th:href="@{/board/write.do}" class="btn btn-primary waves-effect waves-light">Write</a>
</div>
<th:block layout:fragment="paging">
<nav aria-label="Page navigation" class="text-center">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</th:block>
</div>
</th:block>
</html>
layout:fragment="search"
- 게시글 리스트에서 특정 게시글을 검색할 수 있는 영역
- 그러나 아직 기능 구현 안 함
layout:fragment="content"
- 리스트 페이지의 실제 content가 포함된 영역
- 게시글 리스트는 보통 테이블 형태
th:if, th:unless : if, else문과 동일 (unless는 if 와 동일한 조건 지정해야 함)
#list.isEmpty() : 인자로 지정한 데이터가 비어있는지 확인 -> boardList가 비어있으면 true 리턴 -> 앞에 not 붙였으니 반대
th:each : 자바의 forEach와 비슷.
- boardList를 순환해서 데이터를 출력
첫 td td scope="row" th:text="${#strings.equals(row.noticeYn, 'Y') ? '공지' : row.idx}"
- #strings.equals로 공지글 여부가 'Y'면, 첫 번째 열에(scope="row") "공지"라고 출력
- 'N'이라고 등록된 게시글이면 게시글 번호출력
두 번째 td a th:href="@{/board/view.do(idx=${row.idx})}" th:text="${row.title}"> /a <td>
- 게시글 제목 클릭하면, 특정 게시글의 상세 내용을 보여주는 "/board/view.do" URI 호출
세 번째 tdd th:text="${row.writer}"
- 작성자를 텍스트 형식으로 출력
네 번째 tdth:text="${#temporals.format(row.insertTime, 'yyyy-MM-dd')}
- BoardDTO 클래스에서 시간 관련 인스턴스 변수는 temporals.format 으로 원하는 형태 포맷
- 게시글 등록일을 년-월-일
다섯 번째 tdd th:text="${row.viewCnt}"
- 특정 게시글의 조회수를 텍스트 형식으로 출력
- 아직 카운팅 구현 안 함
a th:href="@{/board/write.do}" class="btn btn-primary waves-effect waves-light">Write /a
- 해당 버튼 누르면 write.do URI호출 -> 글 작성 페이지
th:block layout:fragment="paging"
- 리스트에서 특정 페이지로 이동하도록
- 아직 페이징 영역 구현 안 함
'백엔드(Back-End) > Spring Boot' 카테고리의 다른 글
| [sts4-Spring Boot] 09. 게시글 읽기/수정하기 (0) | 2023.12.05 |
|---|---|
| [스프링부트] IoC, Di, 컨테이너 (0) | 2023.12.05 |
| [sts4-Spring Boot] 07. Create - 웹에서 게시글 등록하기 구현 (1) | 2023.12.04 |
| [sts4-Spring Boot] 갑자기 sql database 에러날 때 (1) | 2023.12.04 |
| [sts4-Spring Boot] 06. Layout (Presentation Layer - 컨트롤러 처리) (0) | 2023.11.30 |
