标签（空格分隔）： springboot thymeleaf adminlte 前端 后台 html渲染 模板库 layout
spring boot:用adminlte做前端 中提到过thymeleaf可以结合adminlte一起使用，本文做点简单的介绍
架构原理
这里不对thymeleaf本身的实现做说明，重点放在应用，只结合它在springmvc架构中的位置做点解释（关于springmvc的说明请参考我的 springboot : 深入浅出spring mvc）
springmvc architecture
thymeleaf就是上图中的一种view的实现，它可以把model中的东西渲染到html中（前提是html使用了thymeleaf的标签）
简单的例子
- 添加依赖
pom.xml中添加以下依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
如果使用springboot 2以上，并且要用thymeleaf的layout（有人说layout是thymeleaf最重要的功能）功能，必须手工添加thymeleaf-layout-dialect依赖（很多教程都忽略了这点）
- 添加模板
把基于adminlte的layout（layout.html, 参考 spring boot:用adminlte做前端）放到src\main\resources\templates 文件夹,
修改两行代码
<html>改成<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<div class="content-wrapper">改成
<div class="content-wrapper" layout:fragment="contentWrapper">
这样adminlte的layout就成为了thymeleaf的一个layout了
- 添加一个测试html
test.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorate="layout">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div layout:fragment="contentWrapper">
<section class="content">
<h4>Hello World</h4>
</section>
</div>
</body>
</html>
其中关键的代码有两行
layout:decorate="layout"
这行代码告诉thymeleaf，渲染test.html的时候要用模板layout(src\main\resources\templates下面的layout.html文件)进行渲染
<div layout:fragment="contentWrapper">
这行代码告诉thymeleaf，把<div layout:fragment="contentWrapper">中的内容要替换掉layout"layout:fragment="contentWrapper" 部分的内容
准备好这些之后启动spring boot，请求 test.html，就能看到结果中明显多出layout.html中的一些东西，也就是说请求的是test.html，但是获得的是test.html+layout.html的东西。
本文使用我另外的文章 老程序员的一点套路之开源学习 里面介绍的方法进行学习
网友评论