SpringBoot + layui 框架实现一周免登陆功能

偏执的太偏执、 2024-04-29 19:15 12阅读 0赞

![在这里插入图片描述][0af3cc554568470e887e8364eeb59181.gif_pic_center]

> ✅作者简介：2022年博客新星 **第八**。热爱国学的Java后端开发者，修心和技术同步精进。  
> 🍎个人主页：[Java Fans的博客][Java Fans]  
> 🍊个人信条：不迁怒，不贰过。小知识，大智慧。  
> 💞当前专栏：[SpringBoot 框架从入门到精通][SpringBoot]  
> ✨特色专栏：[国学周更-心性养成之路][-]  
> 🥭本文内容：SpringBoot + layui 框架实现一周免登陆功能

![在这里插入图片描述][f9f78e0249ac42da89a324becc98a1b1.png]  
要实现一周免登录功能，您可以使用Spring Boot和Layui框架配合完成。以下是一种可能的实现方式：

创建一个名为User的实体类，用于表示用户信息，其中包含用户的用户名和密码等字段，以及用于标记用户是否选择一周免登陆的rememberMe字段。

@Entity
    @Table(name = "users")
    public class User implements Serializable {
        
        @Id
        @GeneratedValue(strategy = GenerationType.IDENTITY)
        private Long id;
    
        @Column(unique = true, nullable = false)
        private String username;
    
        @Column(nullable = false)
        private String password;
    
        private boolean rememberMe;
    
        // Getters and Setters
        // ...
    }

创建一个名为UserRepository的接口，用于对User实体进行数据库操作。

@Repository
    public interface UserRepository extends JpaRepository<User, Long> {
        
        User findByUsername(String username);
    }

创建一个名为UserService的服务类，用于处理用户相关的业务逻辑。在这个类中，添加一个方法用于验证用户的登录，并根据用户是否选择一周免登陆来设置相关的Cookie。

@Service
    public class UserService {
        
        private UserRepository userRepository;
    
        @Autowired
        public void setUserRepository(UserRepository userRepository) {
        
            this.userRepository = userRepository;
        }
    
        public boolean login(String username, String password, boolean rememberMe, HttpServletResponse response) {
        
            User user = userRepository.findByUsername(username);
            if (user != null && user.getPassword().equals(password)) {
        
                if (rememberMe) {
        
                    // 设置一周免登陆的Cookie，有效期为7天
                    Cookie cookie = new Cookie("rememberMe", "true");
                    cookie.setMaxAge(7 * 24 * 60 * 60);  // 7天的秒数
                    cookie.setPath("/");
                    response.addCookie(cookie);
                    user.setRememberMe(true);
                    userRepository.save(user);
                }
                return true;
            }
            return false;
        }
    }

创建一个名为LoginController的控制器类，用于处理用户登录的请求。

@Controller
    public class LoginController {
        
        private UserService userService;
    
        @Autowired
        public void setUserService(UserService userService) {
        
            this.userService = userService;
        }
    
        @RequestMapping("/login")
        public String login(String username, String password, boolean rememberMe, HttpServletResponse response) {
        
            if (userService.login(username, password, rememberMe, response)) {
        
                return "redirect:/home";  // 登录成功后跳转到主页
            }
            return "redirect:/login?error";  // 登录失败跳转回登录页面，并带上错误参数
        }
    }

在对应的登录页面中使用Layui框架的表单组件，将用户名、密码和记住我选项组织成一个表单，并向LoginController的登录请求发送POST请求。

<!DOCTYPE html>
    <html>
    <head>
        <title>登录</title>
        
        <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.4/css/layui.min.css">
        <script src="https://cdn.staticfile.org/layui/2.5.4/layui.min.js"></script>
    </head>
    <body>
        <div class="layui-container">
            <form class="layui-form" action="/login" method="post">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="username" lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="password" name="password" lay-verify="required" autocomplete="off" placeholder="请输入密码" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="checkbox" name="rememberMe" title="记住我" lay-skin="primary">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">登录</button>
                    </div>
                </div>
            </form>
        </div>
    
        <script>
            layui.use(['form'], function() {
         
                var form = layui.form;
    
                // 表单验证
                form.verify({
         
                    required: function(value, item) {
         
                        if(value.length < 1) {
         
                            return '该项不能为空';
                        }
                    }
                });
    
                // 监听表单提交
                form.on('submit(formDemo)', function(data) {
         
                    // 获取表单数据并提交
                    var username = data.field.username;
                    var password = data.field.password;
                    var rememberMe = data.field.rememberMe === 'on';
    
                    // 发送AJAX请求提交登录表单
                    $.ajax({
         
                        url: '/login',
                        type: 'POST',
                        data: {
         
                            username: username,
                            password: password,
                            rememberMe: rememberMe
                        },
                        success: function(res) {
         
                            // 登录成功后的逻辑处理
                            if (res.success) {
         
                                window.location.href = '/home';
                            } else {
         
                                layer.msg(res.message, {
         icon: 2});
                            }
                        },
                        error: function() {
         
                            layer.msg('服务器错误', {
         icon: 2});
                        }
                    });
    
                    return false; // 阻止表单提交
                });
            });
        </script>
    </body>
    </html>

在上述代码中，我们使用了Layui的form模块进行表单的验证和提交。form.verify()函数用于定义表单字段的验证规则，这里只提供了一个required规则作为示例。

form.on(‘submit(formDemo)’, function(data) \{\})函数用于监听表单提交事件，并在提交时使用AJAX发送登录请求。提交成功后，根据服务器的响应进行相应的处理。

--------------------

码文不易，本篇文章就介绍到这里，如果想要学习更多**Java系列知识**，**点击**[**关注博主**][Link 1]，博主带你零基础学习Java知识。与此同时，对于日常生活有困扰的朋友，欢迎阅读我的**第四栏目**：[《国学周更—心性养成之路》][-]，学习技术的同时，我们也注重了心性的养成。

![在这里插入图片描述][e15b88a853574cf790eab90d2fca6520.gif_pic_center]

[0af3cc554568470e887e8364eeb59181.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/601f3e02de8d4bb8becdb41a026fd55e.gif
[Java Fans]: https://blog.csdn.net/hh867308122
[SpringBoot]: https://blog.csdn.net/hh867308122/category_12258917.html
[-]: https://blog.csdn.net/hh867308122/category_11971690.html
[f9f78e0249ac42da89a324becc98a1b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/a3f72719ec6748669c51bbc256224bbe.png
[Link 1]: https://blog.csdn.net/hh867308122?type=blog
[e15b88a853574cf790eab90d2fca6520.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/fe366f838cdf4c9ba18759cd83aafd58.gif