[블로그 만들기] 15. 게시판 구현 : 목록보기

1. Index.mustache파일에 게시판 만들기

{{> layout/header}}

<div class="container p-5">

        <div class="card mb-3">
            <div class="card-body">
                <h4 class="card-title mb-3">제목1</h4>
                <a href="/board/1" class="btn btn-primary">상세보기</a>
            </div>
        </div>

    <ul class="pagination d-flex justify-content-center">
        <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>

</div>

{{> layout/footer}}

2. BoardRepository 만들기

• IoC 컨테이너에 하나만 띄워서 관리하기

private final EntityManager em; // IoC 컨테이너에 띄우기

• findAll의 목적이 Board_tb의 데이터를 조회해서 화면에 뿌리는 것이고

• 원래는 board가 아니라 id랑 title같이 필요한 정보만 받는게 맞음!

package shop.mtcoding.blog.board;

import jakarta.persistence.EntityManager;
import jakarta.persistence.Query;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Repository;

import java.util.List;

@RequiredArgsConstructor
@Repository
public class BoardRepository {

    private final EntityManager em; // jpa가 제공해줌

    // 조회니까 트랜잭션 필요없음
    public List<Board> findAll() { // 보드 테이블의 모든 것 가지고 오기
        Query query = em.createNativeQuery("select * from board_tb order by id desc", Board.class);
        System.out.println("BoardRepository에 findAll 메서드 호출됨");
        return query.getResultList(); // 여러건
    } // 이 결과를 리퀘스트에 담고 뷰 화면 가서 뿌리기
}

3. BoardResponse에서 DetailDTO 가방 만들기

package shop.mtcoding.blog.board;

import lombok.Data;

public class BoardResponse {

    @Data
    public static class DetailDTO {
        private int id;
        private String title;
        private String content;
        private int userId;
        private String username;
    }
}

4. BoardController에서 index 주소 만들기

package shop.mtcoding.blog.board;

import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import shop.mtcoding.blog.user.User;

import java.util.List;

@RequiredArgsConstructor
@Controller
public class BoardController {

    // HttpSession 객체를 참조
    private final HttpSession session;
    private final BoardRepository boardRepository; // DI

    @GetMapping({"/", "/board"})
    public String index(HttpServletRequest request) {

        User sessionUser = (User) session.getAttribute("sessionUser");
        if (sessionUser == null) {
            System.out.println("로그인 안된 상태입니다");
        } else {
            System.out.println("로그인 된 상태입니다");
        }
        List<Board> boardList = boardRepository.findAll();
        request.setAttribute("boardList", boardList); // ("key", value)
        return "index";
    }

    @GetMapping("/board/saveForm")
    public String saveForm() {
        return "board/saveForm";
    }

    @GetMapping("/board/1")
    public String detail() {
        return "board/detail";
    }
}

3. index에 mustache 문법으로 반복문 만들기

• {{#}} {{/}} : if문

{{> layout/header}}

<div class="container p-5">

    {{#boardList}}
        <div class="card mb-3">
            <div class="card-body">
                <h4 class="card-title mb-3">제목1</h4>
                <a href="/board/1" class="btn btn-primary">상세보기</a>
            </div>
        </div>
    {{/boardList}}

    <ul class="pagination d-flex justify-content-center">
        <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>

</div>

{{> layout/footer}}

4. Index에 자바 코드 변수 집어넣기

• {{}} : 변수 출력하기 / ‘title’과 ‘id’라는 변수

• 주소 뒤에 올 수 있는 것은 PK or Unique만 가능함

{{#boardList}}
        <div class="card mb-3">
            <div class="card-body">
                <h4 class="card-title mb-3">{{title}}</h4>
                <a href="/board/{{id}}" class="btn btn-primary">상세보기</a>
            </div>
        </div>
    {{/boardList}}

{{> layout/header}}

<div class="container p-5">

    {{#boardList}}
        <div class="card mb-3">
            <div class="card-body">
                <h4 class="card-title mb-3">{{title}}</h4>
                <a href="/board/{{id}}" class="btn btn-primary">상세보기</a>
            </div>
        </div>
    {{/boardList}}

    <ul class="pagination d-flex justify-content-center">
        <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>

</div>

{{> layout/footer}}