앞에서 Repository 를 통해 가져온 데이터를 Eclipse 콘솔창에 출력을 했습니다.
이번에는 데이터를 브라우저에 출력해보겠습니다.
HTML 페이지 작성
데이터베이스에서 가져온 데이터를 보여주기 위해서는 html 페이지를 작성해야 합니다.
다음과 같이 templates 디렉토리에 question_list.html 파일을 생성합니다.
다음으로 앞에서 만든 QuestionController 를 수정해야합니다.
model 을 통해 html 페이지에 데이터를 전달할 수 있는데
우리는 questionList 라는 변수에 데이터베이스에서 찾은 모든 데이터를 담아서 전송하겠습니다.
package com.crud.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import com.crud.model.Question;
import com.crud.repository.QuestionRepository;
@RestController
public class QuestionController {
@Autowired
private QuestionRepository questionRepository;
@GetMapping("/question/list")
public String list(Model model) {
List<Question> questionList = questionRepository.findAll();
model.addAttribute("questionList", questionList);
return "question_list";
}
}question_list 페이지는 thymeleaf 를 통해 작성을 합니다.
thymeleaf 는 jsp 와 같은 템플릿 엔진으로 html 을 데이터와 결합해 페이지를 그려줍니다.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table>
<thead>
<tr>
<th>제목</th>
<th>작성일시</th>
</tr>
</thead>
<tbody>
<tr th:each ="question : ${questionList}">
<td th:text = "${question.subject}"></td>
<td th:text = "${question.createDate}"></td>
</tr>
</tbody>
</table>
</body>
</html>QuestionController 에서 모델을 통해 questionList 라는 변수에 담은 데이터를 가져옵니다.
브라우저를 통해 localhost:8080/question/list 에 접속하면 다음과 같이 질문 데이터가 출려됩니다.
현재 데이터의 create_date 의 값이 들어있지 않기 때문에 출력이 안되는데
이 부분은 추후에 테이블에 데이터를 새로 넣어서 수정하겠습니다.
URL 페이지 수정
localhost:8080 또는 localhost:8080/ 으로 접속하게 되면 브라우저에 hello 라는 문자가 출력이 됩니다.
우리는 이 루트 페이지로 접속했을때에도 질문 데이터가 출력되도록 controller 를 수정하겠습니다.
package com.crud.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class Main {
@GetMapping("/")
public String index() {
return "redirect:/question/list";
}
}redirect : /question/list 를 통해 '/' 에 접속하면 localhost:8080/question/list 로 이동하도록 하였습니다.
브라우저를 통해 localhost:8080/ 에 접속해보면 다음과 같습니다.
'Spring > Springboot 실습' 카테고리의 다른 글
| 게시판 만들기 - 질문 상세페이지 작성 (0) | 2023.01.08 |
|---|---|
| 게시판 만들기 - service 작성 (0) | 2023.01.08 |
| 게시판 만들기 - Repository 작성 (0) | 2023.01.06 |
| 게시판 만들기 - JPA 를 통한 테이블 생성 (0) | 2023.01.05 |
| 게시판 만들기 - 시작 및 환경설정 (0) | 2023.01.04 |
