티스토리 뷰

SpringBoot+Thymeleaf

Controller 생성하기

joyHong 2020. 2. 11. 00:28

이전 포스팅에서는 RestController를 생성하고 업무로직을 임시로 간단히 만들어 구동되는 것을 해보았다.

이번에는 Controller를 생성하고 그에 맞는 뷰페이지를 간단히 만들어볼 예정이다.

@RestController 어노테이션을 사용할 때는 문자열, VO 객체, 자바 컬렉션 등을 뷰페이지 없이 바로 JSON로 변환하게 제공하기 때문에 API를 생성할 때 유용하겠다.

뷰 페이지를 통해 요청에 따른 응답을 제공하려면 @Controller 어노테이션을 통해 컨트롤러를 생성해야 한다.

생성해야하는 프로젝트 구조

먼저 TestController2 클래스 파일을 생성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package com.joyhong.controller;
 
import org.springframework.stereotype.Controller;
 
import com.joyhong.service.BookService;
 
@Controller
public class TestController2 {
    
    @Autowired
    private BookService bookService;
 
    @RequestMapping(value = "/test4", method = RequestMethod.GET)
    public String test4(Model model) {
        model.addAttribute("book", bookService.readBook(1L));
        return "test/test4";
    }
    
}
 
 
 

클래스명 위에 @Controller 어노테이션을 작성하고, 이전 포스팅에서 생성한 업무로직인 BookService를 사용하기 위해 @Autowired 어노테이션으로 의존성을 삽입하였다.

사용자가 웹브라우저를 통해 http://~/test4 를 요청하면,

bookService.readBook(1L) 에 의해 업무로직에서 1번 책을 찾고

그 결과를 뷰에 전달하기 위해 모델 객체에 담는다.

그리고 응답으로 제공해야 하는 뷰페이지는  return "test/test4" 를 통해 이름을 알려주게 된다.

위와 같이 작성을 하였으면 다음으로는 뷰페이지를 생성한다.

뷰페이지로 사용하는 html은 src/main/resource/templates 아래에 생성하면 되는데

여기에서는 test용 페이지기 때문에 src/main/resource/templates/test 아래에 test4.html 이라고 생성하겠다.

스프링부트에서 사용할 수 있는 뷰템플릿으로서 타임리프(Thymeleaf)가 있는데 이것을 사용하여 뷰페이지를 생성할 것이다.

우선 코드는 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ko">
<head>
<meta charset="UTF-8">
<title>뷰페이지 만들기</title>
</head>
<body>
<div>
<h3>첵정보</h3>
<ul>
    <li>책번호 : [[${book.seq}]]</li>
    <li>책제목 : [[${book.title}]]</li>
    <li>출판사 : [[${book.publisher}]]</li>
    <li>저자 : [[${book.creator}]]</li>
    <li>출판연도 : [[${book.publishedYear}]]</li>
</ul>
</div>
</body>
</html>
 
 

2번 라인에 <http://www.thymeleaf.org" lang="ko">​ 부분을 반드시 작성 해야 한다.

${ } 안에 객체명을 적으면 되고, [[ ]] 로 감싸게 되면 바로 화면에 보여지게 된다.

뷰페이지까지 만들었으면 결과를 확인해 보자.

여기까지는 됐는데 이제는 사용자가 원하는 번호의 책 정보를 보고 싶어진다.

즉 URL에 원하는 책 번호를 입력받아 처리하는 코드를 작성 할 필요가 있다.

그럼 다시 컨트롤러에서 다음의 메소드를 추가한다.

1
2
3
4
5
6
7
8
 
    @RequestMapping(value = "/test4/{id}", method = RequestMethod.GET)
    public String test4_1(Model model, @PathVariable Long id) {
        model.addAttribute("book", bookService.readBook(id));
        return "test/test4";
    }
  

사용자가 URL에 입력하는 책번호를 {id} 를 통해 입력받아 @PathVariable 어노테이션으로 Long id 에 연결시켰다.

그리고 id 변수를  bookService.readBook(id)를 통해 업무로직에 번호를 넘겨 결과를 생성하도록 추가하였다.

이제는 http://~/test4/책번호 를 통해 원하는 책 번호를 URL에 입력하여 결과를 확인해 볼 수 있다.

 

그럼 마지막으로 책 정보 하나 외에 모든 책 정보를 보려면 어떻게 해야 할까?

이전 포스팅에서 만들어둔 업무로직 중에 모든 책을 읽어 가져오는 메소드를 만들었었다. 이를 활용하여 컨트롤러에 추가 작성하고 이에 맞는 뷰페이지를 작성해 보겠다.

컨트롤러에 추가할 코드는 아래와 같다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
package com.joyhong.controller;
 
import org.springframework.stereotype.Controller;
 
import com.joyhong.service.BookService;
 
@Controller
public class TestController2 {
    
    @Autowired
    private BookService bookService;
 
    @RequestMapping(value = "/test4", method = RequestMethod.GET)
    public String test4(Model model) {
        model.addAttribute("book", bookService.readBook(1L));
        return "test/test4";
    }
 
    @RequestMapping(value = "/test4/{id}", method = RequestMethod.GET)
    public String test4_1(Model model, @PathVariable Long id) {
        model.addAttribute("book", bookService.readBook(id));
        return "test/test4";
    }
    
    @RequestMapping(value = "/test5", method = RequestMethod.GET)
    public String test5(Model model) {
        model.addAttribute("bookMap", bookService.readBookAll());
        return "test/test5";
    }
    
}
 
 
 

위에서 30~34번 줄에 해당한다.

사용자가 /test5로 요청을 보내면 모든 책 정보를 읽어 결과로 만들고 해당 뷰페이지는 test/test5 라고 뷰리졸버에게 알려준다. 그럼 test5.html 을 아래와 같이 만든다.

 

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div th:each="entry : ${bookMap}">
    [[${entry}]]
</div>
</body>
</html>
 
 

 

컨틀로러에서 Model 객체에 결과로 넘겨주는 값은  HashMap 인데 이를 처리하기 위해

8번 라인에서 반복문을 사용하고 있다.

th:each 구문을 통해 bookMap(model 객체에 담을 때 쓴 key 값임)에 담긴 내용을 entry로 하나씩 꺼내가면서 반복문을 수행하게 된다.

결과는 아래와 같다.

타임리프에서 사용되는 구문은 다음 포스팅에서 좀 더 살펴보도록 하겠다.

'SpringBoot+Thymeleaf' 카테고리의 다른 글

타임리프로 뷰페이지 만들기 - Form (폼)  (0) 2020.02.17
타임리프로 뷰페이지 만들기 - 기본 문법  (0) 2020.02.12
업무로직 만들기  (0) 2020.02.10
RestController 생성하기  (0) 2020.02.09
이클립스 HTML 템플릿에 타임리프 형식추가  (0) 2020.02.09
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함