Thymeleaf 练习题参考答案

说明：每个题目包含Controller代码片段 + html页面代码

题目1 参考答案

Controller

@GetMapping("/t1")
public String t1(Model model){
    model.addAttribute("username","李四");
    model.addAttribute("desc","欢迎学习Thymeleaf");
    return "t1";
}

templates/t1.html

<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<body>
    <p th:text="${username}"></p>
    <p>[[${desc}]]</p>
</body>
</html>

题目2 参考答案

Controller

@GetMapping("/t2")
public String t2(Model model){
    model.addAttribute("realName","王五");
    return "t2";
}

templates/t2.html

<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<body>
    <input type="text" th:value="${realName}">
</body>
</html>

题目3 参考答案

Controller

@GetMapping("/t3")
public String t3(){
    return "t3";
}

templates/t3.html

<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<body>
    <a th:href="@{/goods/view(goodsId=100)}">商品查看</a>
</body>
</html>

题目4 参考答案

Controller

@GetMapping("/t4")
public String t4(Model model){
    model.addAttribute("score",75);
    return "t4";
}

templates/t4.html

<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<body>
    <p th:if="${score >= 60}">成绩合格</p>
    <p th:unless="${score >= 60}">成绩不合格</p>
</body>
</html>

题目5 参考答案

Controller

@GetMapping("/t5")
public String t5(Model model){
    model.addAttribute("rank",3);
    return "t5";
}

templates/t5.html

<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<body>
    <div th:switch="${rank}">
        <p th:case="1">金牌会员</p>
        <p th:case="2">银牌会员</p>
        <p th:case="3">铜牌会员</p>
        <p th:case="*">普通游客</p>
    </div>
</body>
</html>

题目6 参考答案

Controller

@GetMapping("/t6")
public String t6(Model model){
    List<String> foodList = Arrays.asList("米饭","面条","饺子");
    model.addAttribute("foodList",foodList);
    return "t6";
}

templates/t6.html

<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<body>
    <ul>
        <li th:each="food,stat : ${foodList}">
            序号[[${stat.count}]]：[[${food}]]
        </li>
    </ul>
</body>
</html>

题目7 参考答案

Controller

@GetMapping("/t7")
public String t7(Model model){
    model.addAttribute("isVip",true);
    return "t7";
}

templates/t7.html

<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<head>
    <style>
        .vip-style{color:gold;}
        .normal-style{color:gray;}
    </style>
</head>
<body>
    <div th:class="${isVip} ? 'vip-style' : 'normal-style'">会员信息</div>
</body>
</html>

题目8 参考答案

Controller

@GetMapping("/t8")
public String t8(Model model){
    model.addAttribute("content","<span style='color:red'>红色文字</span>");
    return "t8";
}

templates/t8.html

<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<body>
    <div th:utext="${content}"></div>
</body>
</html>

题目9 参考答案

Controller

@GetMapping("/t9")
public String t9(Model model){
    String name = "Thymeleaf";
    List<String> foodList = Arrays.asList("米饭","面条","饺子");
    model.addAttribute("name",name);
    model.addAttribute("foodList",foodList);
    return "t9";
}

templates/t9.html

<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<body>
    <p>字符串长度：<span th:text="${#strings.length(name)}"></span></p>
    <p>集合总个数：<span th:text="${#lists.size(foodList)}"></span></p>
</body>
</html>

题目10 参考答案

User实体类

public class User {
    private String name;
    private Integer age;
    //构造器、getter setter
    public User(String name,Integer age){
        this.name=name;
        this.age=age;
    }
    //get set
}

Controller

@GetMapping("/t10")
public String t10(Model model){
    List<User> userList = new ArrayList<>();
    userList.add(new User("小明",20));
    userList.add(new User("小红",16));
    model.addAttribute("userList",userList);
    model.addAttribute("tip","用户列表");
    return "t10";
}

templates/t10.html

<html xmlns:th="[http://www.thymeleaf.org](http://www.thymeleaf.org)">
<head>
    <style>
        .adult{color:blue}
        .child{color:orange}
    </style>
</head>
<body>
    <h3 th:text="${tip}"></h3>
    <div th:each="user,stat : ${userList}">
        <p th:class="${user.age>=18} ? 'adult' : 'child'">
            序号[[${stat.count}]]，姓名：[[${user.name}]]，年龄：[[${user.age}]]
        </p>
        <p th:if="${user.age<18}">未成年用户</p>
    </div>
</body>
</html>