Eclipse에서 Spring Boot + Thymeleaf. (1)

16058 단어 spring-bootThymeleaf

소개



Spring Boot + Thymeleaf 샘플 프로그램을 Eclipse로 만들어 보자.

개발 환경



Windows 10 Pro 1709(16299.192)
Eclipse pleiades-4.7.3
java 1.8.0_162
spring-boot-2.0.2.RELEASE
thymeleaf-3.0.9.RELEASE

절차



1. Eclipse Pleiades All in One 설치
나중에 다른 언어로 사용하고 싶기 때문에 정식 버전을 설치합니다.
「Ultimate」:Java 이외에서도 개발 가능(C/C++, Python...)
"Full Edition": 컴파일러 및 실행 환경 포함

2. STS 설치

3. 프로젝트 만들기

4. 샘플 프로그램 "직원 표시"작성
   M(Model): Form (Java 클래스)
  C(Controller) : Controller (Java 클래스)
  V(View) : html(template)

5. 동작 확인

1. Eclipse Pleiades All in One 설치



URL


http://mergedoc.osdn.jp/

설치 절차



1. Eclipse 4.7 Oxygen 클릭





2. 미러 서버를 변경한다 ( 3.에서 타임 아웃 해 버리는 경우가 있기 때문에.)





3. Windws 64bit의 “Ultimate” “Full Edition”을 클릭





4. 다운로드 파일을 작업 폴더로 압축 해제





2. STS 설치



1. “eclipse.exe”를 더블 클릭





2. 시작 버튼을 클릭





3. Python을 사용하지 않으므로 "선택 모두 해제"버튼을 클릭하고 "선택한 변경 사항 적용"버튼을 클릭하십시오.





4. 도움말, Eclipse 마켓플레이스 메뉴 선택





5. 검색에 "STS"를 입력하고 Enter 키를 누른 후 "설치"버튼 클릭





6. 확인 버튼 클릭





7. 사용 약관의 조항에 동의합니다를 선택하고 마침 버튼 클릭





8. 설치 버튼 클릭





9. 지금 재시작 버튼 클릭





3. 프로젝트 만들기



3-1. Spring 퍼스펙티브 열기



1. 윈도우, 퍼스펙티브, 퍼스펙티브 열기, 기타 메뉴 선택





2. Spring을 선택하고 열기 버튼 클릭





3. 「환영」을 닫고 「C/C++」 「PHP] 「Python」 「Perl」 「Ruby」도 닫아 둔다





4. Spring을 클릭하여 Spring Perspective를 엽니다.





3-2. Spring 프로젝트 만들기



1. 패키지 익스플로러의 오른쪽 메뉴에서 「신규」 「Spring 스타터 프로젝트」메뉴 선택





2. 프로젝트 이름, 기타를 입력하고 [다음] 버튼 클릭





3. 종속성 선택 "DevTools" "Lombok" "Thymeleaf" "Web"을 선택하고 "완료" 클릭 ( "JPA" "PostgreSql"은 나중에 DB 샘플 프로그램 작성에 사용.)





4. JPA, PostgreSql을 선택한 경우 application.properties에 다음을 추가합니다.



application.properties
spring.datasource.url=jdbc:postgresql://localhost:5432/postgres
spring.datasource.username=postgres
spring.datasource.password=admin
spring.datasource.driverClassName=org.postgresql.Driver

# disable driver's feature detection
spring.jpa.properties.hibernate.temp.use_jdbc_metadata_defaults = false

# without detection you have to set the dialect by hand
spring.jpa.properties.hibernate.dialect = org.hibernate.dialect.PostgreSQLDialect

4. 샘플 프로그램 "직원 표시"작성



4-1. Model(Form) 만들기



1. 파일 -> 신규 -> 클래스 메뉴 선택





2. Java 패키지와 클래스 이름을 입력하고 마침 버튼 클릭





3. 코드 작성



EmployeeForm.java
package com.example.demo;

import lombok.Data;

@Data
public class EmployeeForm {

    private String id            = "";
    private String name          = "";
    private String email         = "";

}

4-2. 컨트롤러 작성



1. 파일 -> 신규 -> 클래스 메뉴 선택





2. Java 패키지와 클래스 이름을 입력하고 마침 버튼 클릭





3. 코드 작성



EmployeeController.java
package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class EmployeeController {

    @RequestMapping("/show")
    public ModelAndView show(ModelAndView mav) {
        EmployeeForm form = new EmployeeForm();
        form.setId("1");
        form.setName("Ken");
        form.setEmail("[email protected]");

        mav.addObject("employeeForm", form);
        mav.setViewName("employee");

        return mav;
    }

}

4-3. View(HTML) 만들기



1. 파일 -> 신규 -> 기타 메뉴 선택





2. HTML 파일을 선택하고 다음 버튼 클릭





4. 폴더와 파일 이름을 입력하고 마침 버튼 클릭





5. 코드 생성



employee.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello, Spring Boot!</title>
</head>
<body>
<h1>Hello, Spring Boot!</h1>

<form th:action="@{/show}" th:object="${employeeForm}" method="post">
    <table>
        <caption>
            <strong>従業員検索</strong>
        </caption>
        <thead>
            <tr>
                <th>ID</th>
                <th>NAME</th>
                <th>EMAIL</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td th:text="*{id}"></td>
                <td th:text="*{name}"></td>
                <td th:text="*{email}"></td>
            </tr>
        </tbody>
    </table>

    <p>Name (optional): <input type="text" th:field="*{name}" />
       <em th:if="${#fields.hasErrors('name')}" th:errors="*{name}">Name Error</em></p>
    <p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>


5. 동작 확인



1. 바로 가기 키 Alt+Shift+X+B로 Spring Boot 앱 실행






2. 브라우저 URL에 http://localhost:8080/show 를 입력합니다.



좋은 웹페이지 즐겨찾기