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

시작하기

1. 종속성 소개

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

 org.springframework.boot spring-boot-starter-thymeleaf 

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

 3.0.7.RELEASE 2.0.0 

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

 org.springframework.boot spring-boot-devtools runtime 

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

페이지 코드:

    
  
欢迎使用Thymeleaf!!
 戳我有惊喜  

백엔드 코드:

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

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

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

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