SpringSecurity6 | 自定义登录页面

news2024/11/19 5:52:06

公众号封面

✅作者简介：大家好，我是Leo，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉
🍎个人主页：Leo的博客
💞当前专栏： Java从入门到精通
✨特色专栏： MySQL学习
🥭本文内容：SSpringSecurity6 | 自定义登录页面
📚个人知识库：知识库，欢迎大家访问

学习参考：

讲师：孙帅老师
课程：孙哥说SpringSecurity6

1.前言

大家好，我是Leo哥🫣🫣🫣，接到上一节，我们学习通过SpringSecurity的一些自定义配置来完成我们自定义认证规则的一些需求。这篇文章我们主要来介绍一下如何自定义我的登录页面。好了，话不多说让我们开始吧😎😎😎。

2.环境配置

首先先说明一下我们的环境配置和技术要求，我们还是会创建一个新的SpringBoot工程，对其进行一些自定义配置。

因为我们要自定义我们的登录页面，所以我们这里会用到一种后端模版引擎–>Thyemleaf。如果对Thyemleaf还不了解的同学，可以参考我这篇文章。

3.自定义登录页面

3.1 导入依赖

在我们的pom.xml文件中导入ThymeLeaf依赖。

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

3.2 创建login.html

并制定xml：th的映射，这里是为了可以在HTML中使用ThymeLeaf语法。

<!DOCTYPE html>
<html lang="en" xml:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login Page</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    .login-container {
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      display: block;
      margin-bottom: 5px;
    }
    .form-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      box-sizing: border-box; /* ensures padding doesn't affect width */
    }
    .form-group input[type="submit"] {
      background-color: #5c79b8;
      color: white;
      cursor: pointer;
    }
    .form-group input[type="submit"]:hover {
      background-color: #4cae97;
    }
  </style>
</head>
<body>
<div class="login-container">
  <h2>登录页面</h2>
  <form>
    <div class="form-group">
      <label for="username">用户名:</label>
      <input type="text" id="username" name="name" required>
    </div>

    <div class="form-group">
      <label for="password">密码:</label>
      <input type="password" id="password" name="passwd" required>
    </div>

    <div class="form-group">
      <input type="submit" value="Log In">
    </div>
  </form>
</div>
</body>
</html>