SpringBoot 接上一篇

10.5 thymeleaf常见属性：
10.5.1 th:action:

  • th:action 定义后台控制器的路径，类似标签的 action 属性，主要结合 URL 表达式,获 取动态变量;

10.5.2 th:method:

  • 设置请求方法 

    •     <form th:action="@{/user/login}" th:method="post"></form>
10.5.3 th:href:

  • 定义超链接，主要结合 URL 表达式,获取动态变量.

    • <a href="http://www.baidu.com">超链接百度</a><br/>
      <a th:href="'http://www.baidu.com?id=' + ${user.id}">th:href 链接</a>
10.5.4 th:src:

  • 用于外部资源引入，比如<script>标标签的 src 属性，<img>标签的 src 属性，常与@{}表达式结 合使用，在 SpringBoot 项目的静态资源都放到 resources 的 static 目录下。 放到 static 路径下的内容，写路径时不需要写上 static.

    • <script type="text/javascript" 
      th:src="@{/jquery-1.7.2.min.js}"></script>
      <script>
       $(function () {
       alert("引入 js 文件");
       });
      </script>

    • 这种方式比传统方式的好处是，在 URL 表达式前加/，会自动加上上下文根，避免 404 找不 到资源的情况。

10.5.5 th:id

  • 类似 html 标签中的 id 属性 

    • <span th:id="${hello}">aaa</span>
10.5.6 th:name

  • 设置名称

    • <input th:type="text" th:id="userName" th:name="userName">
10.5.7 th:value

  • 类似 html 标签中的 value 属性，能对某元素的 value 属性进行赋值

    • <input type="hidden" id="userId" name="userId" th:value="${userId}">
10.5.8 th:attr

  • 该属性也是用于给 HTML 中某元素的某属性赋值，好处是可以给 html 中没有定义的属性动 态的赋值。

    • <h1>th:attr 属性的使用</h1>
      <span zhangsan="${user.name}"></span>
      <!--通过 th:attr 对自定义的属性赋值-->
      <span th:attr="zhangsan=${user.name}"></span>
10.5.9 th:text

  • 用于文本的显示，该属性显示的文本在标签体中，如果是文本框，数据会在文本框外显示， 要想显示在文本框内，使用 th:value

    • <input type="text" id="realName" name="reaName" th:text="${realName}">
10.5.10 th:object

  • 用于数据对象绑定

  • 通常用于选择变量表达式（星号表达式）

10.5.11 th:onclick
  • <h1>th:onclick 的使用</h1>
    <!--目前 thymeleaf 版本要求只能传递数字和布尔值-->
    <a th:onclick="'show('+${user.id}+')'">点击：显示学生编号</a>
    <script type="text/javascript">
     function show(id) {
     alert("用户编号为：" + id);
     }
    </script>
10.5.12 th:style

  • 设置样式

    • <a th:onclick="'show('+${user.id}+')'" 
      th:style="'font-size:40px;color:red;'">点击：显示学生编号</a>
