thymeleaf로 HTML 페이지를 동적으로 만듭니다 (spring + gradle)

7104 단어 gradle초보자spring자바Thymeleaf
지난번에는 spring + gradle에서 helloworld를 봅니다. 에서 화면에 HTML을 표시했습니다.
이번에는 화면을 동적으로 움직여보고 싶기 때문에 입력한 문자를 화면에 표시시키고 싶습니다. 초보자의 비망록이므로 이상한 점 등 있으면 지적 받을 수 있으면 기쁩니다!

완성 후는 이런 느낌입니다 ↓

전송을 누르면


전회의 기사로 사용한 코드에 그대로 기입해 갑니다만, 이번의 기사만 보고 있는 분 때문에 코드는 생략하지 않고 전체를 실어 갑니다.

HTML 추가



마지막으로 작성한 hello.html에 입력한 문자를 표시할 위치와 입력할 필드를 추가합니다.

hello.html
<!DOCTYPE html>
    <head>
        <meta charset="UTF-8">
        <title>hello</title>
    </head>
    <body>
         <h1>Hello World!!</h1>
　　　   // ここから追加↓　
         <h1 th:text="${text}"></h1>　---1

         <form th:method="POST" th:action="changeText"> ---2
         <input type="text" name="inputText" /> ---3
         <input type="submit"> ---4
         </form>
　　　  // ここまで追加↑　
    </body>
</html>

1. 입력한 값을 표시합니다. text에 전달한 값이 표시됩니다.
2. method 로 보낼 때의 방식을 지정해, th:action (은)는 URL을 지정하고 있습니다.
3. 텍스트 필드 추가. name 로 전달된 값의 이름을 지정합니다.
4. 송신 버튼입니다.

thymeleaf는 무엇입니까?



th~라는 것이 나왔네요. 이것은 thymeleaf를 작성하는 방법입니다.
타임 리프로 읽습니다. HTML과 같은 템플릿 엔진으로 Spring Boot에서 표준으로 사용됩니다.
java로 처리한 데이터를 화면에 표시할 때 등 HTML이므로 개발을 하면서 화면에서 확인할 수 있는 것이 좋네요.
build.gradle 에 다음을 추가하여 업데이트할 때 사용할 수 있습니다.
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'

이전 기사에서 계속 이 기사를 보는 사람은 프로젝트를 만들 때 종속성으로 thymeleaf를 선택했으므로 추가하지 않고도 작성해야합니다.

thymeleaf로 어떻게 쓰는 거야? 이 때이 기사가 매우보기 쉽습니다.
=> Thymeleaf 치트 시트

컨트롤러 추가



이쪽도 지난번 만든 HelloController에 추가합니다.

HelloController.java
package helloSpring.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class HelloController {
    @RequestMapping(value = "/", method = RequestMethod.GET)
    public String hello(Model model) {
        model.addAttribute("text", "ここに入力した文字が表示"); // 追加－－－１
        return "hello";
    }

    @RequestMapping(value = "/changeText", method = RequestMethod.POST) // 追加－－－２
    public String changeText(@RequestParam(name = "inputText") String text, Model model) {
        model.addAttribute("text", text);
        return "hello";
    }
}

1. hello.html 로 추가한 <h1 th:text="${text}"></h1> 에 초기 메세지를 세트 합니다.
2. 제출 버튼을 누를 때 함수를 추가합니다.
@RequestParam 은 포스트 파라미터를 받기 위한 어노테이션입니다.
・name은 HTML의 input로 지정한 이름과 같게 해, 변수명을 정의합니다.
· '${text}'에 요청 파라미터로 받은 값을 설정합니다.

이상입니다.
다음은 DB에 접속해 데이터를 표시시키고 싶습니다.

추기:다른 현장에 가게 되어 잠시 java의 공부는 좋은 밤이지만, 빈 시간에 공부해 갱신해 갑니다(계속을 기다리고 있는 사람 없다고 생각하지만,,)
SpringBoot에서 Thymeleaf를 사용하여 화면 그리기
super-csv를 사용한 csv 출력 처리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage