springboot整合thymeleaf的简单操作(1)

thymeleaf是一种视图技术类似于jsp springboot用thymeleaf的比较多

首先添加在maven中添加依赖：

<!--添加thymeleaf依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
            <version>2.2.5.RELEASE</version>
        </dependency>
其次 在springboot项目的templates文件夹下建立一个html文件 index.html作为测试的页面
再写一个测试类User:

package com.mc_74120.springbootthymeleaf.domain;

public class User {
    private String id;
    private String name;
    private int age;

    public User() {
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public User(String id, String name, int age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }
}
再创建控制器:

@Controller
public class PageController {
    @GetMapping("/show")
    public String show(Model model){

return  "index";
    }
}
这样就可以对thymeleaf进行测试了
 1.字符串与变量输出
在controller中添加

model.addAttribute("hello","hello");
在index.html中写入:

<span th:text="嘟嘟噜"></span>

<span th:text="${hello}"></span>

<input th:value="${hello}">
结果如图:

th:text="${hello}" 可以从controller传来的model中取出key为hello的对象并把其value写入标签中

<span th:text="${hello}">123</span> th:text 会把标签中的值覆盖掉所以最终会显示${hello}的内容而不是 123

<input th:value="${hello}"> th:value 会把内容赋给文本框 th:value 只能用于input标签

2.字符串操作:

<span th:text="${#strings.isEmpty(hello)}"></span>   model中的hello的value是否为空
<br/>
<span th:text="${#strings.contains(hello,'h')}"></span>  是否包含'h'  
<br/>
<span th:text="${#strings.length(hello)}"></span>     内容的长度
<br/>
结果如图所示

3.日期操作：

控制器添加:

model.addAttribute("date",new Date());
index.html添加:

<span th:text="${#dates.format(date)}"></span> 以系统默认格式 显示日期
<br/>
<span th:text="${#dates.format(date,'yyyy/MM/dd')}"></span> 以指定形式显示日期
<br/>
<span th:text="${#dates.year(date)}"></span> 显示日期中的年份
<br/>
<span th:text="${#dates.month(date)}"></span> 月份
<br/>
<span th:text="${#dates.day(date)}"></span> 第几日
<br/>
结果如图:

if条件判断:

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

<span th:if="${sex}=='男'">
    性别:男
</span>
    <span th:if="${sex}=='女'">
        性别:女
    </span>
因为 sex的值为"男" 所以应该显示 性别:男 这一栏
结果如图:

switch判断

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

<div th:switch="${id}">
<span th:case="id">id</span>
    <span th:case="id2">id2</span>
</div>
结果如图:

迭代遍历

List<User> users=new ArrayList<>();
users.add(new User("1","74120",10));
users.add(new User("2","74122",11));
users.add(new User("3","74123",12));
users.add(new User("4","74124",103));
model.addAttribute("userList",users);

<table border="1" width="50%">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr th:each="u:${userList}">
        <th th:text="${u.id}"></th>
        <th th:text="${u.name}"></th>
        <th th:text="${u.age}"></th>
    </tr>
</table>

迭代map

Map<String,User> userMap=new HashMap<>();
userMap.put("user1",new User("1","74120",10) );
userMap.put("user2",new User("2","74122",11));
userMap.put("user3",new User("3","74123",12));
userMap.put("user4",new User("4","74124",103));
model.addAttribute("map",userMap);

<table border="1" width="50%">
    <tr>
        <th>Value</th>
    </tr>
    <tr th:each="m:${map}">
        <th th:text="${m}"></th>
    </tr>
</table>

<table border="1" width="50%">
    <tr>
        <th>key</th>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr th:each="m:${map}">
        <th th:text="${m.key}"></th>
        <th th:text="${m.value.id}"></th>
        <th th:text="${m.value.name}"></th>
        <th th:text="${m.value.age}"></th>
    </tr>
</table>

取map中的元素的变量 应该用 m.value.xx 而m.key则是map对象的key名称
如图所示

springboot整合thymeleaf的简单操作(1)

猜你喜欢