使用SpringBoot + Thymeleaf 完成简单的用户登录

😀前言
本篇博文是关于Thymeleaf 的综合案例， 使用SpringBoot + Thymeleaf 完成简单的用户登录-列表功能，希望你能够喜欢😊

🏠个人主页：晨犀主页
🧑个人简介：大家好，我是晨犀，希望我的文章可以帮助到大家，您的满意是我的动力😉😉
💕欢迎大家：这里是CSDN，我总结知识的地方，欢迎来到我的博客，感谢大家的观看🥰
如果文章有什么需要改进的地方还请大佬不吝赐教 先在此感谢啦😊

文章目录

  • Thymeleaf
    • 官方文档
    • Thymeleaf 综合案例
      • 需求说明
        • 分析图
      • 代码实现
      • 完成测试
    • 😄总结

Thymeleaf

官方文档

在线文档: https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
离线文档: usingthymeleaf.pdf

Thymeleaf 综合案例

如果对Thymeleaf感兴趣可以看看小编的Thymeleaf快速入门及其注意事项，希望你能够喜欢😊。

需求说明

说明: 使用SpringBoot + Thymeleaf 完成简单的用户登录-列表功能

image-20230813202058053

image-20230813202114074

分析图

image-20230813202153721

代码实现

  1. 创建项目。

  2. 要使项目支持Thymeleaf, 需要在pom.xml 加入thymeleaf-starter,配置。

image-20230813202405193

  1. 引入starter-Thymeleaf , 项目会自动完成配置, 程序员按照规则开发即可

image-20230813202516536

image-20230813202745817

  1. 创建Login.html和manage.html 和静态图片到指定目录，从准备好的拷贝即可, 注意如果将html 文件放到templates/ 目录下, 该目录不能直接访问

image-20230813203001902

创建Login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body bgcolor="#CED3FE">
<img src="images/1.GIF"/>
<hr/>
<div style="text-align: center">
    <h1>用户登陆</h1>
    <form action="#"  method="post">
        <label style="color: red" th:text="${msg}"></label><br/>
        用户名:<input type="text" style="width:150px" name="name"/><br/><br/>
        密　码:<input type="password" style="width:150px" name="password"/><br/><br/>
        <input type="submit" value="登录"/>
        <input type="reset" value="重新填写"/>
    </form>
</div>
<hr/>
<img src="images/logo.png"/>
</body>
</html>

创建manage.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
</head>
<body bgcolor="#CED3FE">
<img src="images/1.GIF"/>
<a href='#'>返回管理界面</a>　　<a href='#'>安全退出</a> 　　欢迎您:xxx
<hr/>
<div style="text-align: center">
    <h1>管理雇员~</h1>
    <table border="1px" cellspacing="0" bordercolor="green" style="width:800px;margin: auto">
        <tr bgcolor="pink">
            <td>id</td>
            <td>name</td>
            <td>pwd</td>
            <td>email</td>
            <td>age</td>
        </tr>
        <tr bgcolor="#ffc0cb" >
            <td>a</td>
            <td>b</td>
            <td>c</td>
            <td>d</td>
            <td>e</td>
        </tr>
    </table>
    <br/>
</div>
<hr/>
<img src="images/logo.png"/>
</body>
</html>
  1. 创建com/nlc/usersys/bean/Admin.java
@Data
public class Admin {
    private String name;
    private String password;
}
  1. 创建com/nlc/usersys/bean/User.java
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private Integer id;
    private String name;
    private String password;
    private Integer age;
    private String email;
}
  1. 创建com/nlc/usersys/controller/IndexController.java 默认进入登录页面
@Controller
public class IndexController {

    //编写方法，转发到登录页面
    @GetMapping(value = {"/", "/login"})
    public String login() {
        /**
         * 解读
         * 1. 因为我们引入了starter-thymeleaf
         * 2. 这里就会直接使用视图解析到 thymeleaf下的模板文件adminLogin.html
         */
        return "adminLogin";
    }
}
  1. 创建com/nlc/usersys/controller/AdminController.java 处理登录请求完成测试
@Controller
public class AdminController {

    //响应用户的登录请求
    @PostMapping("/login")
    public String login(Admin admin, HttpSession session, Model model) {

        //验证用户是否合法
        if (StringUtils.hasText(admin.getName()) && "666".equals(admin.getPassword())) {

            //将登录用户保存到session
            session.setAttribute("loginAdmin", admin);

            //合法, 重定向到manage.html
            //不使用请求转发？为了防止刷新页面会重复提交
            //这里为什么是写的 manage.html, 因为这样可以更加明确的表示到哪个页面
            //manage.html表示要去找 方法的映射路径为 manage.html
            return "redirect:/manage.html";
        } else {
            //不合法，就重新登录, 请求转发
            model.addAttribute("msg", "账号/用户错误");
            return "adminLogin";
        }
    }


