• Thymeleaf学习（1）—— 表达式和属性

    一、初始化设置 

    添加依赖

    2. <dependency>
    3.     <groupId>org.springframework.bootgroupId>
    4.     <artifactId>spring-boot-starter-thymeleafartifactId>
    5. dependency>

    在html中需要添加以下内容

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

    可以在下面添加如下内容，可以关闭thymeleaf的红线报错

    在application.properties文件中可以添加以下内容，也可以不添加（都是默认的）

    1. #### 以下内容都为默认，可以不用添加 #####
    2. #在开发阶段，关闭模板引擎
    3. spring.thymeleaf.cache=false
    4. #编码格式
    5. spring.thymeleaf.encoding=UTF-8
    6. #模板的类型(默认是HTML)
    7. spring.thymeleaf.mode=HTML
    8. #模板前缀：文件的路径
    9. spring.thymeleaf.prefix=classpath:/templates/
    10. #模板后缀
    11. spring.thymeleaf.suffix=.html

    二、表达式

    1. 标准变量表达式：${key}

    语法：${key}，在页面的标签中使用 th:text="${key}"

    作用：获取request作用域中key对应的值。可以使用request.setAttribute(key, value)或者model.addAttribute(key, value)往request作用域中存放数据。

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7. head>
    8. <body>
    9.     <p th:text="${data}">数据p>          
    10.     <p th:text="${user}">用户p>          
    11.     <p th:text="${user.id}">idp>        
    12.     <p th:text="${user.name}">姓名p>     
    13.     <p th:text="${user.age}">年龄p>      
    14. body>
    15. html>

    如果直接进入test.html页面，则会显示原来标签中间的数据，只有通过controller才能获取到作用域中的值

    1. package com.xdu.studyspringboot.controller;
    2.  
    3. import com.xdu.studyspringboot.pojo.User;
    4. import org.springframework.stereotype.Controller;
    5. import org.springframework.ui.Model;
    6. import org.springframework.web.bind.annotation.RequestMapping;
    7.  
    8. import javax.servlet.http.HttpServletRequest;
    9.  
    10. @Controller
    11. public class ThymeleafController {
    12.     @RequestMapping("/testThymeleaf")
    13.     public String testThymeleaf(HttpServletRequest request, Model model){
    14.         request.setAttribute("data", "Thymeleaf模板引擎");
    15.         model.addAttribute("user", new User(1, "Tom", 23));   //User是一个实体对象的类
    16.         return "test";
    17.     }
    18. }

    2. 选择变量表达式：*{key}

    语法：*{key}，在标签中使用 th:text="*{key}"

    作用：获取request作用域中key对应的值。可以和th:object一起使用更方便获取对象的属性值

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7. head>
    8. <body>
    9.     <p th:text="*{user.name}">p>
    10.     <p th:text="*{data}">p>
    11.     
    12.     <div th:object="${user}">
    13.         <p th:text="*{id}">p>
    14.         <p th:text="*{name}">p>
    15.         <p th:text="*{age}">p>
    16.     div>
    17. body>
    18. html>
    1. package com.xdu.studyspringboot.controller;
    2.  
    3. import com.xdu.studyspringboot.pojo.User;
    4. import org.springframework.stereotype.Controller;
    5. import org.springframework.web.bind.annotation.RequestMapping;
    6.  
    7. import javax.servlet.http.HttpServletRequest;
    8.  
    9. @Controller
    10. public class ThymeleafController {
    11.     @RequestMapping("/testThymeleaf")
    12.     public String testThymeleaf(HttpServletRequest request){
    13.         request.setAttribute("data","Thymeleaf");
    14.         request.setAttribute("user", new User(1, "Tom", 23));   //User是一个实体对象的类
    15.         return "test";
    16.     }
    17. }

    3. 链接表达式：@{url}

    语法：@{url}，在标签中使用

    作用：链接到其他地址

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>index页面title>
    7. head>
    8. <body>
    9.     <h1>链接到绝对地址h1>
    10.     <a th:href="@{http://www.baidu.com}">百度a> <br/>
    11.  
    12.     <h1>链接到相对地址，没有参数h1>
    13.     <a th:href="@{/test}">test.html页面a>  <br/>
    14.     <a th:href="@{/testThymeleaf}">通过访问controller来进入test.html页面a> <br/>
    15.  
    16.     <h1>链接到相对地址，有参数h1>    
    17.     <a th:href="@{/queryUser?id=1}">链接到有参数的页面a> <br/>
    18.     <a th:href="@{/queryUser(id=2)}">链接到有参数的页面a> <br/>
    19. body>
    20. html>
    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7. head>
    8. <body>
    9.     <h1>test.html页面h1>
    10.  
    11.     <p th:text="${data}">数据p>
    12.     <p th:text="${user}">用户p>
    13. body>
    14. html>
    1. package com.xdu.studyspringboot.controller;
    2.  
    3. import com.xdu.studyspringboot.pojo.User;
    4. import org.springframework.stereotype.Controller;
    5. import org.springframework.web.bind.annotation.RequestMapping;
    6. import org.springframework.web.bind.annotation.ResponseBody;
    7.  
    8. import javax.servlet.http.HttpServletRequest;
    9.  
    10. @Controller
    11. public class ThymeleafController {
    12.     @RequestMapping("/")
    13.     public String index(){
    14.         return "index";
    15.     }
    16.  
    17.     @RequestMapping("/test")
    18.     public String testPage(){
    19.         return "test";
    20.     }
    21.  
    22.     @RequestMapping("/testThymeleaf")
    23.     public String testThymeleaf(HttpServletRequest request){
    24.         request.setAttribute("data","Thymeleaf");
    25.         request.setAttribute("user", new User(1, "Tom", 23));   //User是一个实体对象的类
    26.         return "test";
    27.     }
    28.  
    29.     @RequestMapping("/queryUser")
    30.     @ResponseBody
    31.     public String queryUser(Integer id){
    32.         return "参数："+id;
    33.     }
    34. }

    三. 属性 

    Thymeleaf的属性大多都是：html属性加上th前缀，作用和原本的html属性作用相同，如：th:action=""，th:text=""，th:href=""，th:src=""，th:method=""等

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7. head>
    8. <body>
    9.     <form th:action="@{/login}" th:method="post">
    10.         姓名：<input th:type="text" th:name="name">  <br/>
    11.         <input type = "submit" value = "注册"/>
    12.     form>
    13.  
    14.     <p th:text="${name}">p>
    15. body>
    16. html>
    1. package com.xdu.studyspringboot.controller;
    2.  
    3. import org.springframework.stereotype.Controller;
    4. import org.springframework.web.bind.annotation.RequestMapping;
    5.  
    6. import javax.servlet.http.HttpServletRequest;
    7.  
    8. @Controller
    9. public class ThymeleafController {
    10.     @RequestMapping("/login")
    11.     public String testLogin(HttpServletRequest request){
    12.         String username = request.getParameter("name");
    13.         request.setAttribute("name", username);
    14.         return "test";
    15.     }
    16. }

    四. 内联文本

    内联文本th:inline，可以不依赖html的标签直接获取值，方式是：[[${key}]]

     也可以在js中使用内联文本获取值

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7.     <script type="text/javascript" th:inline="javascript">
    8.         var name = [[${name}]];
    9.         var age = [[${age}]];
    10.         alert("我是"+name+"，年龄"+age);
    11.     script>
    12.     
    13. head>
    14. <body>
    15.     <p>我是[[${name}]]，年龄[[${age}]]p> <br/>   
    16.     <p>我是[[${user.name}]]，年龄[[${user.age}]]p> <br/>   
    17. body>
    18. html>
    1. package com.xdu.studyspringboot.controller;
    2.  
    3. import com.xdu.studyspringboot.pojo.User;
    4. import org.springframework.stereotype.Controller;
    5. import org.springframework.web.bind.annotation.RequestMapping;
    6.  
    7. import javax.servlet.http.HttpServletRequest;
    8.  
    9. @Controller
    10. public class ThymeleafController {
    11.     @RequestMapping("/inline")
    12.     public String testInline(HttpServletRequest request){
    13.         request.setAttribute("name","Tom");
    14.         request.setAttribute("age",22);
    15.         request.setAttribute("user", new User(1, "Tom", 22));
    16.  
    17.         return "test";
    18.     }
    19. }

    五. 字符串连接

     1. 使用单引号

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7. head>
    8. <body>
    9.     <p th:text="'我是'+${name}+'，年龄'+${age}">p>   
    10. body>
    11. html>

    2. 使用双竖线

    1. html>
    3. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>Titletitle>
    7. head>
    8. <body>
    9.     <p th:text="|我是${name}，年龄${age}|">p>   
    10. body>
    11. html>
    1. package com.xdu.studyspringboot.controller;
    2.  
    3. import org.springframework.stereotype.Controller;
    4. import org.springframework.web.bind.annotation.RequestMapping;
    5.  
    6. import javax.servlet.http.HttpServletRequest;
    7.  
    8. @Controller
    9. public class ThymeleafController {
    10.     @RequestMapping("/stringLink")
    11.     public String testStringLink(HttpServletRequest request){
    12.         request.setAttribute("name","Tom");
    13.         request.setAttribute("age",22);
    14.  
    15.         return "test";
    16.     }
    17. }
  • 相关阅读:
    K8S：K8S自动化运维容器Docker集群
    SpringMVC（第一个项目HelloWorld））
    Spring-aop技术
    系统架构设计师-第9章-软件可靠性基础知识-学习笔记
    python type hint
    【JVM面试】从JDK7 到 JDK8, JVM为啥用元空间替换永久代？
    注解(Annotation)基础
    web前端期末大作业【仿12306铁路官网首页】学生网页设计作业源码
    Vue2使用dhtmlx-gantt插件实现复杂甘特图
    TMS320F28374S之CMPSS
  • 原文地址：https://blog.csdn.net/Archer__13/article/details/126894807