HTML5 최신 템플릿 엔진을 기반으로 SpringBoot+Thymeleaf를 사용하는 방법-java지도 시간-php.cn

집

Java

java지도 시간

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 15, 2023 pm 08:28 PM

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의 기본 페이지 데이터 처리 능력이 뛰어나다는 것을 입증했습니다.

페이지 코드:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Thymeleaf</title>
</head>
<body>
  <h3>欢迎使用Thymeleaf!!</h3>
  <a href="http://www.baidu.com" rel="external nofollow" th:href="${info}" rel="external nofollow" >戳我有惊喜</a>
</body>
</html>

로그인 후 복사

백엔드 코드:

@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";
  }

}

로그인 후 복사

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

<!-- 使用th:object 搭配*{} 可以省略对象名 -->
<form action="/" th:object="${user}" >
  <input type="hidden" name="userId" th:value="*{userId}" />
  <input type="text" name="username" th:value="*{username}" />
  <input type="text" name="password" th:value="*{password}" />
</form>

로그인 후 복사

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

아아아아

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.