thymeleaf 模板

注意：所有文章除特别说明外，转载请注明出处.

thymeleaf 模板

基础语法

1.引入标签：首先要在html标签里引入 xmlns:th="http://www.thymeleaf.org" 才能使用th:*这样的语法。

2.获取变量值：通过在标签内部，使用 ${} 来取值，对于javaBean的话，使用 变量名.属性名 来获取，跟EL表达式一样

　　注意：只有写在标签内部才会生效，例如： th：text=“hello” 的意思是使用hello来代替p之前的内容，p里原来的值是为了给前端开发展示用的，这样做容易实现前后端分离。
　　
　　3.引入URL：thymeleaf对于引入URL是采用@{…}来获取的。例如：绝对路径是访问绝对路径下的URL，相对路径是访问相对路径下的URL。是引入默认的static下的css文件夹下的bootstrap文件，类似的标签有: th:href 和 th:src 。
　　
　　4.字符串替换：或者都可以实现替换。注意：|…|中只能包含变量表达式${…}，不能包含其他常量、条件表达式等。
　　
　　5.循环：th：each是对于结果可以进行遍历的数据集。如：　
　　
　　
　　 Onions
　　 2.41
　　
　　

thymeleaf模版引擎

表达式:
    ${java变量名称}  获取变量值
    @{路径}  :  自动添加context-path ,  自动加上工程名称
    ~{common/文件名 :: 要引入的内容ID}   ,代码片段表达式

属性:
    th:text : 输出文本到标签体内
    th:class: 动态修改样式
    th:href : 路径

条件表达式:
    th:if="${条件}"  若条件成立,则显示当前元素,否则不显示

    th:switch="${值}"
        th:case="xx" 输出
        th:case="yy" 输出
        th:case="*"  默认处理方式

    三元运算符:
        ${条件} ? 条件成立 : 条件不成立

循环表达式:
    th:each="变量名 : ${集合}"

    遍历页码: #numbers.sequence(起始值,结束值)

${history.red.split(',')[0]}

thymeleaf 案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
    <link th:href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/page.css}" rel="stylesheet"/>
    <link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon"/>
    <meta charset="UTF-8"/>
    <title>用户管理</title>
</head>

<body>
<div class="contentDiv">

    <h5>用户管理</h5>
    <legend>
        <strong>用户管理</strong>
    </legend>

    <form th:action="" method="post" class="form-horizontal">

        <input type="hidden" name="id" th:value="${user.id}"/>

        <div class="form-group">
            <label for="username" class="col-sm-2 control-label">用户名:</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="username" name="username" th:value="${user.username}"
                       th:field="*{user.username}"/>
            </div>
        </div>

        <div class="form-group">
            <label for="book_writer" class="col-sm-2 control-label">作者:</label>
            <div class="col-xs-4">
                <input type="text" class="form-control" id="book_writer" name="writer" th:value="${book.writer}"
                       th:field="*{book.writer}"/>
            </div>
        </div>

        <div class="form-group">
            <label for="book_introduction" class="col-sm-2 control-label">简介:</label>
            <div class="col-xs-4">
                <textarea class="form-control" id="book_introduction" rows="3" name="introduction"
                          th:value="${book.introduction}" th:field="*{book.introduction}"></textarea>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <input class="btn btn-primary" type="submit" value="提交"/>&nbsp;&nbsp;
                <input class="btn" type="button" value="返回" onclick="history.back()"/>
            </div>
        </div>
    </form>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN" xmls:th="http://www.thymeleaf.org">
<head>
  <script type="text/javascript" th:src="@{https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js}"></script>
  <link href="@{https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/css/page.css}" rel="stylesheet"/>
  <link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon"/>
  <meta charset="UTF-8">
  <title>用户列表</title>
</head>

<body class="contentDiv">
    <h5>用户列表</h5>
    <table class="table table-hover table-condensed">
        <legend>
            <strong>用户列表</strong>
        </legend>
        <thead>
        <tr>
            <th>编号</th>
            <th>账户</th>
            <th>地址</th>
            <th>电话</th>
            <th>姓名</th>
        </tr>
        </thead>
        <tbody>
            <tr th:each="user: ${userList}">
                <th scope="row" th:text="${user.id}"/>
                <td th:text="${user.account}"></td>
                <td th:text="${user.address}"></td>
                <td th:text="${user.phone}"></td>
                <td th:text="${user.userName}"></td>
            </tr>
        </tbody>
    </table>

    <div><a href="#" class="btn btn-primary" role="button">新增用户</a></div>
</body>
</html>