使用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 完成简单的用户登录-列表功能

分析图

代码实现

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

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

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

创建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>

创建com/nlc/usersys/bean/Admin.java

@Data
public class Admin {
    private String name;
    private String password;
}

创建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;
}

创建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";
    }
}

创建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

修改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";
        }
}

修改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>

修改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>