SpringBoot 2.x 学习笔记（3）:Web开发之Thymeleaf

最新推荐文章于 2022-09-21 21:08:44 发布

程裕强

最新推荐文章于 2022-09-21 21:08:44 发布

阅读量589

点赞数

分类专栏： Java EE SpringBoot 2.x学习笔记文章标签： springboot thymeleaf

本文链接：https://blog.csdn.net/chengyuqiang/article/details/81322227

版权

Java EE 同时被 2 个专栏收录

28 篇文章 1 订阅

订阅专栏

SpringBoot 2.x学习笔记

21 篇文章 1 订阅

订阅专栏

1、代码结构

这里写图片描述
###2、Bean类

package cn.hadron.springboot.bean;

import java.io.Serializable;

public class UserBean implements Serializable{
    private Integer id;
    private String username;
    private String password;
    private String birthday;

    public UserBean(){}
    public UserBean(String username, String password, String birthday) {
        this.username = username;
        this.password = password;
        this.birthday = birthday;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getBirthday() {
        return birthday;
    }

    public void setBirthday(String birthday) {
        this.birthday = birthday;
    }
}

3、Controller

package cn.hadron.springboot.controller;

import cn.hadron.springboot.bean.UserBean;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.context.request.WebRequest;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.ArrayList;
import java.util.List;

@Controller
public class IndexController {
    @RequestMapping("/")
    public String index(Model model){
        System.out.println("LoginController.index");
        //根据Thymeleaf默认模版，映射到resources/templates/index.html
        return "index";
    }

    @RequestMapping("/test")
    public String test(HttpServletRequest request, HttpSession  session){
        System.out.println("IndexController.test");
        request.setAttribute("msg","Hello,World!");
        session.setAttribute("tip","Hello,Java!");
        request.getServletContext().setAttribute("name","Hello,SpringBoot 2.x!");
        return "test";
    }
    @RequestMapping("/testIf")
    public String testIf(WebRequest web){
        System.out.println("IndexController.testIf");
        web.setAttribute("username","Hadron Cheng",WebRequest.SCOPE_REQUEST);
        web.setAttribute("password","123456",WebRequest.SCOPE_REQUEST);
        return "testIf";
    }

    @RequestMapping("/testEach")
    public String testEach(WebRequest web){
        System.out.println("IndexController.testEach");
        List<UserBean> list=new ArrayList<>();
        list.add(new UserBean("abc","123","1990-09-10"));
        list.add(new UserBean("test","123","1991-09-10"));
        list.add(new UserBean("hadron","123","1992-09-10"));
        web.setAttribute("users",list,WebRequest.SCOPE_REQUEST);
        return "list";
    }
}

4、页面

（1）index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="main">
    <h4>Thymeleaf</h4>
    <a th:href="@{test?username=hadron}">测试数据访问</a><br>
    <a th:href="@{testIf}">if条件判断</a><br>
    <a th:href="@{testEach}">循环测试</a><br>
</div>
</body>
</html>

提示：

thymeleaf提供的相对上下文动态路径
thymeleaf的th:src或者th:href属性改变标签的链接路径

（2）test.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="main">
    param:<span th:text="${param.username}">动态模版</span><br>
    request:<span th:text="${msg}">动态模版</span><br>
    session:<span th:text="${session.tip}">动态模版</span><br>
    application：<span th:text="${application.name}">动态模版</span>
</div>
</body>
</html>

这里写图片描述

（3）testIf.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="main">
    <span th:if="${username!=null}">username字段非空</span><br>
    <span th:if="${password==null}">age字段空</span><br>
    <span th:unless="${role!=null}">与th:if相反</span>
</div>
</body>
</html>

（4）list.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="main">
    <table border="1">
        <tr>
            <th>序号</th>
            <th>账号</th>
            <th>口令</th>
            <th>出生日期</th>
        </tr>
        <tr th:each="user,stat:${users}">
            <td th:text="${stat.index}">状态变量</td>
            <td th:text="${user.username}"></td>
            <td th:text="${user.password}"></td>
            <td th:text="${user.birthday}"></td>
        </tr>
    </table>
</div>
</body>
</html>

这里写图片描述