web项目上线登录功能

2024-02-17 19:21:58

新建Spring项目：demo7，添加依赖：Spring Web、Spring Configuration Processor、Lombok和Thymeleaf。自动生成的pom.xml如下，

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

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-configuration-processor</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

com.example.boot下新建类：bean.User。

package com.example.boot.bean;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class User {
    private String username;
    private String password;
}

com.example.boot下新建控制器：controller.IndexController。

package com.example.boot.controller;

import com.example.boot.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import javax.servlet.http.HttpSession;

@Controller
public class IndexController {
    @GetMapping(value = {"/","/login"})
    public String login(){
        return "login";
    }

    //出现问题：表单重复提交
    @PostMapping(value = "/login")
    public String main(User user, HttpSession session){
        session.setAttribute("loginUser",user);
        return "main";
    }
}

resources.static下新建页面：login.html和main.html。

<!-- login.html -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
    <form th:action="@{/login}" method="post">
        用户名：<input type="text" name="username"/><br/>
        密码：<input type="password" name="password"/><br/>
        <input type="submit" value="登录"/>
    </form>
</body>
</html>

<!-- main.html -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
</head>
<body>
    <p>Welcome to main page! [[${session.loginUser.username}]]</p>
</body>
</html>

启动应用，查看效果。

存在的问题：登录后刷新页面，将重复提交表单。
针对以上问题，最佳的解决方法是，使用重定向。
对控制器类IndexController进行修改，修改后的结果如下，

package com.example.boot.controller;

import com.example.boot.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;

import javax.servlet.http.HttpSession;

@Controller
public class IndexController {
    @GetMapping(value = {"/","/login"})
    public String login(){
        return "login";
    }

    //防止表单重复提交，最好的解决方法是：使用重定向
    @PostMapping(value = "login")
    public String main(User user, HttpSession session, Model model){
        //登录成功，重定向到main.html
        if(StringUtils.hasLength(user.getUsername()) && "test@123".equals(user.getPassword())){
            session.setAttribute("loginUser",user);
            return "redirect:/main.html";
        }else{
            model.addAttribute("msg","账号或密码错误!");
            return "login";
        }
    }

    @GetMapping("/main.html")
    public String mainPage(HttpSession session,Model model){
        if(session.getAttribute("loginUser") != null){
            return "main";
        }else{
            model.addAttribute("msg","请重新登录!");
            return "login";
        }
    }
}

对login.html进行修改，修改后的结果如下，

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
    <p th:text="${msg}" style="color:red;"></p>
    <form th:action="@{/login}" method="post">
        用户名：<input type="text" name="username" autocomplete="off"/><br/>
        密码：<input type="password" name="password"/><br/>
        <input type="submit" value="登录"/>
    </form>
</body>
</html>

重启应用，并对修改进行验证。

码农公寓

相关文章