10.5.13 th:each

  • 这个属性非常常用，比如从后台传来一个对象集合那么就可以使用此属性遍历输出，它与 JSTL 中的类似，此属性既可以循环遍历集合，也可以循环遍历数组及 Map.

  • 遍历list集合：

    • userController类：

      • @RequestMapping(value = "/user/detail")
            public  String message(Model model)
            {
                List<user> list = new ArrayList<>();
                for(int i=0;i<5;i++)
                {
                    user user = new user();
                    user.setName("KB"+i);
                    user.setNum(i);
                    list.add(user);
                }
                model.addAttribute("list",list);
                return "message";
            }

    • user类：

      • package com.example.model;
        ​
        import lombok.Data;
        ​
        @Data
        //这个注解可以代替私有变量的get/set方法，toString等等
        public class user {
            private int num;
            private  String name;
        ​
            public int getNum() {
                return num;
            }
        ​
            public void setNum(int num) {
                this.num = num;
            }
        ​
            public String getName() {
                return name;
            }
        ​
            public void setName(String name) {
                this.name = name;
            }
        }
        ​

    • message.html

      • <!DOCTYPE html>
        <html lang="en"  xmlns:th="http://www.thymeleaf.org">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
        ​
        <h1>th:each 循环遍历 List 集合</h1>
        <div style="color: red">
            1.user:当前对象的变量名<br/>
            2.userStat:当前对象的状态变量名<br/>
            3.${userList}:循环遍历的集合<br/>
            4.变量名自定义
        </div>
        ​
        <div th:each="user,userState:${list}">
            <span th:text="${user.getName()}"></span>
            <span th:text="${user.getNum()}"></span>
        </div>
        ​
        </body>
        </html>

    • 结果：

      • th:each 循环遍历 List 集合
        1.user:当前对象的变量名
        2.userStat:当前对象的状态变量名
        3.${userList}:循环遍历的集合
        4.变量名自定义
        KB0 0
        KB1 1
        KB2 2
        KB3 3
        KB4 4

    • 相关方法的说明：

      • th:each="user, iterStat : ${userlist}"中的 ${userList} 是后台传过来的集合

      • user 定义变量，去接收遍历${userList}集合中的一个数据

      • iterStat ${userList} 循环体的信息

      • 其中 user 及 iterStat 自己可以随便取名

      • interStat 是循环体的信息，通过该变量可以获取如下信息 index: 当前迭代对象的 index（从 0 开始计算）

      • count: 当前迭代对象的个数（从 1 开始计算）这两个用的较多 size: 被迭代对象的大小

      • current: 当前迭代变量

      • even/odd: 布尔值，当前循环是否是偶数/奇数（从 0 开始计算）

      • first: 布尔值，当前循环是否是第一个

      • last: 布尔值，当前循环是否是最后一个

      • 注意：循环体信息 interStat 也可以不定义，则默认采用迭代变量加上 Stat 后缀，即 userStat

  • 遍历map集合：

    • message.html

      • <!DOCTYPE html>
        <html lang="en"  xmlns:th="http://www.thymeleaf.org">
        <head>
            <meta charset="UTF-8">
            <title>Title</title>
        </head>
        <body>
        ​
        <h1>th:each 循环遍历 map 集合</h1>
        ​
        ​
        <div th:each="user,userState:${map}">
            <span th:text="${user.key}"></span>
            <span th:text="${user.value}"></span>
            <span th:text="${user.value.getNum()}"></span>
            <span th:text="${user.value.getName()}"></span>
        </div>
        ​
        </body>
        </html>

    • 结果：

      • th:each 循环遍历 map 集合
        0 user(num=0, name=KB0) 0 KB0
        1 user(num=1, name=KB1) 1 KB1
        2 user(num=2, name=KB2) 2 KB2
        3 user(num=3, name=KB3) 3 KB3
        4 user(num=4, name=KB4) 4 KB4

    • 方法说明：

      • th:each="userMap,userMapStat:${userMaps}"

      • 用 userMap 变量接收每次遍历的结果，封装

      • 为一个键值对，userMapStat 状态

      • userMap.key：获取当前键值对中的 key

      • userMap.value：获取当前键值对中的 value

  • 循环遍历数组：

    • message.html

      • <!DOCTYPE html>
        <html lang="en" xmlns:th="http://www.thymeleaf.org">
        <head>
         <meta charset="UTF-8">
         <title>循环遍历 Array 数组</title>
        </head>
        <body>
        <div th:each="user,userStat:${userArray}">
         <span th:text="${userStat.count}"></span>
         <span th:text="${user.id}"></span>
         <span th:text="${user.name}"></span>
         <span th:text="${user.phone}"></span>
         <span th:text="${user.address}"></span>
        </div>
        </body>
        </html>
10.5.14 th:if、th:unless

  • 条件判断

    • <div th:if="${sex == 1}">  男 </div>
      <div th:unless="${sex==1}"> 女 </div>

    • 对于th:if

      • 如果Controller类传过来的sex为1则输出男，否则不输出。

    • 对于th:unless

      • 除非Controller类传过来的sex为1，显示女，否则都不显示。

10.5.15 th:switch/th:case

  • 条件分支：

    • <div th:switch="${sex}">
       <span th:case="1">性别：男</span><br/>
       <span th:case="2">性别：女</span><br/>
       <span th:case="*">性别：保密</span>
      </div>

    • 一旦某个 case 判断值为 true，剩余的 case 默认不执行;

    • “*”表示默 认的 case，前面的 case 都不匹配时候，执行默认的 case.

