SpringBoot创建JSP登录页面功能实例代码

下面我来详细讲解一下“SpringBoot创建JSP登录页面功能实例代码”的完整攻略。

环境准备

在开始前，我们需要先准备好以下环境：

JDK 1.8 及以上
Spring Boot 2.0.0 及以上
IntelliJ IDEA 或 Eclipse 等开发工具
Tomcat 8.5 及以上

创建 Spring Boot 项目

先使用你喜欢的开发工具创建一个 Spring Boot 项目，稍加配置即可，这里不再赘述。我使用的是 IntelliJ IDEA。

引入依赖

在项目的 pom.xml 文件中添加以下依赖：

<dependencies>
    <!-- Spring Boot Web 依赖 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- Spring Boot JSP 依赖 -->
    <dependency>
        <groupId>org.apache.tomcat.embed</groupId>
        <artifactId>tomcat-embed-jasper</artifactId>
    </dependency>
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>jstl</artifactId>
    </dependency>
</dependencies>

其中第二个依赖用于支持 JSP 页面的渲染，第三个依赖则是 JSP 页面必须的标准标签库。

配置视图解析器

在 Spring Boot 中，视图解析器是通过 Thymeleaf 引擎实现的。但我们这里需要使用 JSP 模板引擎，因此需要进行如下配置：

@Configuration
public class MvcConfig implements WebMvcConfigurer {

    @Bean
    public InternalResourceViewResolver viewResolver() {
        InternalResourceViewResolver resolver = new InternalResourceViewResolver();
        resolver.setPrefix("/WEB-INF/views/");
        resolver.setSuffix(".jsp");
        resolver.setViewClass(JstlView.class);
        return resolver;
    }
}

这里使用 @Configuration 注解表示这是一个配置文件，同时实现了 WebMvcConfigurer 接口，覆盖其中的 configureViewResolvers 方法。在方法中定义一个 InternalResourceViewResolver 类型的 bean，作为视图解析器。其中：

Prefix 表示 JSP 文件的存放路径，这里选择 WEB-INF/views 目录下。
Suffix 表示 JSP 文件的后缀名，这里是 .jsp。
ViewClass 表示使用 JSTL 标准标签库。

编写登录页面

在 WEB-INF/views 目录下创建 login.jsp 文件，输入以下页面代码：

<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>登录</title>
    <style>
        body {
            background-color: #f4f4f4;
            font-family: Arial, sans-serif;
        }

        input {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }

        button:hover {
            opacity: 0.8;
        }

        .container {
            padding: 16px;
            background-color: white;
            text-align: center;
        }

        .error-msg {
            color: red;
        }
    </style>
</head>
<body>

<div class="container">
    <h1>欢迎登录</h1>
    <form action="/login" method="post">
        <label for="username"><b>用户名</b></label>
        <input type="text" placeholder="请输入用户名" name="username" required>

        <label for="password"><b>密码</b></label>
        <input type="password" placeholder="请输入密码" name="password" required>

        <button type="submit">登录</button>
        <c:if test="${not empty error}">
            <div class="error-msg">${error}</div>
        </c:if>
    </form>
</div>

</body>
</html>

这里使用了 HTML 和 CSS 样式来美化页面，使用表单输入框来获取用户输入的用户名和密码，使用 JSTL 的 c:if 标签来判断是否有错误提示信息。

编写控制器和服务

创建一个 LoginController 类，用于处理登录相关的请求：

@Controller
public class LoginController {

    @Autowired
    private UserService userService;

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

    @PostMapping("/login")
    public String doLogin(HttpServletRequest request, HttpSession session) {
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        User user = userService.getUser(username);

        if (user != null && password.equals(user.getPassword())) {
            session.setAttribute("user", user);
            return "redirect:/index";
        } else {
            request.setAttribute("error", "用户名或密码错误！");
            return "login";
        }
    }
}

其中：

@Controller 表示这是一个控制器类。
@GetMapping 和 @PostMapping 用于处理 GET 和 POST 请求。
@Autowired 用于自动注入 UserService 类。
login 方法用于返回 login.jsp 页面。
doLogin 方法用于处理登陆请求。首先获取用户输入的用户名和密码，然后调用 UserService 类的 getUser 方法，查询数据库中是否有对应的用户信息，如果有则将用户信息存储到 HttpSession 中，并跳转到 /index 页面；否则将错误提示信息存储到 HttpServletRequest 中，返回 login.jsp 页面。

创建一个 UserService 接口及其实现类，用于查询数据库中的用户信息：

public interface UserService {
    User getUser(String username);
}

@Service
public class UserServiceImpl implements UserService {

    private Map<String, User> users;

    public UserServiceImpl() {
        users = new HashMap<>();
        users.put("admin", new User("admin", "admin123"));
        users.put("user", new User("user", "user123"));
    }

    @Override
    public User getUser(String username) {
        return users.get(username);
    }
}

其中：

UserService 接口只有一个方法，用于获取用户信息。
UserServiceImpl 类实现了 UserService 接口，同时模拟了一个用户存储 Map。

运行项目

以上代码完成后，就可以启动 Spring Boot 项目，访问 localhost:8080/login 地址，即可进入登录页面。输入正确的用户名和密码，会跳转到 /index 页面；如果输入错误，则会显示相应的错误信息。

示例代码：https://github.com/grace789456/springboot-login-page

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：SpringBoot创建JSP登录页面功能实例代码 - Python技术站