Spring boot搭建web应用集成thymeleaf模板实现登陆

下面就是详细讲解Spring Boot搭建Web应用集成Thymeleaf模板实现登录的攻略。

1. 新建Spring Boot项目

首先，打开IDE，新建一个Spring Boot项目。在Maven项目的pom.xml中添加thymeleaf依赖：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

这个依赖将帮我们自动引入Thymeleaf和Spring Boot的集成组件。

2. 编写登录页面

创建一个登录页面，文件名为login.html。代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <h2>Login</h2>
    <form method="post" th:action="@{/login}">
        <label>Username: <input type="text" name="username" /></label><br>
        <label>Password: <input type="password" name="password" /></label><br>
        <input type="submit" value="Login" />
    </form>
</body>
</html>

该页面包含一个表单，其中有两个输入框和一个提交按钮。它们的name属性可以用来在后台获取值。表单的method属性值为post，action属性值为@{/login}。@{/login}表示我们在后台会处理一个/login的请求。

3. 编写后台处理逻辑

在后台创建一个UserController类，代码如下：

@Controller
public class UserController {

    @GetMapping("/login")
    public String login() {
        return "login";
    }

    @PostMapping("/login")
    public String login(@RequestParam String username, 
                        @RequestParam String password, 
                        Model model) {
        if (username.equals("admin") && password.equals("admin")) {
            return "success";
        } else {
            model.addAttribute("error", "Invalid username or password");
            return "login";
        }
    }

}

在该类中，我们定义了处理/login请求的GET和POST请求。GET请求返回login页面，POST请求会根据用户输入的用户名和密码判断是否登录成功，若成功则返回success页面，否则返回login页面，并设置一个error属性，用于在页面上显示错误信息。

上面我们在处理POST请求时用到了@RequestParam注解，它能够从请求中获取参数，这里我们将用户名和密码都获取了出来。

我们还用到了Model对象，通过它向页面中传递信息，比如上面代码中的model.addAttribute("error", "Invalid username or password")用于将一个名为error的属性，值为"Invalid username or password"传递到页面中。这样，在login.html中就可以通过th:text="${error}"获取该属性的值，进行相应的提示。

4. 创建成功页面

在项目中添加一个success.html页面，代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Success</title>
</head>
<body>
    <h2>Login Success</h2>
    <p>Welcome, ${name}!</p>
</body>
</html>

该页面会显示一个欢迎信息，其中的${name}将在后台传递。也就是说，我们需要在后台处理登录成功时将用户名传递到该页面中。

5. 完整代码

UserController代码：

@Controller
public class UserController {

    @GetMapping("/login")
    public String login() {
        return "login";
    }

    @PostMapping("/login")
    public String login(@RequestParam String username, 
                        @RequestParam String password, 
                        Model model) {
        if (username.equals("admin") && password.equals("admin")) {
            model.addAttribute("name", username);
            return "success";
        } else {
            model.addAttribute("error", "Invalid username or password");
            return "login";
        }
    }

}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <h2>Login</h2>
    <form method="post" th:action="@{/login}">
        <label>Username: <input type="text" name="username" /></label><br>
        <label>Password: <input type="password" name="password" /></label><br>
        <input type="submit" value="Login" />
        <p th:text="${error}" style="color:red;"></p>
    </form>
</body>
</html>

success.html代码：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Success</title>
</head>
<body>
    <h2>Login Success</h2>
    <p>Welcome, ${name}!</p>
</body>
</html>

至此，我们已经完成了Spring Boot集成Thymeleaf模板实现登录的整个过程。你可以运行该项目，输入admin/admin进行登录，如果登录成功将跳转到success页面，欢迎你的到来。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Spring boot搭建web应用集成thymeleaf模板实现登陆 - Python技术站