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

Product类

准备实体类，用于页面上显示数据

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对象。

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

2. 获取对象属性的两种方式，这里可以直接调用方法了

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

4. 算数运算，这里之演示了加法，其他的减法，乘法什么的略过不表

<!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