22.THYMELEAF 中各种表达式YONG'F

Product类

准备实体类，用于页面上显示数据
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
package com.how2java.springboot.pojo;
 
public class Product {
 
    private int id;
    private String name;
    private int price;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getPrice() {
        return price;
    }
    public void setPrice(int price) {
        this.price = price;
    }
    public Product(int id, String name, int price) {
        super();
        this.id = id;
        this.name = name;
        this.price = price;
    }
     
}
 步骤 5 : 

TestController

控制器里准备数据，然后映射 /test 路径，返回到test.html中
准备了 一个html片段和 一个 Product对象。
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
package com.how2java.springboot.web;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
 
import com.how2java.springboot.pojo.Product;
  
@Controller
public class TestController {
  
    @RequestMapping("/test")
    public String test(Model m) {
        String htmlContent = "<p style='color:red'> 红色文字</p>";
        Product currentProduct =new Product(5,"product e", 200);
         
        m.addAttribute("htmlContent", htmlContent);
        m.addAttribute("currentProduct", currentProduct);
         
        return "test";
    }
}
 步骤 6 : 

test.html

test.html 把控制器中准备的数据展示出来
1. 转义和非转义的html
 
<p th:text="${htmlContent}" ></p>
<p th:utext="${htmlContent}" ></p>
 


2. 获取对象属性的两种方式，这里可以直接调用方法了
 
<p th:text="${currentProduct.name}" ></p>
<p th:text="${currentProduct.getName()}" ></p>
 


3. 使用 *{} 方式显示当前对象的属性
<div class="showing" th:object="${currentProduct}">
<h2>*{}方式显示属性</h2>
<p th:text="*{name}" ></p>
</div>

4. 算数运算，这里之演示了加法，其他的减法，乘法什么的略过不表
 
<p th:text="${currentProduct.price+999}" ></p>
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" href="../../webapp/static/css/style.css"th:href="@{/static/css/style.css}"/>
    <script type="text/javascript" src="../../webapp/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>
     
    <style>
        h2{
            text-decoration: underline;
            font-size:0.9em;
            color:gray;
        }
    </style>       
</head>
<body>
 
<div class="showing">
    <h2>显示 转义和非转义的 html 文本</h2>
    <p th:text="${htmlContent}" ></p>
    <p th:utext="${htmlContent}" ></p>
</div>
 
<div class="showing">
    <h2>显示对象以及对象属性</h2>
    <p th:text="${currentProduct}" ></p>
    <p th:text="${currentProduct.name}" ></p>
    <p th:text="${currentProduct.getName()}" ></p>
</div>
 
<div class="showing" th:object="${currentProduct}">
    <h2>*{}方式显示属性</h2>
    <p th:text="*{name}" ></p>
</div>
 
<div class="showing">
    <h2>算数运算</h2>
    <p th:text="${currentProduct.price+999}" ></p>
</div>
 
</body>
 
</html>
 步骤 7 : 

重启测试

重新运行Application, 然后访问地址, 即可看到如图效果
 
http://127.0.0.1:8080/thymeleaf/test
 

posted on 2019-01-04 16:59  我是司  阅读(348)  评论(0)    收藏  举报

导航