    //处理用户的请求到 manage.html
    @GetMapping("/manage.html")
    public String mainPage(Model model, HttpSession session) {
		//是否登录。拦截器，过滤器
		Object loginAdmin = session.getAttribute("loginAdmin");
        
        if(loginAdmin != null){
        	return "manage";
        }else {
            //回到登录页面
            model.addAttribute("msg","请重新登录");
            return "login";
        }
    }
}

浏览器输入: http://localhost:8080/login

image-20230813205451060

image-20230813205550534

  1. 修改AdminController.java 模拟返回用户列表
//处理用户的请求到 manage.html
@GetMapping("/manage.html")
public String mainPage(Model model, HttpSession session) {
	Object loginAdmin = session.getAttribute("loginAdmin");
        if(null != loginAdmin) {//说明成功登录过
            //可以这里集合-模拟用户数据, 放入到request域中，并显示
            ArrayList<User> users = new ArrayList<>();
            users.add(new User(1, "关羽~", "666666", 20, "gy@sohu.com"));
            users.add(new User(2, "张飞", "666666", 30, "zf@sohu.com"));
            users.add(new User(3, "赵云", "666666", 22, "zy@sohu.com"));
            users.add(new User(4, "马超", "666666", 28, "mc@sohu.com"));
            users.add(new User(5, "黄忠", "666666", 50, "hz@sohu.com"));

            //将数据放入到request域
            model.addAttribute("users", users);

            return "manage"; //这里才是我们的视图解析到 /templates/manage.html
        } else {
            //这里就返回登录页，并给出提示
            model.addAttribute("msg","你没有登录/请登录");
            return "Login";
        }
}
  1. 修改manage.html , 显示用户列表
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
</head>
<body bgcolor="#CED3FE">
<img src="images/1.GIF"/>
<a href='#'>返回管理界面</a>　　<a href='#' th:href="@{/}">安全退出</a> 　　欢迎您:[[${session.loginAdmin.name}]]
<hr/>
<div style="text-align: center">
    <h1>管理雇员~</h1>
    <table border="1px" cellspacing="0" bordercolor="green" style="width:800px;margin: auto">
        <tr bgcolor="pink">
            <td>id</td>
            <td>name</td>
            <td>pwd</td>
            <td>email</td>
            <td>age</td>
        </tr>
        <tr bgcolor="#ffc0cb" th:each="user:${users}">
            <td th:text="${user.id}">a</td>
            <td th:text="${user.name}">b</td>
            <td th:text="${user.password}">c</td>
            <td th:text="${user.email}">d</td>
            <td th:text="${user.age}">e</td>
        </tr>
    </table>
    <br/>
</div>
<hr/>
<img src="images/logo.png"/>
</body>
</html>
  1. 修改login.html , 显示登录错误信息和提交action
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body bgcolor="#CED3FE">
<img src="images/1.GIF"/>
<hr/>
<div style="text-align: center">
    <h1>用户登陆</h1>
    <form action="#" th:action="@{/login}"  method="post">
        <label style="color: red" th:text="${msg}"></label><br/>
        用户名:<input type="text" style="width:150px" name="name"/><br/><br/>
        密　码:<input type="password" style="width:150px" name="password"/><br/><br/>
        <input type="submit" value="登录"/>
        <input type="reset" value="重新填写"/>
    </form>
</div>
<hr/>
<img src="images/logo.png"/>
</body>
</html>

完成测试

Thymeleaf 显示数据页面效果，浏览器: http://localhost:8080/login.html

image-20230813210208702
image-20230813210226052

😄总结

1、若要使用Thymeleaf 语法，首先要声明名称空间： xmlns:th=“http://www.thymeleaf.org”

2、设置文本内容th:text，设置input 的值th:value，循环输出th:each，条件判断th:if，插入代码块th:insert，定义代码块th:fragment，声明变量th:object

3、th:each 的用法需要格外注意，打个比方：如果你要循环一个div 中的p 标签，则th:each属性必须放在p 标签上。若你将th:each 属性放在div 上，则循环的是将整个div。

4、变量表达式中提供了很多的内置方法，该内置方法是用#开头，请不要与#{}消息表达式弄混。

😁热门文章推荐

Thymeleaf快速入门及其注意事项

Spring Initailizr–快速入门–SpringBoot的选择

带你了解SpringBoot支持的复杂参数–自定义对象参数-自动封装

Rest 优雅的url请求处理风格及注意事项

文章到这里就结束了，如果有什么疑问的地方请指出，诸大佬们一起来评论区一起讨论😁
希望能和诸大佬们一起努力，今后我们一起观看感谢您的阅读🍻
如果帮助到您不妨3连支持一下，创造不易您们的支持是我的动力🤞

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/80058.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

​Kubernetes的演变：从etcd到分布式SQL的过渡

