美文网首页
Thymeleaf 模板学习1

Thymeleaf 模板学习1

作者: Puny丶微芒 | 来源:发表于2018-10-24 19:15 被阅读0次

    一、引入

    使用Thymeleaf首先需引入命名空间

    头部加

    <html  xmlns:th="http://www.thymeleaf.org">
    

    二、基本使用方法

    1.引用web静态资源
    Thymeleaf通过”@{}”来引用web静态资源,例:
    <script th:src="@{bootstrap/js/boostrap.min.js}"></script>
    
    上下文相关URL
    <a th:href="@{/order/list}">
    
    如果应用程序访问URL为:http://localhost:8080/myapp,则此URL将输出:
    <a href="/myapp/order/list">
    
    与服务器相关URL

    服务器相关的URL与上下文相关的URL非常相似,只是它们不假定URL要链接到应用程序上下文中的资源,因此允许链接到同一服务器中的不同上下文:

    <a th:href="@{~/billing-app/showDetails.html}">
    

    当前应用程序的上下文将被忽略,因此尽管应用程序部署在http:// localhost:8080 / myapp,但该URL将输出:

    <a href="/billing-app/showDetails.html">
    
    协议相关URL

    与协议相关的URL实际上是绝对的URL,它将保持用于显示当前页面的协议(HTTP,HTTPS)。 它们通常用于包括样式,脚本等外部资源:

    <script th:src="@{//scriptserver.example.net/myscript.js}">...</script>
    

    它将呈现与上面一致的URL(URL重写除外),如:

    <script src="//scriptserver.example.net/myscript.js">...</script>
    
    添加参数
    <a th:href="@{/order/details(id=3)}">
    

    上面示例代码,最终将输出为:

    <a href="/order/details?id=3">
    

    也可以添加几个参数,用逗号分隔它们:

    <a th:href="@{/order/details(id=3,action='show_all')}">
    

    上面代码将输出结果为:

    <!-- 注意&符号在标签属性中进行HTML转义... -->
    <a href="/order/details?id=3&action=show_all">
    
    2.访问model模型中的数据,例如访问一个user对象的name属性
    <span th:text="${user.name}"></span>
    
    3.数据迭代
    例如迭代一个userlist集合
    <tr th:each="user : ${userlist}">
        <td th:text="${user.name}">tyrone</td>
        <td th:text="${user.age}">18</td>
    </tr>
    

    使用th:each做循环迭代,并使用${对象.属性}来访问具体的值

    4.判断
    <tr th:if="${messages.empty}">
        <td colspan="3">No messages</td>
    </tr>
    
    5.在Javascript中访问model模型数据
    <script th:inline="javascript">
        var user = [[${user}]]
        console.log(user.name + "\t" + user.age);
    </script>
    

    相关文章

      网友评论

          本文标题:Thymeleaf 模板学习1

          本文链接:https://www.haomeiwen.com/subject/nnwxtqtx.html