HTML5 최신 템플릿 엔진을 기반으로 SpringBoot+Thymeleaf를 사용하는 방법
- WBOY앞으로
- 2023-05-15 20:28:04682검색
시작하기
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!