thymeleaf 基础应用学习

thymeleaf 使用说明

一. 获取后台给的属性值 ‘${}’, 例如:controller类,其页面书写方法:

   (1) 单个属性值

         // 单属性          例如: <div th:text="${userName}">用户名</div>

        // 对象中属性    例如:<div th:text="${user.userName}">用户名</div>

   (2) map属性值

       例如:<div th:text="${config.get('userName')}">用户名</div>

   (3) 特殊符号拼接取值用“| 内容 |”

       例如:<div th:text="|${config.get('userName')} - ${userAge}|+'岁' ">用户名 - 年龄</div>

   (4) meta标签获取内容 th:content 标签

       例如:<meta  name="description"   th:content="${config.get('webDescription')}" />

二. 超链接取值 ‘@{}’, 其主要应该在html页面

  (1) html页面引入css

      //其中@{静态文件夹下的内容(static)}

      <link rel="stylesheet" th:href="@{/css/index.css}" />

     QQ截图20220527103317.png

   (2) 超链接标签, 例如:

       <a th:href="@{/myhome}">我的主页</a>

   (3) html 脚本的引用

      //其中@{静态文件夹下的内容(static)}

      <script  th:src="@{/js/jquery.min.js}" ></script> QQ截图20220527104043.png

    (4) 内嵌样式的用法

     <header class="header" th:style="'background-img:url('+@{/img/bg.jpg} +'); " />

三. 将代码标记为片段

  (1)标记片段

// th:fragment 将代码定义一个片段名

<head th:fragment="headerTemp">

    <meta charset="utf-8">

    <title th:text="|${config.get('webName')} - ${myPageName}|">我的主页</title>

    <meta name="description" th:content="${config.get('webDescription')}"/>

    <link rel="favicon  ico" th:href="@{${config.get('webfavicon')}}"/>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" th:href="@{/css/index.css}">

</head>

(2)引用片段

  <!DOCTYPE html>

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

<th:block th:include = "include :: headerTemp" />

  </html>

         (3) 可通过标记片段名进行传参

     // 通过片段名定义传参 sidebar-fragment(path)

             <aside th:fragment="sidebar-fragment(path)" class="main-sidebar sidebar-dark-primary elevation-4">

         // 引用传参 ${path}

         <a th:href="@{/index}" th:class="${path}=='index'?'nav-link active':'nav-link'">

                          <p>Dashboard</p>

         </a>

     </aside>

本文链接:https://www.jhelp.net/p/wHadDIsF3WRbhwKN (转载请保留)。
关注下面的标签,发现更多相似文章