登录 注册

SpringBoot---thymeleaf

本贴最后更新于 2220 天前，其中的信息可能已经时移世易

引用

<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>
​

配置

默认 resources/static 放 css js
默认 resources/templates 放 html
测试过程中关闭缓存

spring:
  thymeleaf:
    cache: false
​

基础语法

后台

@Controller
public class WelcomeController {
    @GetMapping("/")
    public String welcome(ModelMap map) {
        map.addAttribute("message", "http://www.ityouknow.com");
        map.addAttribute("flag", true);
        map.addAttribute("users", getUserList());

        map.addAttribute("type", "link");
        map.addAttribute("pageId", "springcloud/2017/09/11/");
        map.addAttribute("img", "http://www.ityouknow.com/assets/images/neo.jpg");

        map.addAttribute("age", 18);
        map.addAttribute("sex", "woman");
        return "index";
    }
    private List<User> getUserList(){
        List<User> list=new ArrayList<User>();
        User user1=new User("大牛",12,"123456");
        User user2=new User("小牛",6,"123563");
        User user3=new User("纯洁的微笑",66,"666666");
        list.add(user1);
        list.add(user2);
        list.add(user3);
        return  list;
    }
}
​

前台

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <title>Hello</title>
</head>
<body>
<p>字符串拼接</p>
<span th:text="|Welcome to our application, ${message}!|"></span>
<p>if</p>
<a th:if="${flag == true}" th:href="@{http://favorites.ren/}">home</a>
<p>for循环</p>
<table>
    <tr th:each="user,iterstart : ${users}">
        <td th:text="${user.getName()}"></td>
        <td th:text="${user.getAge()}"></td>
        <td th:text="${user.getEamil()}"></td>
        <td th:text="${iterstart.index}"></td>
    </tr>
</table>
<p>url处理</p>
<a  th:href="@{http://www.ityouknow.com/{type}(type=${type})}">link1</a>
<br/>
<a th:href="@{http://www.ityouknow.com/{pageId}/can-use-springcloud.html(pageId=${pageId})}">view</a>
<br/>
<div th:style="'background:url(' + @{${img}} + ');'">
    <br/><br/><br/>
</div>

<p>三目运算符</p>
<input th:value="${age > 30 ? '中年':'年轻'}"/>

<p>switch</p>
<div th:switch="${sex}">
    <p th:case="'woman'">她是一个姑娘...</p>
    <p th:case="'man'">这是一个爷们!</p>
    <!-- *: case的默认的选项 -->
    <p th:case="*">未知性别的一个家伙。</p>
</div>
</body>
</html>
​

高级语法

内联

<div>
    <h1>文本内联</h1>
    <div th:inline="text" >
        <p>Hello, [[${userName}]] !</p>
        <br/>
    </div>
</div>
// 脚本内联
<script th:inline="javascript">
    var name = [[${userName}]] + ', Sebastian';
    alert(name);
</script>
​

基本对象

### 后台
@RequestMapping("/object")
public String object(HttpServletRequest request) {
    request.setAttribute("request","i am request");
    request.getSession().setAttribute("session","i am session");
    return "object";
}

### 前台
<div >
    <h1>基本对象</h1>
    <p th:text="${#request.getAttribute('request')}">
        <br/>
    <p th:text="${session.session}"></p>
    Established locale country: <span th:text="${#locale.country}">CN</span>.
</div>
​

内嵌变量

日期

<!--格式化时间-->
<p th:text="${#dates.format(date, 'yyyy-MM-dd HH:mm:ss')}">neo</p>
<!--创建当前时间 精确到天-->
<p th:text="${#dates.createToday()}">neo</p>
<!--创建当前时间 精确到秒-->
<p th:text="${#dates.createNow()}">neo</p>
​

字符串

<!--判断是否为空-->
<p th:text="${#strings.isEmpty(userName)}">userName</p>
<!--判断 list 是否为空-->
<p th:text="${#strings.listIsEmpty(users)}">userName</p>
<!--输出字符串长度-->
<p th:text="${#strings.length(userName)}">userName</p>
<!--拼接字符串-->
<p th:text="${#strings.concat(userName,userName,userName)}"></p>
<!--创建自定长度的字符串-->
<p th:text="${#strings.randomAlphanumeric(count)}">userName</p>
​

页面布局

layout/footer.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <title>footer</title>
</head>
<body>
<footer th:fragment="footer">
    <h1>我是 尾部</h1>
</footer>
</body>
</html>
​

layout.html 访问这个页面，会自动加载对应的 fragement

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta charset="UTF-8"></meta>
    <title>Layout</title>
</head>
<body>
<div>
    <div th:replace="layout/header :: header"></div>
    <div th:replace="layout/left :: left"></div>
    <div layout:fragment="content"> content</div>
    <div th:replace="layout/footer :: footer"></div>
</div>
</body>
</html>
​

home.html 访问这个页面，会在前两个的基础上，替换 content 内容

<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>
    <title>Home</title>
</head>
<body>
<div layout:fragment="content" >
    <h2>个性化的内容</h2>
</div>
</body>
</html>
​

头部替换

base.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
    <title th:replace="${title}">comm title</title>

    <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/myapp.css}">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
    <script type="text/javascript" th:src="@{/js/myapp.js}"></script>

    <th:block th:replace="${links}" />
</head>
<body>

</body>
</html>
​

在 base 的基础上，替换 title 和 link

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base :: common_header(~{::title},~{::link})">
    <title>Fragment - Page</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/cs/fragment.css}">
</head>
<body>

</body>
</html>
​

  • Spring

    Spring 是一个开源框架，是于 2003 年兴起的一个轻量级的 Java 开发框架，由 Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》中阐述的部分理念和原型衍生而来。它是为了解决企业应用开发的复杂性而创建的。框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 JavaEE 应用程序开发提供集成的框架。

    948 引用 • 1460 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等，它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 388 关注
762 14 287 68 135 45 1 44 153

相关帖子

回帖
SpringBoot---thymeleaf

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
tianyunperfect
tianyunperfect
回帖
31
 帖子
20
 积分
4879