2021-5-19:Thymeleaf模板引擎

最新推荐文章于 2023-03-05 22:12:34 发布
最新推荐文章于 2023-03-05 22:12:34 发布
阅读量292 收藏
点赞数
分类专栏： Spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lydialhf/article/details/117029475
版权
本文介绍如何在SpringBoot项目中集成Thymeleaf模板引擎与Bootstrap前端框架，实现用户登录功能并进行非空校验。通过具体步骤说明了配置Thymeleaf属性、创建控制器及模板文件的方法。
摘要由CSDN通过智能技术生成

Thymeleaf模板引擎

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

在全局配置文件里配置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

在net.lhf.lesson09包里创建controller子包
在controller子包里创建LoginController控制器
用于前端模板页面动态数据替换效果的测试
在这里插入图片描述

package net.lhf.lesson09.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Calendar;

/**
 * 功能：登录控制器
 * 作者：李红芙
 * 日期：2021年05月19日
 */
@Controller
public class LoginController {
    /**
     * 通过请求“toLoginPage”跳转到templates目录下的
     * login页面，并把当前年份数据保存到模型对象中
     */
    @GetMapping("toLoginPage")
    public String toLoginPage(Model model){
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        return "login"; // 返回逻辑页面视图名称
    }
}

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

在templates目录下创建模板文件login.html
在这里插入图片描述

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

在这里插入图片描述
访问http://localhost:8080/toLoginPage
在这里插入图片描述
在这里插入图片描述

Spring Boot集成Bootstrap

Bootstrap4教程：https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
在这里插入图片描述

集成Bootstrap

1、引用在线文档的方式
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>
分区占窗口一半宽度（水平方向按12个单位平分）、水平居中、顶边距30个像素
设置边框（边框色、背景、内边距、圆角）
设置上外边距为1个单位

用户登录

设置文本居中显示

启动项目，访问http://localhost:8080/toLoginPage

在这里插入图片描述
实现他的非空校验
在这里插入图片描述
在这里插入图片描述
控制器编写登录验证方法
在这里插入图片描述

package net.lhf.lesson09.controller;

import net.lhf.lesson09.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;

/**
 * 功能：登录控制器
 * 作者：李红芙
 * 日期：2021年05月19日
 */
@Controller
public class LoginController {
    /**
     * 通过请求“toLoginPage”跳转到templates目录下的
     * login页面，并把当前年份数据保存到模型对象中
     */
    @GetMapping("toLoginPage")
    public String toLoginPage(Model model){
        model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));
        return "login"; // 返回逻辑页面视图名
    }
    @PostMapping("login")
    public String login(HttpServletRequest request, Model model) {
        // 获取表单提交的用户名与密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        // 判断用户是否登录成功（假设合法用户名为howard，密码为903213）
        if (username.equals("howard") && password.equals("903213")) {
            model.addAttribute("loginMsg", "恭喜，用户登录成功~");
            return "success";
        } else {
            model.addAttribute("loginMsg", "遗憾，用户登录失败~");
            return "failure";
        }
    }

}

编写登录成功与失败的模板页面

1、编写登录成功页面success.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-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>

启动项目，测试效果
启动项目后，在浏览器里访问http://localhost:8080/toLoginPage
输入正确的用户名和密码（howard : 903213）
在这里插入图片描述

