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

最新推荐文章于 2025-03-06 00:36:42 发布
最新推荐文章于 2025-03-06 00:36:42 发布
阅读量2.8k 收藏 18
点赞数 5
分类专栏： Thymeleaf 文章标签： spring boot 后端 java 前端 spring 媒体 struts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73557631/article/details/132307612
版权
本文详细介绍了如何使用SpringBoot和Thymeleaf构建一个简单的用户登录与列表功能的Web应用，包括HTML模板编写、Thymeleaf语法应用和后端控制器实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

文章目录

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连支持一下，创造不易您们的支持是我的动力🤞

springboot+thymeleaf+mybatis简单实现用户登录
weixin_48500300的博客
06-26 1375
目录一、UserMapper.java二、UserMapper.xml三、UserController.java四、MyMvcConfig.java五、login.html六、运行 在之前文章基础上编写springboot整合mybatis实现简单CRUD和springboot+thymeleaf模板引擎实现国际化 一、UserMapper.java //登录 User userLogin(@Param("email")String email, @Param("password")Stri
SpringBoot+thymeleaf简单实现登陆注册及记账功能
04-24
NULL 博文链接：https://357029540.iteye.com/blog/2381388
SpringBoot + Thymeleaf 实现登录操作（验证码登录、错误页面跳转、log4j2 配置、拦截器配置）
Lemon
06-01 5981
一、项目目录 二、配置文件 1、pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.a
Spring Boot整合Thymeleaf模板引擎实战——从静态页面到动态表单处理全流程解析
最新发布
u012762619的博客
03-06 1177
在前后端不分离的传统Web项目中，Thymeleaf凭借自然的HTML语法与强大的表达式功能成为Spring Boot官方推荐的模板引擎。本文将带你从零实现用户注册功能，涵盖表单验证、页面碎片化、国际化等核心场景，并分享性能调优实战经验。
Spring boot搭建web应用集成thymeleaf模板实现登陆
08-28
主要介绍了Spring boot搭建web应用集成thymeleaf模板实现登陆，页面使用bootstrap，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
springboot整合thymeleaf实现简单的登录功能-单点登录（三）
huangpf_vcx
05-31 3781
单点登录 单点登录（Single Sign On），简称为 SSO，是目前比较流行的企业业务整合的解决方案之一。SSO的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。 原理 有一个独立的认证中心，只有认证中心才能接受用户的用户名和密码等信息进行认证，其他系统不提供登录入口，只接受认证中心的间接授权。间接授权通过令牌实现，当用户提供的用户名和密码通过认证中心认证后...
springboot整合thymeleaf实现登录跳转（详细）
qq_62923382的博客
08-29 8820
springboot、springboot整合thymeleaf实现登录跳转（采用重定向）
SpringBoot+Shiro+Mybatis+Thymeleaf个人博客前后台管理系统
08-01
Spring Boot、Apache Shiro、MyBatis-Plus、Alibaba Druid、Redis、MySQL、Thymeleaf 三、安装 将本项目源码导入本地开发工具(如 IntelliJ IDEA )，本地开发工具需要安装 lombok 插件 安装Mysql数据库：Mysql版本...
SpringBoot+MyBatisPlus+Thymeleaf 增删改查CRUD
12-03
在本项目中，"SpringBoot+MyBatisPlus+Thymeleaf 增删改查CRUD"是一个典型的Web开发应用，它整合了三个关键的技术框架：Spring Boot、MyBatis Plus和Thymeleaf。下面将详细介绍这三个组件以及它们在实现增删改查...
SpringBoot+Thymeleaf+SSM+Vue.js实现简单的增删改查
01-27
在本项目中，我们主要利用SpringBoot框架与Thymeleaf模板引擎，结合传统的SSM（Spring、SpringMVC、MyBatis）架构以及前端Vue.js技术，来实现一个基本的增删改查功能。这是一个典型的后端服务与前端交互的示例，适合...
springboot项目实训源代码+thymeleaf+mysql+mybatis
02-23
3、SpringBoot框架，注解使用 4、thymeleaf模板的配置，常用标签的使用，if,for,include,replace标签 6、用户管理：新增，修改，删除，查询功能 9、页面功能由html+thymeleaf实现 10、数据库脚本及数据在项目源...
springBoot+thymleaf 实现简单 登陆认证+登陆拦截器功能
weixin_43952575的博客
08-03 303
引入依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-
使用springboot+thymeleaf实现简单的登录功能，登录后查询全部数据返回给页面
weixin_68105699的博客
08-18 3440
使用springboot+thymeleaf实现简单的登录功能，登录后查询全部数据返回给页面 查询数据库数据遍历输出在页面上
SpringBoot + thymeleaf实现微信登录
weixin_69218754的博客
07-03 272
SpringBoot + thymeleaf实现微信登录
springboot整合thymeleaf实现简单的登录功能-拦截器（一）
huangpf_vcx
05-17 5222
Thymeleaf是什么 Thymeleaf是用于Web和独立环境的现代服务器端Java模板引擎。Thymeleaf的主要目标是将优雅的自然模板带到您的开发工作流程中—HTML能够在浏览器中正确显示，并且可以作为静态原型，从而在开发团队中实现更强大的协作。 Thymeleaf简单入门 1、首先我们创建一个springboot项目，添加依赖 <dependency> ...
Springboot+Thymeleaf+Jpa实现完整登录功能（带验证码完整源码）
weixin_47087489的博客
05-13 2548
Springboot+Thymeleaf+Jpa实现完整登录功能（带验证码附源码）目录首先要创建一个springboot项目pom.xml代码配置文件application.yml的代码Po(实体)层代码（User.java）Dao（数据库操作）层代码（UserDao.java）Service（服务）层代码Service层接口（Userservice.java）Service层具体实现（UserServiceimpl.java）验证码功能Controller（控制）层代码（LoginController.j
springboot整合thymeleaf实现简单的登录功能-单点登录（四）
huangpf_vcx
06-01 3386
上篇地址：https://blog.csdn.net/qq_36154832/article/details/90718252 单点登录的系统实现 单点登录的服务端项目结构 1、新建一个Springboot项目，添加依赖同需求端 2、UserController实现登陆跳转 @Controller public class UserController { @Autow...
SpringBoot使用thymeleaf实现用户的登录注册（四）
热门推荐
xiao_count的博客
10-08 1万+
本文在上一篇（SpringBoot整合多数据源jpa+mybatis（三） ）基础上使用thymeleaf实现用户的登录注册。 项目结构图如下： 流程图如下： user采用JPA，product采用mybatis，html采用thymeleaf模板。 数据源配置不变，实体类也不变。 1.为项目增加依赖 我们只需再加入thymeleaf即可 <!--thymeleaf--> <...
SpringBoot+Thymeleaf+JPA实现的完整博客系统源码
SSM（Spring + SpringMVC + MyBatis）是另一个流行的Java Web开发技术组合，尽管在这个资源中没有直接使用SSM标签，但SpringBoot+Thymeleaf+JPA的组合提供了与SSM类似的功能和优势，也适合进行Web应用的开发。...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晨犀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值