Thymeleaf條件判斷


本文章將介紹Thymeleaf標準表示式語法中的概念。我們將使用th:ifth:unless標記在模板中迭代顯示產品列表,如果產品的價格大於100,則會顯示:「特殊提供」

編輯原始碼以便將產品列表顯示為表格行。已經將Product類的物件列表設定為具有變數名稱productList的上下文模型(參考:MyController.java中的實現)。

如果要上機實踐,請參考:Thymeleaf+SpringMVC5範例專案。這裡不再重複建立專案的過程,這裡將只介紹如何使用Thymeleaf標準表示式和標籤。

這裡建立一個Maven Web專案: thymeleaf-tutorials ,其目錄結構如下所示 -

資料存取類的實現:DAO.java -


package com.yiibai.dao;

import java.math.BigDecimal;
import java.sql.Timestamp;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import com.yiibai.spring.bean.*;

/**
 * Mock persistence.
 */
public class DAO {

    private static final String NO_WEBSITE = null;

    public static Product loadProduct() {
        try {
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
            return new Product("Wooden wardrobe with glass doors", Integer.valueOf(850), sdf.parse("2013-02-18"));
        } catch (ParseException ex) {
            throw new RuntimeException("Invalid date");
        }
    }

    public static List<Product> loadAllProducts() {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        List<Product> products = new ArrayList<Product>();
        try {
            products.add(new Product("花生油", Integer.valueOf(125), sdf.parse("2018-02-18")));
            products.add(new Product("蘇打餅乾", Integer.valueOf(15), sdf.parse("208-02-15")));
            products.add(new Product("拿鐵", Integer.valueOf(45), sdf.parse("2019-02-20")));
            products.add(new Product("調和油", Integer.valueOf(20), sdf.parse("2019-02-21")));
            products.add(new Product("大豆油", Integer.valueOf(49), sdf.parse("2019-02-15")));
            products.add(new Product("玉米汁", Integer.valueOf(80), sdf.parse("2019-02-17")));
        } catch (ParseException ex) {
            throw new RuntimeException("Invalid date");
        }
        return products;
    }



    public static Timestamp loadReleaseDate() {
        try {
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm");
            Date date = sdf.parse("2014-01-31 15:00");
            return new Timestamp(date.getTime());
        } catch (ParseException ex) {
            throw new RuntimeException("Invalid date");
        }
    }

}

控制器類的實現:MyController.java -

package com.yiibai.spring.controller;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import com.yiibai.dao.DAO;
import com.yiibai.spring.bean.Product;

@Controller
public class MyController {

    @GetMapping("/")
    public String index(Model model) throws ParseException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        Product product = new Product("花生油", 129, sdf.parse("2018-02-18"));
        model.addAttribute("product", product);
        return "index";
    }

    @GetMapping("/escape")
    public String escape(Model model) throws ParseException {
        String html = "Welcome to our <b>fantastic</b> grocery store!";
        model.addAttribute("html", html);
        return "escape";
    }

    @GetMapping("/iteration")
    public String iteration(Model model) throws ParseException {
        List productList = DAO.loadAllProducts();
        model.addAttribute("productList", productList);
        return "iteration";
    }

    @GetMapping("/conditional")
    public String conditional(Model model) throws ParseException {
        List productList = DAO.loadAllProducts();
        model.addAttribute("productList", productList);
        return "conditional";
    }

}

模板檔案的實現:/webapp/WEB-INFO/views/conditional.html -

<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" th:href="@{/css/main.css}" />
<style>
span.offer {
    font-weight: bold;
    color: green;
}
</style>
<title>SpringMVC5+Thymeleaf條件範例</title>
</head>
<body>
    <h2>Spring MVC5 + Thymeleaf條件範例</h2>
    <table>
        <thead>
            <tr>
                <th>行序號</th>
                <th>產品名稱</th>
                <th>價格</th>
                <th>有效日期</th>
                <th>備註</th>
            </tr>
        </thead>
        <tbody th:remove="all-but-first">
            <tr th:each="product : ${productList}">
            <td th:text="${productStat.count}">1</td>
                <td th:text="${product.description}">Red chair</td>
                <td th:text="${'¥' + #numbers.formatDecimal(product.price, 1, 2)}">¥350</td>
                <td th:text="${#dates.format(product.availableFrom, 'dd-MM-yyyy')}">2018-02-20</td>
                <td><span th:if="${product.price gt 100}" class="offer">特殊提供</span></td>
            </tr>
            <tr>
                <td>White table</td>
                <td>¥200</td>
                <td>2018-04-10</td>
                <td> </td>
            </tr>
            <tr>
                <td>Reb table</td>
                <td>¥200</td>
                <td>2018-02-20</td>
                <td> </td>
            </tr>
            <tr>
                <td>Blue table</td>
                <td>¥200</td>
                <td>2018-02-20</td>
                <td> </td>
            </tr>
        </tbody>
    </table>

</body>
</html>

執行上面專案,在瀏覽器中顯示效果如下 -

高階應用

在這部分中,我們將演示其它幾個標籤(如:th:switchth:caseth:unless)的用法。

需要重寫以下幾個檔案,DAO.java -


package com.yiibai.dao;

import java.math.BigDecimal;
import java.sql.Timestamp;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import com.yiibai.spring.bean.*;

/**
 * Mock persistence.
 */
public class DAO {

    private static final String NO_WEBSITE = null;

