《大事件项目》之基于Ajax&Layui&git开发的简易注册登录页面

最新推荐文章于 2024-04-22 16:25:48 发布

孙大大啊

最新推荐文章于 2024-04-22 16:25:48 发布

阅读量945

点赞数 1

分类专栏： git 学习（Ajax）文章标签： git ajax layui

本文链接：https://blog.csdn.net/szw2377132528/article/details/122627414

版权

学习（Ajax）同时被 2 个专栏收录

6 篇文章 1 订阅

订阅专栏

git

5 篇文章 0 订阅

订阅专栏

1. 首先我们要先准备好我们的项目文件夹 login&reg

文件夹里准备好一个文件夹（assets）

里面准备好css、fonts、images、js、lib文件夹，存放好需要用到的配置文件

以及login.html页面

接下来就是使用Git管理仓库了，然后接下来就是 login.html代码部分（基于master分支，创建的login分支上完成的）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>注册&登录</title>
        <link rel="stylesheet" href="./assets/lib/layui/css/layui.css" />
        <link rel="stylesheet" href="./assets/css/login.css" />
    </head>
    <body>
        <!-- 头部logo区域 -->
        <div class="layui-main">
            <img src="./assets/images/logo.png" />
        </div>

        <!-- 登录注册区域 -->
        <div class="loginAndRegbox">
            <!-- 注册登录框title -->
            <div class="title-box"></div>

            <!-- 登录框 -->
            <div class="login-box">
                <!-- layui登录区域开始 -->
                <form class="layui-form" id="form_login">
                    <!-- 用户名 -->
                    <div class="layui-form-item required lay-verify='email'">
                        <i class="layui-icon layui-icon-username"></i>
                        <input
                            type="text"
                            name="username"
                            required
                            lay-verify="required"
                            placeholder="请输入用户名"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                    <!-- 密码 -->
                    <div class="layui-form-item required lay-verify='email'">
                        <i class="layui-icon layui-icon-password"></i>
                        <input
                            type="password"
                            name="password"
                            required
                            lay-verify="required|pwd"
                            placeholder="请输入密码"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                    <!-- 提交按钮 -->
                    <div class="layui-form-item">
                        <button
                            class="layui-btn layui-btn-normal layui-btn-fluid"
                            lay-submit
                            lay-filter="formDemo"
                        >
                            立即登录
                        </button>
                    </div>
                    <div class="layui-form-item links">
                        <a href="javascript:;" id="link_reg">去注册</a>
                    </div>
                </form>
                <!-- layui登录区域结束 -->
            </div>

            <!-- 注册框 -->
            <div class="reg-box">
                <!-- layui注册区域开始 -->
                <form class="layui-form" id="form_reg">
                    <!-- 用户名 -->
                    <div class="layui-form-item">
                        <i class="layui-icon layui-icon-username"></i>
                        <input
                            type="text"
                            name="username"
                            required
                            lay-verify="required"
                            placeholder="请输入用户名"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                    <!-- 密码 -->
                    <div class="layui-form-item">
                        <i class="layui-icon layui-icon-password"></i>
                        <input
                            type="password"
                            name="password"
                            required
                            lay-verify="required|pwd"
                            placeholder="请输入密码"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                    <!-- 确认密码 -->
                    <div class="layui-form-item">
                        <i class="layui-icon layui-icon-password"></i>
                        <input
                            type="password"
                            name="repassword"
                            required
                            lay-verify="required|repwd"
                            placeholder="请再次输入密码"
                            autocomplete="off"
                            class="layui-input"
                        />
                    </div>
                    <!-- 提交按钮 -->
                    <div class="layui-form-item">
                        <button
                            class="layui-btn layui-btn-normal layui-btn-fluid"
                            lay-submit
                            lay-filter="formDemo"
                        >
                            立即注册
                        </button>
                    </div>
                    <div class="layui-form-item links">
                        <a href="javascript:;" id="link_login">去登录</a>
                    </div>
                </form>
                <!-- layui注册区域结束 -->
            </div>
        </div>

        <!-- 导入layui的js -->
        <script src="./assets/lib/layui/layui.all.js"></script>
        <!-- 导入jq -->
        <script src="./assets/lib/jquery.js"></script>
        <!-- 导入初始化路径js文件 -->
        <script src="./assets/js/baseAPI.js"></script>
        <!-- 导入自己的js -->
        <script src="./assets/js/login.js"></script>
    </body>
</html>

接下来就是login.css代码部分

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: url(../images/login_bg.jpg) no-repeat center;
    background-size: cover;
}
/* 头部logo区域 */
.loginAndRegbox {
    width: 400px;
    height: 310px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
/* 登录注册区域开始 */
.title-box {
    height: 60px;
    background: url(../images/login_title.png) no-repeat center;
}

.reg-box {
    display: none;
}

.layui-form {
    padding: 0 30px;
}

.links {
    display: flex;
    justify-content: flex-end;
}

.layui-form-item {
    position: relative;
}

.layui-icon {
    position: absolute;
    left: 10px;
    top: 10px;
}

.layui-input {
    padding-left: 32px;
}
/* 登录注册区域结束 */

接下来就是login.js代码部分

$(function () {
    // 登录注册切换
    $('#link_reg').on('click', function () {
        $('.reg-box').show()
        $('.login-box').hide()
    })
    $('#link_login').on('click', function () {
        $('.login-box').show()
        $('.reg-box').hide()
    })

    // 自定义验证规则
    var form = layui.form
    form.verify({
        // 密码验证
        pwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],

        // 验证两次密码输入是否一致
        repwd: function (value) {
            var pwd = $('.reg-box [name=password]').val()
            if (value !== pwd) {
                return '两次密码输入不一致!'
            }
        },
    })

    // 监听注册表单提交事件
    $('#form_reg').on('submit', function (e) {
        e.preventDefault()

        var layer = layui.layer
        var data = {
            username: $('#form_reg [name=username]').val(),
            password: $('#form_reg [name=password]').val(),
            repassword: $('#form_reg [name=repassword]').val(),
        }

        $.ajax({
            method: 'POST',
            url: '/api/reg',
            data: data,
            success: function (res) {
                if (res.code !== 0) {
                    return layer.msg(res.message)
                }
                layer.msg('注册成功!')

                // 模拟人工点击
                $('#link_login').click()
            },
        })
    })

    // 监听登录表单提交事件
    $('#form_login').on('submit', function (e) {
        e.preventDefault()

        $.ajax({
            method: 'POST',
            url: '/api/login',
            data: $(this).serialize(),
            success: function (res) {
                if (res.code !== 0) {
                    return layer.msg('登录失败!')
                }

                layer.msg('登录成功!')

                localStorage.setItem('token', res.token)

                // 登录成功跳转网页
                location.href = 'index.html'
            },
        })
    })
})

因为在进行接口请求的时候，还会有大量的根路径要写，所以为了减少代码量以及后期维护，我们需要把ajax的url部分要进行一下ajax请求时的ajaxPrefilter函数封装，baseAPI.js代码是如下部分：

$.ajaxPrefilter(function (options) {
    // 在发起真正的ajax请求之前，统一请求的根路径
    options.url = 'http://www.baidu.top:3008' + options.url
    // 以上的接口根目录地址http://www.baidu.top:3008换成自己的接口就可以了
})

以上就是完成注册登录功能页面的基本代码了！