10.5.16 th:inline:

  • th:inline 有三个取值类型 (text, javascript 和 none)，值为 none 什么都不做，没有效果;

    • 内敛文本（th:inline=”text”）

      • 内敛文本表达式不依赖于 html 标签，直接使用内敛表达式[[表达式]]即可获取动态数据，但 必须要求在父级标签上加 th:inline = “text”属性

        • userController类：

          • @RequestMapping(value = "/user/detail")
                public  String message(Model model)
                {
                    model.addAttribute("message","zmy");
                    return "message";
                }

        • message.html

          • <div th:inline="text">
                数据：[[${message}]]
            </div>

    • 内敛脚本(th:inline="javascript")

      • th:inline=”javascript”在 js 代码中获取后台的动态数据

        • message.html

          • <!DOCTYPE html>
            <html lang="en"  xmlns:th="http://www.thymeleaf.org">
            <head>
                <meta charset="UTF-8">
                <title>Title</title>
            </head>

            <body>

            <div th:inline="text">
                user：[[${message}]]
            </div>

            <script type="text/javascript" th:inline="javascript">
                function showMessage() {
                    alert("hello,"+[[${message}]]);
                }
            </script>

            <button th:onclick="showMessage()">click here!</button>

            </body>
            </html>
10.6 thymeleaf基本表达式对象：
10.6.1 #request

  • #request 相 当 于 httpServletRequest 对 象 ， 这 是 3.x 版 本 ， 若 是 2.x 版 本 使 用 #httpServletRequest，在页面获取应用的上下文根，一般在 js 中请求路径中加上可以避免 404.

    • <!DOCTYPE html>
      <html lang="en" xmlns:th="http://www.thymeleaf.org">
      <head>
       <meta charset="UTF-8">
       <title>Thymeleaf 表达式基本对象</title>
      </head>
      <body>
      <script type="text/javascript" th:inline="javascript">
       var basePath = [[${#httpServletRequest.getScheme() + "://" + 
      #httpServletRequest.getServerName() + ":" + 
      #httpServletRequest.getServerPort() + 
      #httpServletRequest.getContextPath()}]];
       //http://localhost:8080/springboot/user/login
       //获取协议名称
       var scheme = [[${#request.getScheme()}]];
       //获取服务 IP 地址
       var serverName = [[${#request.getServerName()}]];
       //获取服务端口号
       var serverPort = [[${#request.getServerPort()}]];
       //获取上下文根
       var contextPath = [[${#request.getContextPath()}]];
       var allPath = scheme+"://"+serverName+":"+serverPort+contextPath;
       alert(allPath);
      </script>
      </body>
      </html>
10.6.2 #session

  • 相当于 HttpSession 对象，这是 3.x 版本，若是 2.x 版本使用#httpSession

  • 在后台方法中向 session 中放数据

    • @RequestMapping(value = "/index")
      public String index(HttpServletRequest request) {
       request.getSession().setAttribute("username","zhangsan");
       return "index";
      }

  • 从页面获取数据

    • <h1>从 SESSION 中获取用户名称</h1>
      <span th:text="${#session.getAttribute('username')}"></span><br/>
      <span th:text="${#httpSession.getAttribute('username')}"></span>
10.7 thymeleaf表达式功能对象：
10.7.1 简介：

  • 模板引擎提供的一组功能性内置对象，可以在模板中直接使用这些对象提供的功能方法 工作中常使用的数据类型，如集合，时间，数值，可以使用 Thymeleaf 的提供的功能性对象 来处理它们

  • 内置功能对象前都需要加#号，内置对象一般都以 s 结尾

  • 官方手册：http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html

10.7.2功能对象方法

  • #dates: java.util.Date 对象的实用方法： 

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

  • #calendars: 和 dates 类似, 但是 java.util.Calendar 对象；

  • #numbers: 格式化数字对象的实用方法；

  • #strings: 字符串对象的实用方法：

  • contains, startsWith, prepending/appending 等；

  • #objects: 对 objects 操作的实用方法；

  • #bools: 对布尔值求值的实用方法；

  • #arrays: 数组的实用方法；

  • #lists: list 的实用方法，比如 :

    • <span th:text="${#lists.size(datas)}"></span>

  • #sets: set 的实用方法；

  • #maps: map 的实用方法；

  • #aggregates: 对数组或集合创建聚合的实用方法；

11 总结及综合案例

11.1 总结：

  • 采用 Spring Boot 开发实质上也是一个常规的 Spring 项目开发，只是利用了 SpringBoot 启动程序和自动配置简化开发过程，提高开发效率。

  • SpringBoot 项目开发代码的实现依然是使用 SpringMVC+ Spring + MyBatis 等，当然能集 成几乎所有的开源项目， SpringBoot 是极速 web 开发框架。

  • 采用 SpringBoot 开发，需要掌握大量的注解，所以日常开发中注意对注解的积累。

#####

posted @ 2022-05-01 10:58  张满月。  阅读(98)  评论(0)  编辑  收藏  举报