小芙子☞
关注
专栏目录
Spring Boot入门(19)：Spring Boot 整合 Thymeleaf 模板引擎，开发Web页面 | 超级详细，建议收藏
**My Coding Family**
08-27 2881
Spring Boot 如何整合 Thymeleaf 模板引擎开发Web页面？一文教会你。
【Spring Boot】Thymeleaf模板引擎 — 表达式的语法
最新发布
衍生星球的博客
08-04 761
模板的主要作用是将后台返回的数据渲染到HTML中。那么Thymeleaf是如何解析后台数据的呢？接下来从变量、方法、条件判断、循环、运算（逻辑运算、布尔运算、比较运算、条件运算）方面学习Thymeleaf表达式支持的语法。
第三章（续）Thymeleaf语法（一）
shmily0300377的专栏
03-05 691
Thymeleaf中提供了一套标准方言，这种方言提供了各种处理器，这些处理器可以应用特定的逻辑到某个组件（标签、文本、注释等）对象。并且，对于大多数用户来说，这套标准方言足以满足各种逻辑表达的需求。官方提供的Thymeleaf-spring方言，可以刚好地利用spring framework中的一些特性。例如，使用Spring Expression Language 或者Spring EL 代替OGNL。
Spring boot的Thymeleaf默认规则
天高任鸟飞
09-03 529
默认规则 查看自动配置 Thymeleaf ThymeleafProperties 配置说明 DEFAULT_ENCODING，编码规则 DEFAULT_CONTENT_TYPE，文档类型 DEFAULT_PREFIX，文档前缀 DEFAULT_SUFFIX，文档后缀...
thymeleaf的坑（持续更新。。。）
weixin_34290390的博客
01-01 212
环境声明：springBoot : 1.5.9thymeleaf：springBoot默认集成2.16版本（这就是个坑了。。） 1、在thymeleaf模板中动态添加背景图片语法：th:style 例子： <body th:style="'background:url(' + @{/image/36.jpg} + ');'">...
Thymeleaf 常用属性
Amant
02-01 987
https://www.cnblogs.com/hjwublog/p/5051732.html#autoid-12-0-0
div内部元素居中
weixin_30642561的博客
01-14 618
要让div内部元素垂直居中，则给div加上此css样式： .div-vertical-middle{ height:200px; width:304px; line-height:50px; vertical-align:middle; display:table-cell; } 要让div内部元素水平居中，则给div加上此css样式： .div-horizo...
Covid-19-statistics：Java Web应用程序，用于显示世界各地最新的Corona病毒病例数。 使用Spring Boot，Bootstrap和Thymeleaf
02-10
这个应用使用了Spring Boot框架，Bootstrap前端框架以及Thymeleaf模板引擎，来构建一个高效且用户友好的界面，帮助用户获取最新、最准确的疫情数据。 1. **Spring Boot**： Spring Boot是Spring框架的一个扩展，...
番外一：Thymeleaf 与 ES6 语法
paynmind的博客
09-05 754
此博客用于个人学习，来源于网上，对知识点进行一个整理。 1. Thymeleaf ： SpringBoot 并不推荐使用 jsp，但是支持一些模板引擎技术： Freemarker Thymeleaf Mustache 本项目用到的是 Thymeleaf 技术。 1.1 Thymeleaf 的优势： Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP，其本身的特点有： 动静结合：Thymeleaf 在有网络和无网络的环境下皆可运行，即它可以让美
Spring Boot基础学习09 - Thymeleaf模板引擎
lbj5063的博客
05-24 142
文章目录一、Spring Boot整合Thymeleaf（一）创建Spring Boot项目ThymeleafDemo（二）在全局配置文件里配置Thymeleaf属性（三）创建登录控制器LoginController（四）创建模板文件，获取控制器传来的动态数据（五）启动项目，访问http://localhost:8080/toLoginPage课堂作业二、Spring Boot集成Bootstrap（一）集成Bootstrap1.引用在线文档的方式2.下载Bootstrap并引用的方式（二）编写登录页面lo
div内容居中和布局居中样式总结
成长之路
12-21 648
1.div的内容居中 （1）水平居中 <div align="center"><button>按钮></button></div> CSS： div{ display: block; // div默认为块级元素，如果是第三方控件或继承父类元素不是block，则需要指定（必要时提高优先级） text-align: center; } （2）垂直居中 设置line-height等于height即可（当line-height为
如何配置Thymeleaf教程，及Thymeleaf的简单使用教程【一篇足够入门】
lmd770013209的博客
11-10 4368
Springboot下Thymeleaf的配置与使用，超详细，一篇就解决.
Thymeleaf配置及入门
qq_47320647的博客
03-19 5674
Thymeleaf配置及入门
springboot 前缀_springboot搭配thymeleaf访问html页面的时候，什么时候需要自定义前缀和后缀呢...
weixin_39818550的博客
12-22 1052
为什么我全部使用默认配置会报错，必须自己定义前缀和后缀解析器配置如下：@ConfigurationpublicclassWebMvcConfigextendsWebMvcConfigurerAdapterimplementsApplicationContextAware{//实现的这个接口能帮助我们设置spring的上下文privateApplicationContextappl...
thymeleaf 专题
weixin_34269583的博客
06-19 1277
  Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 JSP，Velocity，FreeMaker 等，它也可以轻易的与 Spring MVC 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比，Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面，而不需要启动整个 Web 应用。 Thymeleaf 初探 相...
Springboot之Thymeleaf 表单标签（表单提交）|第二章-yellowcong
热门推荐
04-06 5万+
通过post方式提交表单的时候，需要有一个实体类，去接收表单传递的数据类容，在对象的属性读取中，Thymeleaf 提供了两种方式：1、直接通过${userInfo.username} ，这种实体bean + 属性的方式;2、通过选择表达式*{username}的这种方式。 在表单提交的表单中，表单对象需要在界面跳转进来的时候，传递一个表单对象过来，不然就会报错，不知道这个表单对象是什么鬼。 代码
CSDN博客中的图像居中与缩放
Kanny
07-27 3989
在CSDN上发博客的时候，通常会有很多图片需要插入，但是插入的图片用默认的格式无法控制大小，也不好居中，所以这里需要使用一些CSS样式来实现这些操作。 下面我们都以这只可爱的小鸟为例，来实现相关的操作。 这里直接在写博客时，点击插入图片的小图标，用到的Markdown代码为： ![这里写图片描述](https://img-blog.csdn.net/20180727154819408?w...
Thymeleaf 3.0教程：优雅Java模板引擎详解
Thymeleaf 3.0中文翻译文档是一份详细的教程，介绍了如何使用Thymeleaf这个功能强大的Java模板引擎。该教程发布于2016年11月19日，适用于Thymeleaf 3.0.2.RELEASE版本。Thymeleaf的主要目标是通过自然模板注入的方式...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值