    public static Product loadProduct() {
        try {
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
            return new Product("Wooden wardrobe with glass doors", Integer.valueOf(850), sdf.parse("2013-02-18"), "");
        } catch (ParseException ex) {
            throw new RuntimeException("Invalid date");
        }
    }

    public static List<Product> loadAllProducts() {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        List<Product> products = new ArrayList<Product>();
        try {
            products.add(new Product("花生油", Integer.valueOf(125), sdf.parse("2018-02-18"),"CG"));
            products.add(new Product("蘇打餅乾", Integer.valueOf(15), sdf.parse("208-02-15"),"CG"));
            products.add(new Product("拿鐵", Integer.valueOf(45), sdf.parse("2019-02-20"),"PT"));
            products.add(new Product("調和油", Integer.valueOf(20), sdf.parse("2019-02-21"),"CX"));
            products.add(new Product("大豆油", Integer.valueOf(49), sdf.parse("2019-02-15"),""));
            products.add(new Product("玉米汁", Integer.valueOf(80), sdf.parse("2019-02-17"),""));
        } catch (ParseException ex) {
            throw new RuntimeException("Invalid date");
        }
        return products;
    }



    public static Timestamp loadReleaseDate() {
        try {
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm");
            Date date = sdf.parse("2014-01-31 15:00");
            return new Timestamp(date.getTime());
        } catch (ParseException ex) {
            throw new RuntimeException("Invalid date");
        }
    }

}

產品類的實現:Product.java -

package com.yiibai.spring.bean;

import java.util.Date;

public class Product {

    private String description;
    private Integer price;
    private Date availableFrom;
    private String saleType;// 銷售型別:促銷,拼團,閃購,其它

    public String getSaleType() {
        return saleType;
    }

    public void setSaleType(String saleType) {
        this.saleType = saleType;
    }

    public Product(final String description, final Integer price, final Date availableFrom, final String saleType) {
        this.description = description;
        this.price = price;
        this.availableFrom = availableFrom;
        this.saleType = saleType;
    }

    public Date getAvailableFrom() {
        return this.availableFrom;
    }

    public void setAvailableFrom(final Date availableFrom) {
        this.availableFrom = availableFrom;
    }

    public String getDescription() {
        return this.description;
    }

    public void setDescription(final String description) {
        this.description = description;
    }

    public Integer getPrice() {
        return this.price;
    }

    public void setPrice(final Integer price) {
        this.price = price;
    }

}

控制器類的實現:MyController.java -

package com.yiibai.spring.controller;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import com.yiibai.dao.DAO;
import com.yiibai.spring.bean.Product;

@Controller
public class MyController {

    @GetMapping("/")
    public String index(Model model) throws ParseException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
        Product product = new Product("花生油", 129, sdf.parse("2018-02-18"), "");
        model.addAttribute("product", product);
        return "index";
    }

    @GetMapping("/escape")
    public String escape(Model model) throws ParseException {
        String html = "Welcome to our <b>fantastic</b> grocery store!";
        model.addAttribute("html", html);
        return "escape";
    }

    @GetMapping("/iteration")
    public String iteration(Model model) throws ParseException {
        List productList = DAO.loadAllProducts();
        model.addAttribute("productList", productList);
        return "iteration";
    }

    @GetMapping("/conditional")
    public String conditional(Model model) throws ParseException {
        List productList = DAO.loadAllProducts();
        model.addAttribute("productList", productList);
        return "conditional";
    }

}

模板檔案的實現:/webapp/WEB-INFO/views/conditional.html -

<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" th:href="@{/css/main.css}" />
<style>
span.offer {
    font-weight: bold;
    color: green;
}
</style>
<title>SpringMVC5+Thymeleaf條件範例</title>
</head>
<body>
    <h2>Spring MVC5 + Thymeleaf條件範例</h2>
    <table>
        <thead>
            <tr>
                <th>行序號</th>
                <th>產品名稱</th>
                <th>價格</th>
                <th>有效日期</th>
                <th>銷售型別</th>
                <th>備註</th>
            </tr>
        </thead>
        <tbody th:remove="all-but-first">
            <tr th:each="product : ${productList}">
            <td th:text="${productStat.count}">1</td>
                <td th:text="${product.description}">Red chair</td>
                <td th:text="${'¥' + #numbers.formatDecimal(product.price, 1, 2)}">¥350</td>
                <td th:text="${#dates.format(product.availableFrom, 'dd-MM-yyyy')}">2018-02-20</td>
                <td th:switch="${product.saleType}">
                    <span th:case="'CG'">閃購</span>
                    <span th:case="'PT'">拼團</span>
                    <span th:case="'CX'">促銷</span>
                        <span th:case="*">其它</span>
                    </td>
                <td><span th:class="${product.price gt 100}?'offer'" th:text="${product.price}">特殊提供</span></td>
            </tr>
            <tr>
                <td>White table</td>
                <td>¥200</td>
                <td>2018-04-10</td>
                <td> </td>
            </tr>
            <tr>
                <td>Reb table</td>
                <td>¥200</td>
                <td>2018-02-20</td>
                <td> </td>
            </tr>
            <tr>
                <td>Blue table</td>
                <td>¥200</td>
                <td>2018-02-20</td>
                <td> </td>
            </tr>
        </tbody>
    </table>

</body>
</html>

執行上面範例程式碼,得到以下結果 -