​Kubernetes的演变：从etcd到分布式SQL的过渡

DevRel领域专家Denis Magda表示&#xff0c;他偶然发现了一篇解释如何用PostgreSQL无缝替换etcd的文章。该文章指出&#xff0c;Kine项目作为外部etcd端点&#xff0c;可以将Kubernetes etcd请求转换为底层关系数据库的SQL查询。 受到这种方法的启发&#xff0c;Magda决定进一步…
阅读更多...
Cat（5）：API介绍—Event

Cat（5）：API介绍—Event

Event 用来记录一件事发生的次数&#xff0c;比如记录系统异常&#xff0c;它和transaction相比缺少了时间的统计&#xff0c;开销比transaction要小。 Cat.logEvent 记录一个事件。 Cat.logEvent("URL.Server", "serverIp", Event.SUCCESS, "ip${…
阅读更多...
如何进行远程debug？

如何进行远程debug？

文章目录 前言一、使用步骤1.首先通过nohup在启动jar包的我们可以添加参数&#xff1a;2.具体参数的含义如下&#xff1a;3. 查询监听的端口&#xff1a; 前言 在工作中&#xff0c;排查问题我们经常需要进行debug&#xff0c;而远程debug能够方便的帮助我们排查线上的问题。 …
阅读更多...
【力扣】496. 下一个更大元素 I ＜单调栈、模拟＞

【力扣】496. 下一个更大元素 I ＜单调栈、模拟＞

【力扣】496. 下一个更大元素 I nums1 中数字 x 的 下一个更大元素 是指 x 在 nums2 中对应位置 右侧 的 第一个 比 x 大的元素。给你两个没有重复元素的数组 nums1 和 nums2 &#xff0c;下标从 0 开始计数&#xff0c;其中nums1 是 nums2 的子集。   对于每个 0 < i <…
阅读更多...
【AIGC】 国内版聊天GPT

【AIGC】 国内版聊天GPT

国内版聊天GPT 引言一、国内平台二、简单体验2.1 提问2.2 角色扮演2.3 总结画图 引言 ChatGPT是OpenAI发开的聊天程序&#xff0c;功能强大&#xff0c;可快速获取信息&#xff0c;节省用户时间和精力&#xff0c;提供个性化的服务。目前国产ChatGPT&#xff0c;比如文心一言&a…
阅读更多...
Kubernetes二进制部署方案

Kubernetes二进制部署方案

目录 一、环境准备 2.1、主机配置 2.2、安装 Docker 2.3、生成通信加密证书 2.3.1、生成 CA 证书&#xff08;所有主机操作&#xff09; 2.3.2、生成 Server 证书&#xff08;所有主机&#xff09; 2.3.3、生成 admin 证书(所有主机) 2.3.4、生成 proxy 证书 三、部署 …
阅读更多...
JMeter接口自动化测试实例—JMeter引用javaScript

JMeter接口自动化测试实例—JMeter引用javaScript

Jmeter提供了JSR223 PreProcessor前置处理器&#xff0c;通过该工具融合了Java 8 Nashorn 脚本引擎&#xff0c;可以执行js脚本以便对脚本进行前置处理。其中比较典型的应用就是通过执行js脚本对前端数据进行rsa加密&#xff0c;如登录密码加密。但在这里我就简单的应用javaScr…
阅读更多...
java练习6. 求完数

java练习6. 求完数

题目: 请编程求出1000 以内的所有完数。 完数:一个数如果恰好等于它的所有真因子&#xff08;即除了自身外的所有因数&#xff09;之和&#xff0c;这个数就称为"完数"。 public static void main(String[] args) {for (int i 2; i < 1000; i) {int sum0;for (in…
阅读更多...
ARM M33架构入门

ARM M33架构入门

概述 Arm Cortex-M33核心处理器专为需要高效安全或数字信号控制的物联网和嵌入式应用而设计。该处理器具有许多可选功能&#xff0c;包括数字信号处理扩展 (DSP)、用于硬件强制隔离的TrustZone 安全性、内存保护单元 (MPU)和浮点单元 (FPU)。 Cortex-M33 的性能比 Cortex-M…
阅读更多...
【笔试题心得】关于正则的一些整理

【笔试题心得】关于正则的一些整理

本文部分内容摘抄整理自 正则表达式 – 教程 | 菜鸟教程 在笔试的过程中&#xff0c;也常常会对正则表达式进行考察&#xff0c;这里对正则表达式的常见用法&#xff0c;做一个学习和总结。 正则表达式的模式可以包括以下内容&#xff1a; 字面值字符&#xff1a;例如字母、数…
阅读更多...
使用 Visual Studio GoogleTest编写 C/C++ 单元测试——入门篇

使用 Visual Studio GoogleTest编写 C/C++ 单元测试——入门篇

