HTML5 최신 템플릿 엔진을 기반으로 SpringBoot+Thymeleaf를 사용하는 방법

시작하기

1. 종속성 소개

SpringBoot는 기본적으로 Thymeleaf의 Starter를 제공합니다. 간단히 종속성을 도입하기만 하면 됩니다.

<dependency>
      <groupid>org.springframework.boot</groupid>
      <artifactid>spring-boot-starter-thymeleaf</artifactid>
    </dependency>

현재 기본 버전은 2.1입니다. 버전을 3.0으로 업그레이드하고 싶다면 이렇게 수정하시면 됩니다.

  <properties>
    <thymeleaf.version>3.0.7.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
  </properties>

개발을 촉진하기 위해 프로젝트 사례에서는 핫 배포 도구 dev-tools를 사용하므로 페이지를 수정한 후 IDEA가 자동으로 로드되어 핫 업데이트 효과를 얻습니다.

   <dependency>
      <groupid>org.springframework.boot</groupid>
      <artifactid>spring-boot-devtools</artifactid>
      <scope>runtime</scope>
    </dependency>

참고: IDEA는 기본적으로 핫 배포를 해제하므로 이를 적용하려면 일부 설정을 지정해야 합니다. 해결 방법: 먼저 Ctrl+Shift+Alt+/를 누른 상태에서 레지스트리를 입력한 다음 컴파일러.automake.allow.when.app.running을 확인하세요. 또한 빌드->컴파일러는 빌드 프로젝트도 자동으로 확인해야 합니다.

2. 관련 구성 추가

Thymeleaf는 기본적으로 페이지 캐싱을 활성화합니다. 또한 일반적으로 페이지의 저장 경로도 지정합니다. (기본값은 classpath:/templates/)

application.yml 配置如下：
spring:
 thymeleaf:
  cache: false #关闭缓存
  prefix: classpath:/views/ #添加路径前缀

3. HTML 작성

Thymeleaf 작성은 HTML5 페이지 작성과 다르지 않습니다. 가장 큰 변화는 확장 속성(th:xx)을 사용하여 서버와 상호 작용한다는 것입니다. 원래 페이지 스타일을 유지하는 것도 Thymeleaf에서 권장하는 스타일입니다. 예를 들어, 다음과 같은 간단한 사례에서는 프로젝트를 시작한 후 페이지가 Jianshu의 링크로 이동하는 것을 발견했으며, 이는 또한 Thymeleaf의 기본 페이지 데이터 처리 능력이 뛰어나다는 것을 입증했습니다.

페이지 코드:

nbsp;html>


  <title>Thymeleaf</title>


  <h3 id="欢迎使用Thymeleaf">欢迎使用Thymeleaf!!</h3>
  <a>戳我有惊喜</a>

백엔드 코드:

@Controller
public class UserController {

  @GetMapping("/")
  public String index(Model model) {
    model.addAttribute("info", "user/list");
    return "index";
  }

  @GetMapping("/user")
  public String hehe(Model model) {
    model.addAttribute("user", new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));
    return "user";
  }

  @GetMapping("/user/list")
  public String userlist(Model model) {
    List<user> userList = new ArrayList();
    userList.add(new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));
    userList.add(new User(UUID.randomUUID().toString(), "kumamon", "123456"));
    userList.add(new User(UUID.randomUUID().toString(), "admin", "admin"));
    model.addAttribute("userList", userList);
    return "userList";
  }

}</user>

이제 개별 사용자 정보를 표시하기 위해 양식을 다시 채우려고 합니다.

<!-- 使用th:object 搭配*{} 可以省略对象名 -->

        

다음으로 사용자 목록 정보 표시와 같은 좀 더 복잡한 사례를 입력하면 새 태그를 작성하지 않고도 사용자 배치 순회를 완료할 수 있습니다.

아아아아

위 내용은 HTML5 최신 템플릿 엔진을 기반으로 SpringBoot+Thymeleaf를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!