SpringBoot Thymeleaf模板使用

最新推荐文章于 2022-04-16 17:03:02 发布

隨恩suien

最新推荐文章于 2022-04-16 17:03:02 发布

阅读量112

点赞数 1

分类专栏： Java Spring

CREATION BY 观山奇

本文链接：https://blog.csdn.net/weixin_45936162/article/details/117286975

版权

Java 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

Spring

6 篇文章 0 订阅

订阅专栏

Thymeleaf模板使用:

使用Springj集成Thymeleaf
Spring Boot集成Bootstrap

使用Springj集成Thymeleaf

创建项目：

在这里插入图片描述

配置全局文件

#缓存配置，默认即是true，开发阶段设置为false
spring.thymeleaf.cache = false
#设置模板使用的编码为utf-8
spring.thymeleaf.encoding = UTF-8
#指定为模板使用的模式为html5，默认html
spring.thymeleaf.mode = HTML5
#指定前缀，默认位置为/templates/，可以修改成其它位置
spring.thymeleaf.prefix = classpath:/templates/
#指定模板文件后缀，默认值为.html，可以修改成其它值
spring.thymeleaf.suffix = .html

创建登录控制器——LoginController

package net.ty.leeson09.controller;

import net.ty.leeson09.bean.Person;
import net.ty.leeson09.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import javax.servlet.http.HttpServletRequest;
import java.util.Calendar;
import java.util.Date;

/**
 * @date 2021年05月26日 10:30
 */
@Controller
public class LoginController {
    @GetMapping("/toLoginPage")
    public String toLoginPage() {
        return "login";
    }
}

访问模型中的数据

新建用户类

package net.ty.leeson09.bean;

/**
 * 功能：个人实体类
 * 日期：2021年05月26日
 */
public class Person {
    private int id;
    private String name;
    private String gender;
    private int age;
    private String telephone;

    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 String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getTelephone() {
        return telephone;
    }

    public void setTelephone(String telephone) {
        this.telephone = telephone;
    }

    @Override
    public String toString() {
        return "Person{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", gender='" + gender + '\'' +
                ", age=" + age +
                ", telephone='" + telephone + '\'' +
                '}';
    }
}

添加控制器

在这里插入图片描述

运行

在这里插入图片描述

Spring Boot集成Bootstrap

下载和引用

下载Bootstrap：

链接：https://pan.baidu.com/s/1vEmjeGTdM9jERbXPU4bmAw 提取码：qgo9

在这里插入图片描述

编写登录页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 m-auto" style="margin-top:30px!important;">
    <div class="text-center">
        <span th:text="${currentYear}">今年</span> -
        <span th:text="${currentYear} + 1">明年</span>
    </div>
    <div class="border border-info bg-light p-2" style="border-radius: 5px">
        <form action="/login" method="post">
            <h3 class="text-center">用户登录</h3>
            <div class="mt-1">
                <input type="text" id="username" name="username" class="form-control" placeholder="输入用户名" autofocus>
            </div>
            <div class="mt-1">
                <input type="password" id="password" name="password" class="form-control"placeholder="输入密码">
            </div>
            <div class="checkbox text-center">
                <label>
                    <input class="form-check-input text-center" type="checkbox">记住我
                </label>
            </div>
            <div>
                <button class="btn btn-lg btn-primary btn-block" id="login" type="submit">登录</button>
            </div>
        </form>
    </div>
</div>
<!--    <p>ID：<span th:text="${user.getId()}"></span></p>-->
<!--    <p>姓名：<span th:text="${user.getUsername()}"></span></p>-->
<!--    <p>密码： <span th:text="${user.getPassword()}"></span></p>-->
<!--    <p>注册时间： <span th:text="${user.getRegisterTime()}"></span></p>-->
<!--    <p>权限： <span th:text="${user.getPopedom()}"></span></p>-->
</body>
</html>

在这里插入图片描述

非空校验

在这里插入图片描述

编辑登录成功|失败页面

success.html

<!DOCTYPE html>
<html lang="en" xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 text-center m-auto border-info border p-3 bg-light" style="margin-top:50px!important;">
    <p th:text="${loginMsg}" class="text-success"></p>
</div>
</body>
</html>

failure.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>登录失败</title>
    <link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
    <javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
    <javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 text-center m-auto border-warning border p-3 bg-light" style="margin-top:50px!important;">
    <p th:text="${loginMsg}" class="text-danger"></p>
</div>
</body>
</html>

在这里插入图片描述

运行

在这里插入图片描述

隨恩suien

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
SpringBoot Thymeleaf模板使用

Thymeleaf模板使用:使用Springj集成Thymeleaf创建项目：配置全局文件创建登录控制器——LoginControllerSpring Boot集成Bootstrap使用Springj集成Thymeleaf创建项目：配置全局文件#缓存配置，默认即是true，开发阶段设置为falsespring.thymeleaf.cache = false#设置模板使用的编码为utf-8spring.thymeleaf.encoding = UTF-8#指定为模板使用的模式为html5，默
复制链接

扫一扫