入门教程 Visual Studio 新建 GoogleTest项目&#xff0c;一路选默认参数 pch.h #pragma once#include "gtest/gtest.h"int add(int a, int b);pch.cpp #include "pch.h"int add(int a, int b) {return a b; }test.cpp #include "pch.h"TES…
阅读更多...
Mac平台最佳PDF编辑软件，Qoppa PDF Studio Pro助您实现PDF文件的完美编辑

Mac平台最佳PDF编辑软件，Qoppa PDF Studio Pro助您实现PDF文件的完美编辑

Qoppa PDF Studio Pro是一款功能强大的PDF编辑软件&#xff0c;现已推出Mac版本&#xff01;无论是个人用户还是企业用户&#xff0c;都能够从中受益。 Qoppa PDF Studio Pro为用户提供了一系列丰富的编辑工具&#xff0c;可以轻松地对PDF文件进行编辑、注释和标记。 用户可以…
阅读更多...
【PACS源码】认识PACS的架构和工作流程

【PACS源码】认识PACS的架构和工作流程

&#xff08;一&#xff09;PACS系统的组成及架构 PACS系统的基本组成部分包括&#xff1a;数字影像采集、通讯和网络、医学影像存储、医学影像管理、各类工作站五个部分。 而目前PACS系统的软件架构选型上看&#xff0c;主要有C/S和B/S两种形式。 C/S架构&#xff0c;即Client…
阅读更多...
大数据平台是什么意思？有什么用？一般包含哪些模块？

大数据平台是什么意思？有什么用？一般包含哪些模块？

大数据时代&#xff0c;还有很多人不知道大数据平台是什么意思&#xff1f;有什么用&#xff1f;一般包含哪些模块&#xff1f;今天我们就一起来简单了解一下吧&#xff01;仅供参考哦&#xff01; 大数据平台是什么意思&#xff1f;有什么用&#xff1f;一般包含哪些模块&am…
阅读更多...
Java 项目日志实例基础：Log4j

Java 项目日志实例基础：Log4j

点击下方关注我&#xff0c;然后右上角点击...“设为星标”&#xff0c;就能第一时间收到更新推送啦~~~ 介绍几个日志使用方面的基础知识。 1 Log4j 1、Log4j 介绍 Log4j&#xff08;log for java&#xff09;是 Apache 的一个开源项目&#xff0c;通过使用 Log4j&#xff0c;我…
阅读更多...
Visual Studio 2019源码编译cpu版本onnxruntime

Visual Studio 2019源码编译cpu版本onnxruntime

1.下载onnxruntime源码 源码地址&#xff1a;gitee 》https://gitee.com/mirrors/onnx-runtime github 》https://github.com/microsoft/onnxruntime git clone --recursive https://gitee.com/mirrors/onnx-runtime 2.安装anaconda并配置python环境 安装anaconda时记得勾选默…
阅读更多...
【C++深入浅出】初识C++中篇（引用、内联函数）

【C++深入浅出】初识C++中篇（引用、内联函数）

目录 一. 前言 二. 引用 2.1 引用的概念 2.2 引用的使用 2.3 引用的特性 2.4 常引用 2.5 引用的使用场景 2.6 传值、传引用效率比较 2.7 引用和指针的区别 三. 内联函数 3.1 内联函数的概念 3.2 内联函数的特性 一. 前言 上期说道&#xff0c;C是在C的基础之上&…
阅读更多...
常见前端基础面试题（HTML,CSS,JS）（三）

常见前端基础面试题（HTML,CSS,JS）（三）

JS 中如何进行数据类型的转换&#xff1f; 类型转换可以分为两种&#xff0c;隐性转换和显性转换 显性转换 主要分为三大类&#xff1a;数值类型、字符串类型、布尔类型 三大类的原始类型值的转换规则我就不一一列举了 数值类型&#xff08;引用类型转换&#xff09; Numbe…
阅读更多...
广度优先遍历与最短路径(Java 实例代码源码包下载)

广度优先遍历与最短路径(Java 实例代码源码包下载)

目录 广度优先遍历与最短路径 Java 实例代码 src/runoob/graph/ShortestPath.java 文件代码&#xff1a; 广度优先遍历与最短路径 广度优先遍历从某个顶点 v 出发&#xff0c;首先访问这个结点&#xff0c;并将其标记为已访问过&#xff0c;然后顺序访问结点v的所有未被访问…
阅读更多...
系统学习Linux-Mariadb高可用MHA

系统学习Linux-Mariadb高可用MHA

概念 MHA&#xff08;MasterHigh Availability&#xff09;是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。 MHA 的出现就是解决MySQL 单点的问题。 MySQL故障切换过程中&#xff0c;MHA能做到0-30秒内自动完成故障切换操作。 MHA能在故障切换的过程中最大程度上…
阅读更多...
最新文章

Copyright @ 2022~2023