SpringBoot学习笔记(三)-Thymeleaf

最新推荐文章于 2024-10-31 12:02:50 发布

哩吇

最新推荐文章于 2024-10-31 12:02:50 发布

阅读量387

点赞数 6

分类专栏：实训 SpringBoot 文章标签： spring boot 学习笔记

本文链接：https://blog.csdn.net/m0_59723935/article/details/135459540

版权

实训同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

SpringBoot

4 篇文章 0 订阅

订阅专栏

本文介绍了如何在Java的SpringMVC框架中使用Thymeleaf进行页面渲染，包括创建Person类对象，数据绑定到控制器方法，并在前端展示列表和表单内容。

摘要由CSDN通过智能技术生成

bean下的Person类

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Person {
    private Long id;
    private String userName;
    private String email;
    private Integer age;
    private String role;

}

controller层

ThymeleafController

@Controller
public class ThymeleafController {
    @GetMapping("/hello")
    public String hello(@RequestParam("name") String name, Model model){
        model.addAttribute("msg","我是一条新消息");
        model.addAttribute("name",name);
        String text = "<span style='color:red'>"+name+"</span>";
        model.addAttribute("text",text);
        Person person = new Person(1L,"小莉","xiaoli@163.com",22,"CEO");
        model.addAttribute("person",person);

        return "hello";
    }
@GetMapping("/list")
public List<Person> personList(Model model){
    List<Person> list = new ArrayList<>();
    list.add(new Person(1L,"老王","rangyerzs@163.com",24,"HR"));
    list.add(new Person(2L,"老李","overwatch@outlook.com",25,"CEO"));
    list.add(new Person(3L,"小四","Jss@qq.com",26,"CFO"));
    list.add(new Person(4L,"小五" ,"Alexs@edu.com",27,"STAFF"));
    model.addAttribute("persons",list);
    return list;
}
}

前端资源放置

hello.html

<form action="hello" method="post" xmlns:th="http://www.thymeleaf.org">
    <h1>首页</h1>
    <div>
        <input type="text" class="form-control" name="name" placeholder="请输入用户名" required=""
               value="admin"/>
    </div>
    <div>
        <input type="password" class="form-control" name="userPassword" placeholder="请输入密码" required=""
               value="123456"/>
    </div>
    <span th:text="${login}"></span>
    <div>
        <button type="submit" class="btn btn-success">登 录</button>
        <button type="reset" class="btn btn-default">重　填</button>
    </div>
    <h5>图片显示</h5>
    <div>
        <img src="../static/cat.png" />
    </div>
    <span th:text="${msg}">存放消息的位置</span>
    <h2 th:text="${name}">名字</h2>
    <span th:utext= "${text}" >存放文本的位置</span>
    <ul th:object="${person}">
        <li th:text="*{id}"></li>
        <li th:text="*{userName}"></li>
        <li th:text="*{age}"></li>
        <li th:text="*{email}"></li>
        <li th:text="*{role}"></li>
        <li th:if="*{role == 'CEO'}">总裁</li>
    </ul>
    <div class="separator">
        <div>
            <p>©2016 All Rights Reserved. </p>
        </div>
    </div>
</form>

访问hello页面

list.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
          rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<table class="table">
    <thead>
    <tr>
        <th scope="col">ID</th>
        <th scope="col">姓名</th>
        <th scope="col">年龄</th>
        <th scope="col">邮箱</th>
        <th scope="col">职务</th>
        <th scope="col">是否成年</th>
        <th scope="col">备注</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each ="per, stats : ${personList}">
        <td th:test ="${stats.count}"></td>
        <td th:text="*{per.id}"></td>
        <td th:text="*{per.userName}"></td>
        <td th:text="*{per.age}"></td>
        <td th:text="*{per.email}"></td>
        <td>
            <span th:if="*{per.role == 'CEO'}">总裁</span>
            <span th:if="*{per.role == 'CFO'}">技术总监</span>
            <span th:if="*{per.role == 'HR'}">人力资源</span>
            <span th:if="*{per.role == 'STAFF'}">员工</span>

        </td>
        <td ><span th:if="*{per.age >= 18}">已成年</span>
            <span th:if="*{per.age < 18}">未成年</span>
        </td>
        <td>
            index: [[${stats.index}]] <br/>
            count: [[${stats.count}]] <br/>
            size(总数量) : [[${stats.size}]]<br/>
            current(当前对象): [[${stats.current}]] <br/>
            even(true)/odd(false): [[${stats.even}]] <br/>
            first: [[${stats.first}]] <br/>
            last: [[${stats.last}]] <br/>
        </td>
    </tr>
    </tr>
    </tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
</body>
</html>

自己建的application.yaml

yaml优先级高于properties

server:
  port: 9090
spring:
  mvc:
    webjars-path-pattern: /***
    static-path-pattern: /static/**

访问list页面

哩吇

关注

6
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录