• SpringBoot保姆级教程（七）Thymeleaf

     目录

    一.Thymeleaf入门

    二. 变量输出

    三.操作字符串

    四.操作时间

    五. 条件判断

    六.迭代遍历

    七.使用状态变量  

    八.遍历Map

    九.获取域中的数据

    十.URL写法

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

    十二.Thymeleaf相关配置  

    一.Thymeleaf入门

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

    3. 创建视图 index.html 
    th:text的作用是将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. body>
    13. html>

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

    1. import org.springframework.stereotype.Controller;
    2. import org.springframework.ui.Model;
    3. import org.springframework.web.bind.annotation.GetMapping;
    4.  
    5. @Controller
    6. public class PageController {
    7.     //页面跳转
    8.     @GetMapping("/show")
    9.     public String showPage(Model model){
    10.         model.addAttribute("msg","Hello Thymeleaf");
    11.         return "index";
    12.     }
    13. }

    5.进行springboot配置  

     配置日志格式：

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

     Thymeleaf文件后缀是html，因为它本质上就是一个html文件。

    二. 变量输出

     1.准备模型数据

    用上面那个PageController类即可。

    2.在视图展示model中的值

    3.启动项目，访问localhost:8080/show

    ​

     可以看到输入框里有了初始值。

    三.操作字符串 

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

    使用方式举例：

    启动项目，访问localhost:8080/show

    四.操作时间

    操作时间的内置对象为dates

    1.准备数据

    (130,01,01)的意思是从1900年往后数130年，即2030年，1月1号

    model.addAttribute("date",new Date(130,01,01));

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

    1. <span th:text="${#dates.format(date)}">span> <hr/>
    2. <span th:text="${#dates.format(date,'yyyy/MM/dd')}">span> <hr/>
    3. <span th:text="${#dates.year(date)}">span> 
    4. <span th:text="${#dates.month(date)}">span> 
    5. <span th:text="${#dates.day(date)}">span>

    五. 条件判断

    1.准备数据

    model.addAttribute("sex","女");

    2.进行条件判断

    1. <div>
    2.     <span th:if="${sex} == '男'">性别：男span>
    3.     <span th:if="${sex} == '女'">性别：女span>
    4. div>

    1.准备数据

    model.addAttribute("id","12");

    2.进行条件判断

    1. <div th:switch="${id}">
    2.     <span th:case="1">ID为1span>
    3.     <span th:case="2">ID为2span>
    4.     <span th:case="3">ID为3span>
    5.     <span th:case="*">ID为*span>
    6. div>

    六.迭代遍历

    遍历集合
    在springbootdemo5下创建domain包，包下再新建Users类
    1
    1.编写实体类 
    1. public class Users {
    2.     private String id;
    3.     private String name;
    4.     private int age;
    5.     // 省略getter/setter/构造方法
    6. }

    2.准备数据 

    1. List users = new ArrayList<>();
    2. users.add(new Users("1","Jack",23));
    3. users.add(new Users("2","Tom",22));
    4. users.add(new Users("3","admin",25));
    5. model.addAttribute("users",users);

    3.在页面中展示数据

    1. <table border="1" width="50%">
    2.     <tr>
    3.         <th>IDth>
    4.         <th>Nameth>
    5.         <th>Ageth>
    6.     tr>
    7.     
    8.     <tr th:each="user : ${users}">
    9.         <td th:text="${user.id}">td>
    10.         <td th:text="${user.name}">td>
    11.         <td th:text="${user.age}">td>
    12.     tr>
    13. table>

    七.使用状态变量  

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

    使用状态变量(下面的status即可调用状态变量) 
    2. <tr th:each="user,status : ${users}">
    3.     <td th:text="${user.id}">td>
    4.     <td th:text="${user.name}">td>
    5.     <td th:text="${user.age}">td>
    6.     <td th:text="${status.index}">td>
    7.     <td th:text="${status.count}">td>
    8.     <td th:text="${status.size}">td>
    9.     <td th:text="${status.odd}">td>
    10.     <td th:text="${status.even}">td>
    11.     <td th:text="${status.first}">td>
    12.     <td th:text="${status.last}">td>
    13. tr>


    八.遍历Map

    1.准备数据

    1. Map map = new HashMap<>();
    2. map.put("user1",new Users("1","shangxuetang",23));
    3. map.put("user2",new Users("2","baizhan",22));
    4. map.put("user3",new Users("3","admin",25));
    5. model.addAttribute("map",map);

    2.遍历map

    1. <table border="1" width="50%">
    2.     <tr>
    3.         <th>IDth>
    4.         <th>Nameth>
    5.         <th>Ageth>
    6.         <th>Keyth>
    7.     tr>
    8.     
    9.     <tr th:each="m : ${map}">
    10.         <td th:text="${m.value.id}">td>
    11.         <td th:text="${m.value.name}">td>
    12.         <td th:text="${m.value.age}">td>
    13.         <td th:text="${m.key}">td>
    14.     tr>
    15. table>

    九.获取域中的数据

    thymeleaf 也可以获取 request ， session ， application 域中的数据，方法如下：
    1.准备数据 
    1. request.setAttribute("req","HttpServletRequest");
    2. session.setAttribute("ses","HttpSession");
    3. session.getServletContext().setAttribute("app","application");

    2.获取域数据 

    3. <span th:text="${#request.getAttribute('req')}"/ >
    5. <span th:text="${#httpServletRequest.getAttribute('req')}"/>
    6. <hr/>
    7.  
    8.  
    11. <span th:text="${session.ses}"/>
    13. <span th:text="${#httpSession.getAttribute('ses')}"/>
    14. <hr/>
    15.  
    18. <span th:text="${application.app}"/>
    20. <span th:text="${#servletContext.getAttribute('app')}"/>

    十.URL写法

    在 Thymeleaf 中路径的写法为 @{路径} 
    <a th:href="@{http://www.baidu.com}">百度a>
    在路径中添加参数
    1
    1.准备数据 
    1. model.addAttribute("id","100");
    2. model.addAttribute("name","Tom");
    2.准备跳转后访问的 Controller
    在PageController里添加下面的函数 
    1. @GetMapping("/show2")
    2. @ResponseBody
    3. public String show2(String id,String name) {
    4.     return id+":"+name; 
    5. }

    3.在URL中添加参数

    index.html中添加

    1. <a th:href="@{show2?id=1&name=Tom}">静态参数一a> 
    2. <a th:href="@{show2(id=2,name=Kobe)}">静态参数二a> 
    3. <a th:href="@{'show2?id='+${id}+'&name='+${name}}">动态参数一a> 
    4. <a th:href="@{show2(id=${id},name=${name})}">动态参数二a>

    访问localost:8080/show

    十一.在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>

    十二.Thymeleaf相关配置  

     在Springboot配置文件中可以进行Thymeleaf相关配置

    示例：

    比如在application.yml中配置

    1. spring:
    2.  thymeleaf:
    3.    prefix: classpath:/templates/
    4.    suffix: .html
    5.    encoding: UTF-8
    6.    cache: false
    7.    servlet:
    8.      content-type: text/html

    不过Thymeleaf一般不需要配置，默认配置就挺好。

  • 相关阅读:
    【FPGA教程案例70】硬件开发板调试10——vivado程序固化详细操作步骤
    基于Dockerfile创建镜像
    练摊吧，有能力吗，有资源吗，有地方吗
    运算放大器 —— 快速复苏笔记[贰]（应用篇)
    R可视化：桑基图展示数据层流动
    Pytorch框架学习记录6——torch.nn.Module和torch.nn.functional.conv2d的使用
    Kafka多维度调优
    ubuntu 18.04 搭建isaacgym学习环境，并运行legged_gym
    【题解】P8579 [CoE R5/Stoi2029] 半岛铁盒
    【学习笔记】[ARC156E] Non-Adjacent Matching
  • 原文地址：https://blog.csdn.net/weixin_44593822/article/details/127119948