블로그 만들기 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;

@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 limit 0,3", Board.class);
        return query.getResultList(); // 여러건
    } // 이 결과를 리퀘스트에 담고 뷰 화면 가서 뿌리기
}

3.DI해서 값 가져오기

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 org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.ResponseBody;

@RequiredArgsConstructor
@Controller
public class BoardController {

    private final HttpSession session;
    private final BoardRepository boardRepository; // DI

    // http://localhost:8080?page=0
    @GetMapping({"/", "/board"})
    public String index() {
				List<Board> boardList = boardRepository.findAll();
				request.setAttribute("BoardList", boardList); // ("key", value)
        return "index";
    }

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

    // 상세보기시 호출
    @GetMapping("/board/{id}") // 1이 프라이머리키 -> 뭐든 넣어도 실행시키려면 변수화시켜서 {}
    public String detail(@PathVariable int id) {
        System.out.println("id : "+id);
				// body 데이터가 없으면 유효성 검사할 필요 없음
        BoardResponse.DetailDTO reponseDTO = boardRepository.findById(id);

				request.setAttribute("board", responseDTO);
        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}}