[프로젝트] 게시판 뷰 페이지 만들기(Thymleaf, ArticleController)

안녕하세요 강정호 입니다.

 

오늘은 게시판 프로젝트에서 게시판 뷰를 만들어보려고 합니다.

 

ArticleController와 index.html에 데이터를 뿌려서 보여줄 예정입니다.

 

ArticleController.java

@RequiredArgsConstructor
@RequestMapping("/articles")
@Controller
public class ArticleController {

    private final ArticleService articleService;


    /**
     * 사용 목적 : 검색타입, 검색어, 페이징을 파라메터로 받아서
     * article 리스트를 응답해주는 api
     * */
    @GetMapping
    public String articles(
            @RequestParam(required = false) SearchType searchType,
            @RequestParam(required = false) String searchValue,
            @PageableDefault(size = 10, sort = "createdAt", direction = Sort.Direction.DESC) Pageable pageable,
            ModelMap map
    ){
        /**
         * ModelMap 사용하는 이유
         * ModelMap에 데이터만 저장하여 View에서 사용하기 위해서이다.
         * ModelAndView는 데이터와 View 화면명 정보까지 같이 저장한다.
         *
         * @RequestParam : URL에서 파라미터 값과 이름을 함께 전달하는 방식으로 게시판 등에서 페이지 및 검색정보를
         * 함께 전달하는 방식으로 사용할 때 많이 쓴다. 주로 GET방식의 통신을 할 때 쓴다.
         * */

        map.addAttribute("articles", articleService.searchArticles(searchType, searchValue, pageable).map(ArticleResponse::from));
        return "articles/index";
     }
    }

게시판 조회 URL : /articles

/articles 로 호출하면 자동으로 ArticleController에서 Mapping이 된다.

이 때 입력한 검색타입, 검색어를 이용해서 ArticleService에서 게시글을 조회해온다.

 

ModelMap 이라는 데이터 저장 객체에 "articles" 라는 이름으로 Key, value 형식으로 속성을 저장한다.

그리고 articles/index 페이지에 리턴.

 

게시글이 for문이 돌아서 게시글리스트가 조회되는 부분.

index.html

<table class="table" id="article-table">
        <thead>
        <tr>
            <th class="title col-6">제목</th>
            <th class="hashtag col-2">해시태그</th>
            <th class="user-id col">작성자</th>
            <th class="created-at col">작성일</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="title"><a>첫글</a></td>
            <td class="hashtag">#java</td>
            <td class="user_id">Uno</td>
            <td class="created-at"><time>2022-01-01</time></td>
        </tr>
        <tr>
            <td>두번째글</td>
            <td>#spring</td>
            <td>Uno</td>
            <td><time>2022-01-02</time></td>
        </tr>
        <tr>
            <td>세번째글</td>
            <td>#java</td>
            <td>Uno</td>
            <td><time>2022-01-03</time></td>
        </tr>
        </tbody>
    </table>

위 코드만으로는 DB에서 가져온 게시글 리스트를 반복해서 보여줄 수 없다.

그래서 table에 id="article-table" 을 설정하고 index.th.xml에서 반복해준다. 디커플링 방식으로 반복부를 따로 로직으로 빼내는 Thymeleaf 기술이다.

 

index.th.xml

<?xml version="1.0"?>
<thlogic>
    <attr sel="#header" th:replace="header :: header"/>
    <attr sel="#footer" th:replace="footer :: footer"/>

    <attr sel="#article-table">
        <attr sel="tbody" th:remove="all-but-first">
            <attr sel="tr[0]" th:each="article : ${articles}">
                <attr sel="td.title/a" th:text="${article.title}" th:href="@{'/article/'+${article.id}}" />
                <attr sel="td.hashtag" th:text="${article.hashtag}" />
                <attr sel="td.user-id" th:text="${article.nickname}"  />
                <attr sel="td.created-at/time" th:datetime="${article.createdAt}" th:text="${#temporals.format(article.createdAt, 'yyyy-MM-dd')}"/>
            </attr>
        </attr>
    </attr>
</thlogic>

<attr sel="#article-table">에서 index.html의 article-table을 찾아서 반복문으로 데이터를 뿌려주는 역할을 한다.

th:remove