Thymeleaf知识总结

最新推荐文章于 2022-11-18 16:11:32 发布

轻语莫念

最新推荐文章于 2022-11-18 16:11:32 发布

阅读量358

点赞数

分类专栏： Thymeleaf

本文链接：https://blog.csdn.net/qq_40244391/article/details/103376932

版权

Thymeleaf 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、标准变量表达式

    定义
       标准变量表达式用于访问容器（tomcat）上下文环境中的变量
       通过${变量名} 的方式获取Controller中model的数据
    先创建一个user对象

   private Integer id;
        private String nick;
        private String phone;
        private String address;

创建一个UserController

 @RequestMapping("/user")
        public String userInfo(Model model, HttpServletRequest request){
            User user = new User();
            user.setId(100);
            user.setNick("张三");
            user.setPhone("13612345678");
            user.setAddress("北京市昌平区");
            model.addAttribute("user",user);
        }

创建user.html页面
标准变量表达式用户数据的展示

  <span th:text="${user.id}"></span>
        <span th:text="${user.nick}"></span>
        <span th:text="${user.phone}"></span>
        <span th:text="${user.getAddress()}"></span>
        <span th:text="${hello}"></span>
        <br>
        <br>

2、选择变量表达式

    (1)也叫星号变量表达式，使用th:object属性绑定对象
   (2)使用th:object来邦定后台传来的User对象，然后使用 * 来代表这个对象
   (3)类似于标准变量表达式
   (4)区别它在选择的对象上求解，而${...}是在上下文的变量Model上求解
   (5)在user页面去利用选择变量表达式获取用户信息
       选择变量表达式用户数据的展示

  <div th:object="${user}">
            <span th:text="*{id}"></span>
            <span th:text="*{nick}"></span>
            <span th:text="*{phone}"></span>
            <span th:text="*{address}"></span>
        </div>

3、URL表达式重点

(1)@{...}，主要用于链接地址等展示，获取动态数据
(2)在user.html加入代码

   <!--绝对路径-->
    <a href="info.html" th:href="@{'http://127.0.0.1:8080/user/info?id='+${user.id}}">查看1</a>
    <!--相对路径 相对于页面-->
    <a href="info.html" th:href="@{'user/info?id='+${user.id}}">查看2</a>
    <!--相对于项目上下文 实际开发推荐使用这种 避免路径找不到-->
    <a href="info.html" th:href="@{'/user/info?id='+${user.id}}">查看3</a>

(3)配置项目上下文（这是在application.properties配置文件中配置的）

  server.servlet.context-path=/thymeleaf

4、Thymeleaf 的常见属性

(1)th:action 类似<form>标签action属性，主要结合URL表达式,获取动态变量
(2)在user.html加入代码

    <!--当你需要动态获取变量数据的时候，就需要加th前缀-->
        <form id="login" th:action="@{'/login/' + ${user.id}}"></form>
        <!--以下两种方式都获取不到用户的id-->
        <form id="login2" action="/login/${user.id}"></form>
        <form id="login3" action="/login/" + ${user.id}></form>

th:src

引入外部资源

在SpringBoot项目的静态资源都放到resources的static目录下

   <script src="/static/js/jquery.js"></script>
        <script th:src="@{/js/jquery.js}"></script>
        <img th:src="@{/img/1.jpg}">

       好处: 在URL表达式前加/，会自动加上上下文根

   th:attr
       好处是可以给html中没有定义的属性动态的赋值

    <!--thymeleaf没有对应的th标签，所以${user.id}不能被识别-->
        <span zhangsan=${user.id}></span>
        <!--通过th:attr对自定义的属性赋值-->
        <span th:attr="zhangsan=${user.id}"></span>

   th:text
       在文本框外显示，要想显示在文本框内，使用th:value

 <span  th:text="${hello}"></span>
        <span  th:value="${hello}"></span>

th:onclick

    <!--目前thymeleaf版本要求只能传递数字和布尔类型-->
        <a th:onclick="'fun1('+${user.id}+')'">点击我</a>
        <script type="text/javascript">
            function fun1(userId){
                alert(userId);
            }
        </script>

   th:each
       ${userList} 是后台传过来的集合
       user变量就相当于var 接受list的一个元素
       iterStat 循环体的信息
           index 从0开始， count从1开始，size
       循环体信息iterStat也可以不定义，则默认采用迭代变量加上Stat后缀，即userStat

  <div th:each="hotData:${allProject}" class="col-lg-4" style="float: left;">
          <img th:src="${hotData.headImg}" class="img-circle"  alt="Generic placeholder image" style="width: 140px; height: 140px;">
          <h2>[[${hotData.projectName}]]</h2>
          <p style=" width: 250px;">[[${hotData.projectBrief}]]</p>
          <p><a class="btn btn-default" th:href="@{/project/index/{projectId}(projectId=${hotData.id})}" role="button">项目详情 &raquo;</a></p>
        </div><!-- /.col-lg-4 -->

th:if

  ThymeleafController
            model.addAttribute("sex",1);
        index.html代码
    <br>
    <span th:if="${sex==1}">
        男<input type="radio" name="sex" th:value="男">
    </span>
    <span th:if="${sex==2}">
        女<input type="radio" name="sex" th:value="女">
    </span>

th:unless

在index页面
是th:if的一个相反操作

th:switch/th:case

  在index页面
        <div th:switch="${sex}">
            <p th:case="1">性别：男</p>
            <p th:case="2">性别：女</p>
            <p th:case="*">性别：泰国回来的</p>
        </div>

th:inline

内敛文本
 不依赖于html标签格式:内敛表达式[[表达式]]
 切换到user.html
 先写内敛表达式
 [[${user.id}]]
 [[${user.nick}]]
 [[${user.phone}]]
 [[${user.address}]]
 然后在加一个span
 一般我们将放到<body th:inline="text">标签中
 内敛脚本

 <button type="button" onclick="buttonFunc()">
                    抽奖
            </button>
            <script type="text/javascript" th:inline="javascript">
                function buttonFunc() {
                    alert("恭喜"+[[${user.nick}]]+"手机号为"+[[${user.phone}]]+"免单")
                }
            </script>

字面量
 可以在html页面直接使用，不需要后台传递
 文字字面量
 用单引号'...'包围的字符串为文本字面量
 
 <a th:href="@{'/user/' + ${user.id}}">修改用户</a>
 
 今年是1949年
 20年后, 将是1969年
 
 ${sex == true}">执行操作
 
 user为空
 user不为空
Thymeleaf 字符串拼接会用
 
 
 
 
Thymeleaf运算符
 三元运算符号

Thymeleaf内置对象

request

获取应用的上下文根
 
 在js中添加可以避免404问题
 <script type="text/javascript" th:inline="javascript">
 var contextPath =[[${#request.getContextPath()}]];
 var url = contextPath + "/user/userInfo";
 alert(url);
 </script>
 获取request的attribute值
 在方法上加HttpServletRequest request
 request.setAttribute("requestValue","500");

Session

 request.getSession().setAttribute("website","http://www.bjpowernode.com");
        <p th:text="${#session.getAttribute('website')}"></p

Thymaleaf表达式功能对象

dates

 model.addAttribute("curDate",new Date());

        <span th:text="${#dates.format(curDate, 'yyyy-MM-dd HH:mm:ss')}"></span>
    calendars    
    maps

轻语莫念

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Thymeleaf知识总结

1、标准变量表达式定义标准变量表达式用于访问容器（tomcat）上下文环境中的变量通过${变量名} 的方式获取Controller中model的数据先创建一个user对象 private Integer id; private String nick; private String phone; ...
复制链接

扫一扫