thymeleaf 的基本用法笔记总结

刺骨的言语ヽ痛彻心扉 2022-04-04 10:46 242阅读 0赞

thymeleaf 的基本使用方法  www.thymeleaf.org 里面有官方文档

基本的使用的方式  
th:value th:name th:action  th:object th:filed

<select>  
    <option><th:selected="$\{user.name eq sss\}"></option> 判断是不是这个值，如果是就代替标签的内容 实现选择框  
</select>

时间类型转换  
dates.fromat(user.birthday(参数)，'yy-mm-dd'(fomat的表达式))  
           
对象引用方式

url

<th:href= "@\{http://localhost:8080\}"> 必须加@符号

引入静态的资源文件 js/css  
    配置参数 spring.mvc.static-path-pattern=/static/\*\*  
    html配置连接文件  
    <link th:href="@\{/static/js/test.js\}"/>

条件判断 th:if 条件判断  gt 大于 lt 小于  ge 大于等于 le 小于等于

th:each 和jstl的foreach差不多  用法th:each="user:$\{userlist\}"

th:switch 选择的参数 th:case 实现选择的具体内容

text和utext

text 会原封不动的展现你返回的html代码

utext 会相当于解析你的html代码，相当于进行文本的编辑

我觉得用代码更能直观的显示

测试的环境  win10 + STS

springboot+thymeleaf

配置thymeleaf 的依赖

<dependency>
    			<groupId>org.springframework.boot</groupId>
    			<artifactId>spring-boot-starter-thymeleaf</artifactId>
    		</dependency>

配置静态thymeleaf 的读取的静态的js和css文件  
spring.mvc.static-path-pattern=/static/\*\*     表示默认是在classpath下

test.html

<!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head lang="en">
        <meta charset="UTF-8" />
        <title></title>
        
    -->
        
    </head>
    <body>
    
    <div>
        用户姓名：<input th:id="${user.name}" th:name="${user.name}" th:value="${user.name}"/>
        <br/>
        用户年龄：<input th:value="${user.age}"/>
        <br/>
        用户生日：<input th:value="${user.birthday}"/>
        <br/>
    
        用户生日：<input th:value="${#dates.format(user.birthday,'yyyy-MM-dd')}">
        
        <br/>
    </div>
    
    <br/>
     
    <div th:object="${user}">
        用户姓名：<input th:id="*{name}" th:name="*{name}" th:value="*{name}"/>
        <br/>
        用户年龄：<input th:value="*{age}"/>
        <br/>
        用户生日：<input th:value="*{#dates.format(birthday, 'yyyy-MM-dd hh:mm:ss')}"/>
        <br/>
    </div>
    
    <br/>
     
    text 与 utext ：<br/>
    <span th:text="${user.desc}">abc</span>
    <br/>
    <span th:utext="${user.desc}">abc</span>
    <br/>
    <br/>
    
    URL:<br/>
    <a  th:href="@{http://www.imooc.com}">网站地址</a>
    <br/>
    
    <br/>
    <form th:action="@{/th/postform}" th:object="${user}" method="post" th:method="post">
        <input type="text" th:field="*{name}"/>
        <input type="text" th:field="*{age}"/>
        <input type="submit"/>
    </form>
    <br/>
    
    <br/>
    <div th:if="${user.age} == 18">十八岁的天空</div>
    <div th:if="${user.age} gt 18">你老了</div>
    <div th:if="${user.age} lt 18">你很年轻</div>
    <div th:if="${user.age} ge 18">大于等于</div>
    <div th:if="${user.age} le 18">小于等于</div>
    <br/>
    
    <br/>
    <select>
         <option >选择框</option>
         <option th:selected="${user.name eq 'lee'}">lee</option>
         <option th:selected="${user.name eq 'imooc'}">imooc</option>
         <option th:selected="${user.name eq 'LeeCX'}">LeeCX</option>
    </select>
    <br/>
    
    <br/>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>年龄备注</th>
            <th>生日</th>
        </tr>
        <tr th:each="person:${userList}">
            <td th:text="${person.name}"></td>
            <td th:text="${person.age}"></td>
            <td th:text="${person.age gt 18} ? 你老了 : 你很年轻">18岁</td>
            <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd hh:mm:ss')}"></td>
        </tr>
    </table>
    <br/>
    
    <br/>
    <div th:switch="${user.name}">
      <p th:case="'lee'">lee</p>
      <p th:case="'manager'">普通管理员</p>
      <p th:case="'superadmin'">超级管理员</p>
      <p th:case="*">其他用户</p>
    </div>
    <br/>
    
    </body>
    </html>

上面是直观的显示html里面用thymeleaf的一些表达式

实现的controller类

package com.soft.controller;
    
    import java.util.ArrayList;
    import java.util.Date;
    import java.util.List;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.ModelMap;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import com.huahang.pojo.User;
    
    @Controller
    @RequestMapping("th")
    public class ThymeleafController {
    
    	@RequestMapping("/index")
        public String index(ModelMap map) {
            map.addAttribute("name", "thymeleaf-imooc");
            return "thymeleaf/index";
        }
    	
    	@RequestMapping("center")
        public String center() {
            return "thymeleaf/center/center";
        }
    	
    	@RequestMapping("test")
        public String test(ModelMap map) {
    		
    		User u = new User();
    		u.setName("superadmin");
    		u.setAge(20);
    		u.setPassword("123465");
    		u.setBirthday(new Date());
    		u.setDesc("<font color='green'><b>hello imooc</b></font>");
    		
    		map.addAttribute("user", u);
    		
    		User u1 = new User();
    		u1.setAge(19);
    		u1.setName("imooc");
    		u1.setPassword("123456");
    		u1.setBirthday(new Date());
    		
    		User u2 = new User();
    		u2.setAge(17);
    		u2.setName("LeeCX");
    		u2.setPassword("123456");
    		u2.setBirthday(new Date());
    		
    		List<User> userList = new ArrayList<>();
    		userList.add(u);
    		userList.add(u1);
    		userList.add(u2);
    		
    		map.addAttribute("userList", userList);
    		
            return "thymeleaf/test";
        }
    	
    	@PostMapping("postform")
        public String postform(User u) {
    		
    		System.out.println("姓名：" + u.getName());
    		System.out.println("年龄：" + u.getAge());
    		
            return "redirect:/th/test";
        }
    }

亲测有效

注意：本文的代码来自于慕课网**风间影月 springboot开发常用技术整合 的课程  **

本文是用于笔记，有神魔问题还请指教