• 07Thymeleaf

     项目结构:

    一、Thymeleaf_Thymeleaf入门

    Thymeleaf是一款用于渲染XML/HTML5 内容的模板引擎，类似JSP。它可以轻易的与 SpringMVC 等 Web 框架进行集成作为 Web 应用的模板引擎。在SpringBoot 中推荐使用 Thymeleaf 编写动态页面。
    Thymeleaf最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个Web应用。
    Thymeleaf 在有网络和无网络的环境下皆可运行，它即可以让美工在浏览器查看页面的静态效果，也可以让程序员在服务器查看带数据的动态页面效果。没有数据时，Thymeleaf的模板可以静态地运行；当有数据返回到页面时，Thymeleaf标签会动态地替换掉静态内容，使页面动态显示。

     即Thymeleaf是html文件，html文件显示静态效果，jsp文件显示动态效果，而Thymeleaf文件既可以显示静态效果也可以显示动态效果。

    1.创建Springboot项目
    2.引入SpringMVC和Thymeleaf起步依赖 
    2. <dependency>
    3.       <groupId>org.springframework.bootgroupId>
    4.     <artifactId>spring-boot-starterthymeleafartifactId>
    5. dependency> 
    6. <dependency>
    7.     <groupId>org.springframework.bootgroupId>
    8.     <artifactId>spring-boot-starterwebartifactId>
    9. dependency>

    3.创建视图index.html

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head>
    4.     <meta charset="UTF-8">
    5.     <title>thymeleaf入门title>
    6. head> 
    7. <body>
    10. <h2 th:text="${msg}">程序员h2>
    11. body>
    12. html>

    4.template中的html文件不能直接访问，需要编写Controller跳转到页面中

    1. @Controller
    2. public class PageController {
    3.     // 页面跳转
    4.     @GetMapping("/show")
    5.     public String showPage(Model model){
    6.         model.addAttribute("msg","Hello Thymeleaf");
    7.         return "index";
    8.    }
    9. }

    5.在application.properties配置文件中配置

    1. #日志格式
    2. logging.pattern.console=%d{HH:mm:ss.SSS}
    3. %clr(%-5level) --- [%-15thread]
    4. %cyan(%-50logger{50}):%msg%n
    6.启动项目，访问http://localhost:8080/show及静态页面

    7.结果显示：

    二、Thymeleaf_变量输出

    语法作用
    th：text将model中的值作为内容放入标签中
    th：value将model中的值放入input标签的value属性中

    1.准备模型数据：

    1. @GetMapping("/show")
    2. public String showPage(Model model){
    3.     model.addAttribute("msg","Hello Thymeleaf");
    4.     return "index"; 
    5. }
    2.在视图index.html展示model中的值 
    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>thymeleaf入门title>
    7. head>
    8. <body>
    11. <h2 th:text="${msg}">程序员h2>
    12. <input th:value="${msg}">
    13. body>
    14. html>
    6.启动项目，访问http://localhost:8080/show及页面

    7.结果显示：

    三、Thymeleaf_操作字符串

     Thymeleaf提供了一些内置对象可以操作数据，内置对象可直接在模板中使用，这些对象是以#引用的，操作字符串的内置对象为strings。

    方法说明
    ${#strings.isEmpty(key)}
    判断字符串是否为空，如果为空返回 true ，否则返回 false
    ${#strings.contains(msg,'T')}
    判断字符串是否包含指定的子串，如果包含返回 true ，否则返回false
    ${#strings.startsWith(msg,'a')}
    判断当前字符串是否以子串开头，如果是返回 true ，否则返回false
    ${#strings.endsWith(msg,'a')}
    判断当前字符串是否以子串结尾，如果是返回 true ，否则返回false
    ${#strings.length(msg)}
    返回字符串的长度
    ${#strings.indexOf(msg,'h')}
    查找子串的位置，并返回该子串的下标，如果没找到则返回 -1
    ${#strings.substring(msg,2,5)}
    截取子串，用法与 JDK 的 subString 方法相同
    ${#strings.toUpperCase(msg)}
    字符串转大写
    ${#strings.toLowerCase(msg)
    字符串转小写

    1.数据模型： 

    1. @GetMapping("/show")
    2. public String showPage(Model model){
    3.     model.addAttribute("msg","Hello Thymeleaf");
    4.     return "index"; 
    5. }
    2.使用方式：（在index.html中） 
    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>thymeleaf入门title>
    7. head>
    8. <body>
    10. <span th:text="${#strings.isEmpty(msg)}">span><br>
    11. <span th:text="${#strings.contains(msg,'s')}">span><br>
    12. <span th:text="${#strings.length(msg)}">span><br>
    13. <span th:text="${#strings.toUpperCase(msg)}">span><br>
    14. <span th:text="${#strings.substring(msg,2,5)}">span><br>
    15. body>
    16. html>
    3.启动项目，访问http://localhost:8080/show及页面

    4.结果显示：

    四、Thymeleaf_操作时间

     操作时间的内置对象为dates

    方法说明
    ${#dates.format(key)}
    格式化日期，默认的以浏览器默认语言为格式化标准
    ${#dates.format(key,'yyyy/MM/dd')}
    按照自定义的格式做日期转换
    ${#dates.year(key)}
    		取年
    ${#dates.month(key)}
    		取月
    ${#dates.day(key)}
    		取日

    1.准备数据：

    1. @GetMapping("/show")
    2. public String showPage(Model model){
    3.      //这里时间，年是从1990年开始算起，130即2030年，月从0开始算起，即这里的1指的是2月
    4.     model.addAttribute("date",new Date(130,1,1));
    5.     return "index"; 
    6. }

    2.使用内置对象操作时间

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>thymeleaf入门title>
    7. head>
    8. <body>
    10. <span th:text="${#dates.format(date)}">span><br>
    11. <span th:text="${#dates.format(date,'yyyy/MM/dd')}">span><br>
    12. <span th:text="${#dates.year(date)}">span><br>
    13. <span th:text="${#dates.month(date)}">span><br>
    14. <span th:text="${#dates.day(date)}">span><br>
    15. body>
    16. html>
    3.启动项目，访问http://localhost:8080/show及页面

    4.结果显示：

    五、Thymeleaf_条件判断

    1. 单分支if条件判断

    语法作用
    th：if条件判断

    1.准备数据模型 

    1. @GetMapping("/show")
    2. public String showPage(Model model){
    3.     model.addAttribute("sex","女");
    4.     return "index"; 
    5. }

    2.进行条件判断

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>thymeleaf入门title>
    7. head>
    8. <body>
    10. <div>
    11.     <span th:if="${sex} == '女'">性别：女span>
    12.     <span th:if="${sex} == '男'">性别：男span>
    13. div>
    14. body>
    15. html>
    3.启动项目，访问http://localhost:8080/show及页面

    4.结果显示：

    2.多分支switch-case条件判断

    语法作用
    th:switch/th:case
    th:switch/th:case 与 Java 中的 switch 语句等效。 th:case="*" 表示 Java 中switch的 default ，即没有 case 的值为 true 时显示 th:case="*" 的内容。

    1.准备数据模型

    1. @GetMapping("/show")
    2. public String showPage(Model model){
    3.     model.addAttribute("id","12");
    4.     return "index"; 
    5. }
    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>thymeleaf入门title>
    7. head>
    8. <body>
    10. <div th:switch="${id}">
    11.     <span th:case="1">ID为1span>
    12.     <span th:case="2">ID为2span>
    13.     <span th:case="3">ID为3span>
    14.     <span th:case="*">ID为*span>
    15. div>
    16. body>
    17. html>
    3.启动项目，访问http://localhost:8080/show及页面

    4.结果显示：（因为传入的数12不在case案例中，所以返回case=“*”的结果）

    六、Thymeleaf_迭代遍历

    语法

    作用

    th：each

    迭代器，用于循环迭代集合

    1.遍历集合

     1.编写Users实体类

    1. public class Users {
    2.     private String id;
    3.     private String name;
    4.     private int age;
    5.     // 省略getter/setter/构造方法
    6. }

     2.准备数据

    1. @GetMapping("/show")
    2. public String showPage(Model model){
    3.     List users = new ArrayList<>();
    4.     users.add(new Users("1","sxt",23));
    5.     users.add(new Users("2","baizhan",22));
    6.     users.add(new Users("3","admin",25));
    7.     model.addAttribute("users",users);
    8.     return "index"; 
    9. }

    3.在页面中展示数据 

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>thymeleaf入门title>
    7. head>
    8. <body>
    10. <table border="1" width="50%">
    11.     <tr>
    12.         <th>IDth>
    13.         <th>Nameth>
    14.         <th>Ageth>
    15.     tr>
    16.     
    17.     <tr th:each="user : ${users}">
    18.         <td th:text="${user.id}">td>
    19.         <td th:text="${user.name}">td>
    20.         <td th:text="${user.age}">td>
    21.     tr>
    22. table>
    23. body>
    24. html>

     4.启动项目，访问http://localhost:8080/show及页面

    5.结果显示：

     2.使用状态变量

     thymeleaf将遍历的状态变量封装到一个对象中，通过该对象的属性可以获取状态变量：

    状态变量含义
    indexl当前迭代器的索引，从0开始
    count当前迭代器对象的技术，从1开始
    size被迭代对象的长度
    odd/even布尔值，当前循环是否是偶数/奇数，从0开始
    first
    布尔值，当前循环的是否是第一条，如果是返回 true ，否则返回 false
    last
    布尔值，当前循环的是否是最后一条，如果是返回 true ，否则返回 false
    使用状态变量 
    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>thymeleaf入门title>
    7. head>
    8. <body>
    10. <table border="1" width="50%">
    11.     
    12.     <tr th:each="user,status : ${users}">
    13.         <td th:text="${user.id}">td>
    14.         <td th:text="${user.name}">td>
    15.         <td th:text="${user.age}">td>
    16.         <td th:text="${status.index}">td>
    17.         <td th:text="${status.count}">td>
    18.         <td th:text="${status.size}">td>
    19.         <td th:text="${status.odd}">td>
    20.         <td th:text="${status.even}">td>
    21.         <td th:text="${status.first}">td>
    22.         <td th:text="${status.last}">td>
    23.     tr>
    24. table>
    25. body>
    26. html>

     4.启动项目，访问http://localhost:8080/show及页面

    5.结果显示：

    3.遍历Map

    1.准备数据：

    1. @GetMapping("/show")
    2. public String showPage(Model model){
    3.         //map对象类型
    4.         Map map = new HashMap();
    5.         map.put("user1",new Users("1","sxt",23));
    6.         map.put("user2",new Users("2","tx",25));
    7.         map.put("user3",new Users("3","xyj",20));
    8.         model.addAttribute("map",map);
    9.     return "index"; 
    10. }

     2.遍历map：

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>thymeleaf入门title>
    7. head>
    8. <body>
    10. <table border="1" width="50%">
    11.    <tr>
    12.        <th>IDth>
    13.        <th>Nameth>
    14.        <th>Ageth>
    15.        <th>Keyth>
    16.    tr>
    17.    
    18.     <tr th:each="map : ${map}">
    19.         <td th:text="${map.value.id}">td>
    20.         <td th:text="${map.value.name}">td>
    21.         <td th:text="${map.value.age}">td>
    22.         <td th:text="${map.key}">td>
    23.     tr>
    24. table>
    25. body>
    26. html>
    3.启动项目，访问http://localhost:8080/show及页面

    4.结果显示：

    七、Thymeleaf_获取域中的数据

    thymeleaf也可以获取request，session，application域中的数据，方法如下：

    1.准备数据 
    1.    @GetMapping("/show")
    2.     public String showPage(Model model, HttpServletRequest request, HttpSession session){
    3.  
    4.         //获取域中的数据
    5.         request.setAttribute("req","HttpServletRequest");
    6.         session.setAttribute("ses","HttpSession");
    7.         session.getServletContext().setAttribute("app","application");
    8.  
    9.         return "index";
    10.     }
    2.获取域数据 
    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>thymeleaf入门title>
    7. head>
    8. <body>
    10. <hr/>
    11. request:<span th:text="${#request.getAttribute('req')}">span>
    12. request2:<span th:text="${#httpServletRequest.getAttribute('req')}">span>
    13.  
    14. <hr/>
    15. session1:<span th:text="${session.ses}">span>
    16. session2:<span th:text="${#httpSession.getAttribute('ses')}">span>
    17.  
    18. <hr/>
    19. application1:<span th:text="${application.app}"/>
    20. application2:<span th:text="${#servletContext.getAttribute('app')}"/>
    21. body>
    22. html>
    3.启动项目，访问http://localhost:8080/show及页面

    4.结果显示：

    八、Thymeleaf_URL写法

    在Thymeleaf中路径的写法为 @{路径}

     th:href="@{http://www.baidu.com}">百度

    1.在路径中添加参数

    1.准备数据 
    1.    @GetMapping("/show")
    2.     public String showPage(Model model, HttpServletRequest request, HttpSession session){
    3.  
    4.         model.addAttribute("id","100");
    5.         model.addAttribute("name","zhangsan");
    6.  
    7.         return "index";
    8.     }
    2.准备跳转后访问的Controller 
    1.     @GetMapping("/show2")
    2.     @ResponseBody
    3.     public String show2(String id,String name){
    4.         return id+":"+name;
    5.     }

    3.在URL中添加参数 

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>thymeleaf入门title>
    7. head>
    8. <body>
    10. <a th:href="@{http://www.baidu.com}">百度a>
    11.  
    12. <a th:href="@{show2?id=1&name=zhangsan}">静态参数一a>
    13. <a th:href="@{show2(id=1,name=zhangsan)}">静态参数二a>
    14. <a th:href="@{'show2?id='+${id}+'$name='+${name}}">动态参数一a>
    15. <a th:href="@{show2(id=${id},name=${name})}">动态参数二a>
    16. body>
    17. html>
    4.启动项目，访问http://localhost:8080/show及页面

    5.结果显示：

    2. 在RESTful风格路径中添加参数

    1.准备跳转后访问的 Controller 
    1.   @GetMapping("/show3/{id}/{name}")
    2.     @ResponseBody
    3.     public String show3(@PathVariable String id,@PathVariable String name){
    4.         return id+":"+name;
    5.     }

    2.在URL中添加参数

    <a th:href="@{/show3/{id}/{name}(id=${id},name=${name})}">RESTful风格传递参数方式a>
    3.启动项目，访问http://localhost:8080/show及页面

    4.结果显示：

    九、知识点整理：

    1.Thymeleaf文件的后缀名是“.html ”

    2.关于Thymeleaf，“在SpringBoot中推荐使用Thymeleaf编写动态页面。”

    3.在Thymeleaf中，使用"th:value"属性可以将model中的值放入 的value 属性中

    4.在Thymeleaf中，操作字符串的内置对象为“strings”

    5.在Thymeleaf中，操作时间的内置对象为“dates ”

    6.在Thymeleaf中，表示条件判断的属性为“th:if”

    7.在Thymeleaf中， th:case="*" 表示“没有case的值为true时显示 th:case="*" 的内容”

    8.在Thymeleaf中，遍历集合的属性为 “th:each ”

    9.在Thymeleaf中，遍历集合时，迭代器索引的状态变量为“index”

    10.在Thymeleaf中，遍历Map集合时，遍历出的每一项是“键值对”

  • 相关阅读:
    015 Linux 标准输入输出、重定向、管道和后台启动进程命令
    【STL源码剖析】STL六大组件功能与运用（目录）
    Oracle EBS Interface/API(44)- 销售订单发运明细行拆分
    复习Day06：24. 两两交换链表中的节点、19.删除链表的倒数第N个节点
    steam搬砖到底能不能做？
    都知道低代码，但你真的了解低代码吗？
    Dijkstra算法和Floyd算法求最短路径
    Python - inspect 模块的简单使用
    m基于matlab的光通信误码率仿真,分别对比了OFDM+BPSK和OFDM+4QAM的误码率和星座图
    ChatGPT 升级出现「we are unable to authenticate」怎么办？
  • 原文地址：https://blog.csdn.net/m0_51697147/article/details/127101738