Layui实现登录注册共用页面

正文

创建一个Spring Boot项目，勾选Web、Thymeleaf即可

pom文件中导入图片验证码的依赖

<dependency>
    <groupId>com.github.whvcse</groupId>
    <artifactId>easy-captcha</artifactId>
    <version>1.6.2</version>
</dependency>

配置application.properties属性文件

# 都很简单 不再解释了
spring.thymeleaf.cache=false
spring.mvc.static-path-pattern= /static/**

导入静态文件
1. 导入layui，直接将整个文件夹放在static下面即可
2. 导入jquery、页面样式文件css等等
3. 效果图如下：

编写页面跳转和验证码生成类（为了简化就放在一个类里面了）

package byb;

......
    
@Controller
public class PageController {

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

    @GetMapping("/user/captcha")
    @ResponseBody
    public void captcha(HttpServletRequest request, HttpServletResponse response) throws Exception {
        // 设置请求头为输出图片类型
        response.setHeader("Pragma", "No-cache");
        response.setContentType("image/gif");
        response.setDateHeader("Expires", 0);
        response.setHeader("Cache-Control", "no-cache");
        // 三个参数分别为宽、高、位数
        SpecCaptcha specCaptcha = new SpecCaptcha(130, 48, 4);
        specCaptcha.setFont(Captcha.FONT_1);
        // 设置类型，纯数字、纯字母、字母数字混合
        specCaptcha.setCharType(Captcha.TYPE_ONLY_NUMBER);
        // 验证码存入session
        request.getSession().setAttribute("captcha", specCaptcha.text().toLowerCase());
        // 输出图片流
        specCaptcha.out(response.getOutputStream());
    }
}

在templates下创建login页面，再完善亿点点细节…

注意： 这里我只是获取到用户输入的数据，如果对接后台的话，需要自己添加Ajax(提交到后台判断即可)

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登陆/注册</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/static/css/style.css}">
    <link rel="stylesheet" th:href="@{/static/css/login.css}">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <link rel="icon" th:href="@{/static/favicon.ico}" type="image/x-icon"/>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-container">
    <!--登录页面-->
    <div class="admin-login-background layui-anim layui-anim-upbit" id="login-form" style="display: block">
        <div class="layui-form login-form">
            <form class="layui-form" action="">
                <div class="layui-form-item logo-title">
                    <h1>后台系统登录页</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username"></label>
                    <input type="text" id="username" name="username" required lay-verify="required" placeholder="账号" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password"></label>
                    <input type="password" id="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 178px;">
                            <label class="layui-icon layui-icon-vercode"></label>
                            <input type="text" id="code" name="code" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                        </div>
                        <img id="codeImage" src="http://localhost:8080/user/captcha" width="120px" height="48px" style="margin-top: -5px"  alt="点我更换" onclick="this.src='http://localhost:8080/user/captcha?'+Math.random()"/>
                    </div>
                </div>
                <div class="layui-form-item" style="margin-top: -15px;">
                    <input type="checkbox" name="rememberMe" lay-skin="primary" title="记住我">
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">登 录</button>
                </div>
                <hr class="layui-bg-green"/>
                <p><a href="javascript:void(0);" onclick="register()" class="fr">立即注册</a></p><br>
            </form>
        </div>
    </div>
    <!--注册页面-->
    <div class="admin-login-background layui-anim layui-anim-upbit" id="register-form" style="display: none">
        <div class="layui-form login-form">
            <form class="layui-form" action="" method="post">
                <div class="layui-form-item logo-title">
                    <h1>注册页</h1>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline" style="float: left">
                        <label class="layui-icon layui-icon-username"></label>
                        <input style="width: 280px" type="text" id="user" name="username" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline" style="float: left;margin-top: 7px">
                        <i class="layui-icon" id="ri" style="color: green;font-weight: bolder;" hidden></i>
                    </div>
                    <div class="layui-inline" style="float: left">
                        <i class="layui-icon" id="wr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
                    </div>
                </div>
                <div class="layui-form layui-form-item">
                    <div class="layui-inline" style="float: left">
                        <label class="layui-icon layui-icon-password"></label>
                        <input style="width: 280px" type="password" id="pwd" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline" style="float: left;margin-top: 7px">
                        <i class="layui-icon" id="pri" style="color: green;font-weight: bolder;" hidden></i>
                    </div>
                    <div class="layui-inline" style="float: left">
                        <i class="layui-icon" id="pwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline" style="float: left">
                        <label class="layui-icon layui-icon-auz"></label>
                        <input style="width: 280px" type="password" id="rpwd" name="repassword" required  lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline" style="float: left;margin-top: 7px">
                        <i class="layui-icon" id="rpri" style="color: green;font-weight: bolder;" hidden></i>
                    </div>
                    <div class="layui-inline" style="float: left">
                        <i class="layui-icon" id="rpwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
                    </div>
                </div>
                <div class="layui-form-item">
                    <button style="width: 320px" type="submit" lay-submit lay-filter="submit" class="layui-btn">注册</button>
                </div>
                <hr class="layui-bg-orange"/>
                <p><a href="javascript:void(0);" onclick="login()" class="fr">已有账号？立即登录</a></p><br>
            </form>
        </div>
    </div>
</div>

<script th:src="@{/static/js/jquery-3.4.1.js}"></script>
<script th:src="@{/static/layui/layui.js}"></script>
<script th:src="@{/static/js/jquery.particleground.min.js}"></script>
<script type="text/javascript">

    // 动态切换
    function register() {
        var login = document.getElementById("login-form");
        var register = document.getElementById("register-form");
        login.style.display = 'none';
        register.style.display = 'block';
    }
    function login() {
        var login = document.getElementById("login-form");
        var register = document.getElementById("register-form");
        login.style.display = 'block';
        register.style.display = 'none';
    }

    // 粒子线条背景
    $(document).ready(function(){
        $('.layui-container').particleground({
            dotColor:'#5cbdaa',
            lineColor:'#5cbdaa'
        });
    });

    //登录
    layui.use(['form','layer','jquery'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;

        form.on('submit(login)',function (data) {
            // 获取数据
            console.log(data.field);
            layer.alert(JSON.stringify(data.field));
            // Ajax传到后台判断即可 具体略...
            return false;
        });
    });

    //注册
    layui.use(['form','jquery','layer'], function () {
        var form   = layui.form;
        var $      = layui.jquery;
        var layer  = layui.layer;

        //添加表单失焦事件 并验证数据
        $('#user').blur(function() {
            var user = $(this).val();
            // 为用户名添加正则验证
            var reg = /^[\w]{3,12}$/;
            if(!($('#user').val().match(reg))){
                $('#wr').removeAttr('hidden');
                $('#ri').attr('hidden','hidden');
                layer.msg('请输入3到12位合法用户名');
            }
        });

        // 为密码添加正则验证
        $('#pwd').blur(function() {
            var reg = /^[\w]{6,12}$/;
            if(!($('#pwd').val().match(reg))){
                $('#pwr').removeAttr('hidden');
                $('#pri').attr('hidden','hidden');
                layer.msg('请输入6到12位合法密码');
            }else {
                $('#pri').removeAttr('hidden');
                $('#pwr').attr('hidden','hidden');
            }
        });

        // 验证两次密码是否一致
        $('#rpwd').blur(function() {
            var reg = /^[\w]{6,12}$/;
            if(!($('#rpwd').val().match(reg))) {
                $('#rpwr').removeAttr('hidden');
                $('#rpri').attr('hidden', 'hidden');
                layer.msg('请输入6到12位合法密码');
            } else if($('#pwd').val() !== $('#rpwd').val()){
                $('#rpwr').removeAttr('hidden');
                $('#rpri').attr('hidden','hidden');
            } else {
                $('#rpri').removeAttr('hidden');
                $('#rpwr').attr('hidden','hidden');
            }
        });

        //添加表单监听事件,提交注册信息
        form.on('submit(submit)', function(data) {
            console.log(data.field);
            if (data.field.password !== data.field.repassword ) {
                layer.msg('两次输入密码不一致');
                return false;
            }

            layer.alert(JSON.stringify(data.field));
            // Ajax传到后台注册即可 具体略...
            return false;
        });
    });
</script>
</body>
</html>

效果展示
1. 登录图：点击验证码图片可以实现换一个功能
2. 注册图：
3. 登录与注册切换：
总结
简简单单的小例子，可以应用到一些小项目中…就酱吧（>_<）！

原文链接：https://blog.csdn.net/LoveYMG/article/details/112644313