이제 게시판에 게시글이 어떤게 있나 살펴볼 차례이다.
이전에 게시판에 글이 좀 들어있어야 살펴보기 쉬우므로 MySQL workbench에 SQL문을 통해 게시글을 추가해준다.
MySQL workbench에 아래와 같이 프로시저 SQL문을 삽입한다.
아래와 같은 SQL문 실행으로 120개의 튜플이 삽입되는 프로시저가 생성되었다.
CREATE PROCEDURE TESTDataInsert()
BEGIN
declare i int default 1;
while i <= 120 do
insert into board(title,content)
values(concat('제목',i),concat('내용',i));
set i = i +1;
END WHILE;
end$$프로시저 실행을 위해 call명령어로 프로시저를 불러준다.
call TESTDataInsert();프로시저 실행 후 테이블에 120개의 튜플이 삽입된 것을 확인 할 수있다.
프로시저 추가시 no database에러가 난다면 board라는 스키마를 사용한다고 명시해주는 SQL문을 추가해준다.
use board;그리고 다시 실행하면 프로시저가 추가된다.
boardController에서 list페이지로 이동할 수 있는 실행함수를 만들어준다.
아래와 같이 작성하면 localhost:8090/board/list링크로 들어갔을때 boardList.html로 연결해준다.
@GetMapping("/board/list")
public String boardList(){
return "boardList";
}우리는 아직 boardList.html을 만들지 않았으므로 templates 아래에 html파일을 만들어준다.
boardList.html은 표 형식으로 구성해주기 위해 아래와 같이 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>게시글 리스트 페이지</title>
</head>
<style>
.layout{
<!-- 크기는 500px-->
width : 500px;
<!-- 위아래 0 양옆은 자동으로-->
margin : 0 auto;
margin-top : 40px;
}
</style>
<body>
<div class="layout">
<table>
<thead>
<tr>
<th>글번호</th>
<th>제목</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>제목입니다.</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>실행해서 list링크로 접속하면 아래와 같이 출력된다.
이제 표를 만들어 주었으니 표에 database에 프로시저로 넣어주었던 데이터들을 가져올 때이다.
database와 직접연결되어 데이터를 다룰수있는 BoardService로 간다.
BoardService에서 여러개의 튜플을 받아와야하므로 List<Board>가 리턴형인 boardList() 함수를 만들어준다.
아래와 같이 작성한다.
public List<Board> boardList(){
return boardRepository.findAll();
// findAll()은 List<Board>라는 리스트를 반환해주는 함수이다.
}findAll()?: JPA의 CRUD함수중 하나로 SQL의 select문을 담당한다.
service에서 데이터베이스의 정보를 불러오는 함수를 만들었으니 이 함수를 Controller에서 불러다가 view로 넘겨준다.
boardController의 boardList함수를 아래와 같이 변경한다.
@GetMapping("/board/list")
public String boardList(Model model){
// controller에서 데이터를담아서 view페이지로 전달해줄때 사용하는 model
model.addAttribute("list",boardService.boardList());
// boardService에서 넘어온 list값들을 "list"라는 이름으로 받아서 view로 넘기겠다
return "boardList";
}model은 view페이지로 데이터를 넘겨주기 위한 객체이다.
Model은 hashmap과 같이 키 값의 쌍으로 구성되어있다.
addAttribute는 map의 put과 같은 기능을 한다.
따라서 위의 코드는 list라는 키에 게시물의 리스트가 값으로 묶여서 model변수에 저장된다는 의미이다.
model을 boardList로 넘겨주었으니 이제 boardList에서는 thymeleaf 문법을 사용하여 데이터베이스의 121개의 튜플을 반복해서 출력해준다.
boardList의 코드는 아래와 같다
<!DOCTYPE html>
<!--데이터를 받아와서 처리해주기 위해 thymeleaf를 사용한다.-->
<!--html 태그에 xmlns:th="http://www.thymeleaf.org" 이걸 달아주면 타임리프 문법을 쓸수 있다.-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>게시글 리스트 페이지</title>
</head>
<style>
.layout{
<!-- 크기는 500px-->
width : 500px;
<!-- 위아래 0 양옆은 자동으로-->
margin : 0 auto;
margin-top : 40px;
}
</style>
<body>
<div class="layout">
<table>
<thead>
<tr>
<th>글번호</th>
<th>제목</th>
</tr>
</thead>
<tbody>
<!-- each는 반복문이다. list에서 board가 없어질때까지 총 121번게시글 갯수만큼-->
<tr th:each="board : ${list}">
<td th:text="${board.id}"></td>
<td th:text="${board.title}"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>th:each는 반복문이다. 키가 list인 값들을 하나씩 불러온다.
th:text는 태그안에 넣을 글자를 전달받은 값으로 하고 싶을때 사용한다.
<!-- board라는 변수명은 아무거나 써도 상관없다. -->
아래와 같은 결과가 나오면 성공!
'spring boot를 이용한 게시판' 카테고리의 다른 글
| 게시글 접속 (0) | 2023.01.27 |
|---|---|
| 게시글 DB에 저장하기 (0) | 2023.01.26 |
| 게시글 작성 폼 (0) | 2023.01.26 |
| maria db에 테이블 생성하기 (0) | 2023.01.25 |
| spring boot 프로젝트 생성하기 (0) | 2023.01.25 |
