01. 게시글 리스트
먼저 mariaDB에서 테스트 데이터를 생성해준다.
여기서 코드 실행은 실행할 부분을 드래그해서 ctrl+엔터 치면 된다. 추가할 땐 추가한 라인만 실행 시킨 뒤 나머지 실행 부분을 다시 실행한다. (여기서 오류나면 맨 위에 use board; 추가한뒤 그것만 실행했다가 아래 영역만 재실행)
call 하고나서 board 표보면 아래처럼 추가된 것을 확인할 수 있다.
서비스에 아래 코드 추가
public List<Board> boardList() {
return boardRepository.findAll();
}[Tip] 빨간 글씨로 오류가 나면 해당 부분 드래그한 뒤 ctrl + 스페이스바 누르면 자동완성들이 아래로 뜸 -> 그중에 맞는 거 선택하면 됨 (여기서는 List가 오류나서 <E>로 되어있는 걸로 자동완성 시킴
그다음 컨트롤러에서 list페이지에 접속했을 때 할 일을 써준다.
이때 Model 객체를 사용하는데, 컨트롤러에서 생성된 데이터를 담아 뷰로 전달할 때 사용하는 객체이다.
model.addAttribute(키, 값)를 이용하여 뷰에 전달할 수 있다.
즉, 서비스의 boardList(); 를 실행한 결과(리스트)를 "list"이름으로 반환하여 넘겨준다는 뜻이다.
@GetMapping("/board/list")
public String boardList(Model model) {
model.addAttribute("list", boardService.boardList());
return "boardlist";
}☆이때 Model을 쓸 때 오류가 난다면, 상단에 아래 코드를 추가한다.
import org.springframework.ui.Model;
그리고
리소스 -> 템플릿에서 boardlist.html 생성
list로 받아온 내용들을 th:each를 통해 한 줄씩 출력한다. (타임리프 탬플릿 사용)
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>게시글 리스트 페이지</title>
</head>
<style>
.layout {
width: 500px;
margin: 0 auto;
margin-top: 40px;
}
</style>
<body>
<div class="layout">
<table>
<thead>
<tr>
<th>글번호</th>
<th>제목</th>
</tr>
</thead>
<tbody>
<tr th:each="board : ${list}">
<td th:text="${board.id}">1</td>
<td th:text="${board.title}">제목입니다.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>[Tip] 드래그 하고 tab키 누르면 여러 줄 한번에 들여쓰기 가능 / 반대로 shift + tab키 하면 뒤로 들여쓰기 가능
그리고 빌드하면 mariaDB에서 저장했던 데이터들이 차례대로 출력된다.
02. 게시글 상세 페이지 생성
게시글을 조회하면 상세 페이지로 이동하여 자세한 내용이 나오게끔 만드는 단계이다.
누르면 이동하는 기능은 나중에 구현하고, 우선 그 결과인 상세 페이지부터 만들도록 한다.
상세페이지는 id로, localhost:8080/board/view?id=1 <-이부분으로 구별하게 된다.
먼저 서비스에서 특정 게시글을 불러오는 함수를 만든다. findByid(id)를 통해 조회하는데, 이 함수는 옵션이 필요하여 추가적인 정의가 필요하기 때문에 뒤에 get()을 붙여서 간단하게 id로만 조회할 수 있도록 만든다.
// 특정 게시글 불러오기
public Board boardView(Integer id){
return boardRepository.findById(id).get();
}
컨트롤러에서 해당 주소로 들어갔을 때 실행할 내용을 써준다. 마찬가지로 Model 객체를 사용하여 뷰에 데이터를 넘겨줄 것이다. 서비스 함수가 실행된 결과를 뷰인 html에 넘겨준다는 뜻이다.
@GetMapping("/board/view") // localhost:8080/board/view?id=1
public String boardView(Model model, @RequestParam("id") Integer id){
model.addAttribute("board", boardService.boardView(id));
return "boardview";
}★여기서 한참 해맸는데... 기존 영상처럼 코드를 작성하며면 boardView(Model model, Integer id) {} 여서 그대로 했다가 페이지 접속했을 때 또 매핑에러가 났다.... 이번에도 폴더명이나 주소같이 이름이 잘못됐는지 처음부터 다시 봤지만 이름은 똑같이 잘했었음,,, 그래서 서비스의 get()함수 대신 옵션붙이는 것도 해보고 코드 다시 작성해보고 별방법 다 써봤는데 안돼서 gpt한테 물어봤다가 저거 @RequestParam() 명시때문인 걸 깨달음...ㅋㅋㅋ
그전에도 명시 안해서 오류 났었는데 역시 스프링 3.x 이상부터는 무조건 명시를 해야 하나 보다 싶었음 (근데 다른데는 안해도 돌아가서 아직 정확히 어디에 명시가 필요한지 모르겠음... 자세히 공부하기 전까지는 일단 또 비슷한 오류가 날 때 명시해주기 선택지도 추가해야겠다)
그리고 데이터를 받아 출력할 화면으로 html을 생성해준다. 아까와 마찬가지로 타임리프 탬플릿을 사용하여 한 줄 씩 출력하도록 한다.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>게시글 상세 페이지</title>
</head>
<body>
<h1 th:text="${board.title}">제목입니다.</h1>
<p th:text="${board.content}">내용이 들어갈 부분입니다.</p>
</body>
</html>★th로 하나씩 가져올 때는 꼭 출처를 쓰자!! 그냥 title, content로 썼다가 안불러와져서 당황했었음 (board.title식으로 쓰라는 뜻)
여기까지 작성하고 빌드한 다음, 원하는 id를 주소에 입력해보면 해당 상세 페이지가 뜬다!!
이제 아까 말했던... 리스트 페이지에서 제목을 눌렀을 때 상세 페이지로 '이동'하는 작업을 구현해줄 것이다.
이건 html의 title불러오는 부분만 수정하면 된다.
아래처럼 td안에 a태그를 만들고, 기존 속성도 a태그에 넣어준다.
그리고 th:href를 하면 a태그에 링크를 걸어주게 되는데, 불러온 title을 클릭하면 해당 링크로 이동하겠다는 뜻이다.
이때 ${board.id}를 써서 해당 id값의 페이지로 이동하게 된다.
<tr th:each="board : ${list}">
<td th:text="${board.id}">1</td>
<td>
<a th:text="${board.title}" th:href="@{/board/view(id=${board.id})}">제목입니다.</a>
</td>
</tr>
수정하고 빌드하면 아래처럼 실행이 된다.
제목부분에 링크가 생기고, 그걸 클릭하면 해당 상세 페이지로 이동한다.
일단 여기까지만 하고 저녁 먹으러 갔다 온 다음에 다시 해야짐
'🍀Web > Back-End' 카테고리의 다른 글
| [공부 기록 04] Spring Boot 게시글 관리 (5) | 2024.08.30 |
|---|---|
| [공부 기록 02] Spring Boot 작성 폼 만들기 (3) | 2024.08.28 |
| [공부 기록 01] Spring Boot 개발 환경 세팅 (4) | 2024.08.27 |
