Spring BootV09：Thymeleaf模板引擎

最新推荐文章于 2024-07-10 22:19:54 发布

triet

最新推荐文章于 2024-07-10 22:19:54 发布

阅读量93

点赞数

文章标签： spring boot

本文链接：https://blog.csdn.net/triet/article/details/117029750

版权

一、Spring Boot整合Thymeleaf
1、创建Spring Boot项目ThymeleafDemo
在这里插入图片描述

2、在全局配置文件里配置Thymeleaf属性

3、创建登录控制器LoginController

4、创建模板文件，获取控制器传来的动态数据

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
<h3 th:text="${currentYear}">当年</h3> 
<h3 th:text="${currentYear} + 1">明年</h3>
</body>
</html>

5、启动项目，访问http://localhost:8080/toLoginPage
在这里插入图片描述
二、Spring Boot集成Bootstrap
（一）集成Bootstrap
1、引用在线文档的方式
下载Bootstrap并引用的方式
Bootstrap压缩包下载链接：https://pan.baidu.com/s/1gWca14KH2OnLjoVzp7BirQ 提取码：li4b
解压缩到bootstrap-4.0.0目录

将bootstrap-4.0.0目录拷贝项目的static目录
在这里插入图片描述

（二）编写登录页面login.html
1、集成Bootstrap

2、编写登录页面

<!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>
</body>
</html>

3、启动项目，访问http://localhost:8080/toLoginPage
在这里插入图片描述
（三）编写登录成功与失败的模板页面
1、编写登录成功页面success.html

2、编写登录失败页面failure.html

（四）启动项目，测试效果
启动项目后，在浏览器里访问http://localhost:8080/toLoginPage

创建Person实体类
在这里插入图片描述

package net.tjl.lesson09.bear;

public class Person {
    private int id;
    private String name;
    private String gender;
    private int age;
    private String telephone;

    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 + '\'' +
                '}';
    }
}

triet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Spring BootV09：Thymeleaf模板引擎

一、Spring Boot整合Thymeleaf1、创建Spring Boot项目ThymeleafDemo2、在全局配置文件里配置Thymeleaf属性3、创建登录控制器LoginController4、创建模板文件，获取控制器传来的动态数据<!DOCTYPE html><html lang="en" xmlns:th="http://www.thymeleaf.org/"><head> <meta charset="UTF-8"
复制链接

扫一扫