登录页面制作

于 2022-05-20 15:50:51 发布
阅读量6.7k 收藏 58
点赞数 10
分类专栏： 前端 文章标签： html5 css css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiuBi_251/article/details/124883342
版权

目录

一、绘制login页面的基本结构

1、编写HTML结构

2、编写样式

二、实现登录和注册页面的切换

1、编写HTML结构

2、编写样式

3、实现切换功能

三、绘制登录表单的基本结构

1、编写HTML结构

2、编写CSS样式

四、绘制注册表单的基本结构

1、编写HTML结构

2、编写CSS样式

五、实现登录表单验证

六、发起注册用户的Ajax请求

七、发起登录的Ajax请求 

 八、在ajaxPrefilter中统一拼接请求的根路径

九、代码总结

1、HTML

2、CSS

3、JS

4、其它

一、绘制login页面的基本结构

1、编写HTML结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大事件-登录/注册</title>
    <!-- 导入 LayUI 的样式 -->
    <link rel="stylesheet" href="css/layui.css" />
    <!-- 导入自己的样式表 -->
    <link rel="stylesheet" href="css/login.css" />
  </head>
  <body>
    <!-- 登录注册区域 -->
    <div class="loginAndRegBox">
      <div class="title-box">登录</div>
    </div>
  </body>
</html>

LayUI是一个开源模块化前端 UI 组件库，具体网站为https://layuion.cpm/，相关文件可以去网站里面下载。

这里只是绘制出了相关页面结构，还没有将功能模块化。

2、编写样式

这里只是调用开源模块化前端 UI 组件库中的样式，所有结构样式少一点

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: url(../images/bg.jpg) no-repeat center;  // 这里的图片地址需要更改
  background-size: cover;
}
.loginAndRegBox {
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  text-align: center;
  background: #00000090;
  padding: 20px 50px;
}
.loginAndRegBox .title-box {
  height: 68px;
  text-align: center;
  line-height: 68px;
  font-size: 30px;
  color: #fff;
}

二、实现登录和注册页面的切换

1、编写HTML结构

在这里将登录和注册的页面和表单<form>的结构写入，再加入切换按钮。

<!-- 登录注册区域 -->
    <div class="loginAndRegBox">
      <div class="title-box">登录</div>
      <!-- 登录的div -->
      <div class="login-box">
        <form>
             <div class="layui-form-item links">
                    <a href="javascript:;" id="link_reg">注册账号</a>
             </div>
        </form>
      </div>
      <!-- 注册的div -->
      <div class="reg-box">
        <form>
             <div class="layui-form-item links">
                    <a href="javascript:;" id="link_login">去登录</a>
             </div>
        </form>
      </div>
    </div>

2、编写样式

在此要将注册页面隐藏起来，不能要两个页面同时显示出来。

.reg-box {
  display: none;
}

.links a {
  font-size: 12px;
  color: #fff;
}

3、实现切换功能

通过jQuery中的触发点击事件和效果中的hide()隐藏和shoe()显示，完成登录和注册功能的切换。记得加一个$(function){}入口函数。

$(function() {
  // 点击“去注册账号”的链接
  $('#link_reg').on('click', function() {
    $('.login-box').hide();
    $('.reg-box').show();
  })

  // 点击“去登录”的链接
  $('#link_login').on('click', function() {
    $('.login-box').show();
    $('.reg-box').hide();
  })
})

三、绘制登录表单的基本结构

1、编写HTML结构

通过开源模块化前端 UI 组件库中调出结构样式，快速完成结构搭建

<!-- 登录注册页面 -->
    <div class="loginAndRegBox">
        <div class="title-box">登录</div>
        <!-- 登录div -->
        <div class="login-box">
            <form class="layui-form" id="form_login">
                <!-- 用户名 -->
                <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">
                    <button class="layui-btn layui-btn-fluid layui-btn-normal" id="btn" lay-submit
                        lay-filter="formDemo">登录</button>
                </div>
                <div class="layui-form-item links">
                    <a href="javascript:;" id="link_reg">注册账号</a>
                </div>
            </form>
        </div>

2、编写CSS样式

.loginAndRegBox .login-box .layui-form{
  padding: 0 30px;
}
.loginAndRegBox .login-box .layui-form .layui-form-item{
  position: relative;
}
.login-box .layui-form .layui-form-item .layui-icon{
  position: absolute;
  left: 10px;
  top: 10px;
}
.login-box .layui-form .layui-form-item .layui-input{
  width: 330px;
  font-size: 18px;
  border: 0;
  border-bottom: 2px solid #fff;
  padding: 5px 32px;
  background: #ffffff00;
  color: #fff;
}
.layui-form .layui-form-item #btn{
  margin-top: 15px;
  width: 180px;
  height: 40px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background-image: linear-gradient(to right, #db3125 0%, #578bc3 100%);
  border: 0;
  border-radius: 20px;
}
.layui-form .links,{
  display: flex;
  justify-content: flex-end;
}

四、绘制注册表单的基本结构

1、编写HTML结构

<!-- 注册div -->
        <div class="reg-box">
            <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" id="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" id="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|pwd|repwd"
                        placeholder="请再次输入密码" autocomplete="off" class="layui-input">
                </div>
                <!-- 按钮 -->
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit lay-filter="formDemo"
                        id="btn">注册</button>
                </div>
                <div class="layui-form-item links">
                    <a href="javascript:;" id="link_login">去登录</a>
                </div>
        </div>
    </div>

2、编写CSS样式

注册表单和登录表单的类名一致，所有这里就不需要重新编写表单样式

五、实现登录表单验证

  1. 导入 layui 的 js 文件：

    <script src="js/layui.all.js"></script>

  2. 为需要验证的表单项添加 lay-verify 属性，同时指定具体的校验规则即可。

  3. 从 layui 中获取 form 对象：

    var form = layui.form;

  4. 通过 form.verify() 函数自定义校验规则：

    form.verify({
    // 自定义了一个叫做 pwd 校验规则
    pwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
    // 校验两次密码是否一致的规则
    repwd: function(value) {
      // 通过形参拿到的是确认密码框中的内容
      // 还需要拿到密码框中的内容
      // 然后进行一次等于的判断
      // 如果判断失败,则return一个提示消息即可
      var pwd = $('.reg-box [name=password]').val();
      if (pwd !== value) {
        return '两次密码不一致！';
      }
    }
  })

  5. 按需为表单项添加校验规则：

    <input type="password" name="repassword" required lay-verify="required|pwd|repwd" placeholder="再次确认密码" autocomplete="off" class="layui-input" />

    六、发起注册用户的Ajax请求

    6、为注册表单添加Id：

    <!-- 注册的表单 -->
<form class="layui-form" id="form_reg"></form>

    7、监听提交事件：

    // 监听注册表单的提交事件  
$('#form_reg').on('submit', function(e) {    
    // 1. 阻止默认的提交行为    
    e.preventDefault();    
    // 2. 发起Ajax的POST请求    
    var data = {      
        username: $('#form_reg [name=username]').val(),      
        password: $('#form_reg [name=password]').val()    
    };    
    $.post('http://ajax.frontend.itheima.net/api/reguser', data, function(res) {      
        if (res.status !== 0) {        
            return layer.msg(res.message);      
        }   
        layer.msg('注册成功，请登录！');      
        // 模拟人的点击行为      
        $('#link_login').click();    
    })  
})

    注意：这里的接口记得更改为自己的。

七、发起登录的Ajax请求 

        8、为登录表单添加id：

<form class="layui-form" id="form_login"></form>

        9、监听提交事件： 

// 监听登录表单的提交事件
  $('#form_login').submit(function(e) {
    // 阻止默认提交行为
    e.preventDefault();
    $.ajax({
      url: '/api/login',
      method: 'POST',
      // 快速获取表单中的数据
      data: $(this).serialize(),
      success: function(res) {
        if (res.status !== 0) {
          return layer.msg('登录失败！');
        }
        layer.msg('登录成功！');
        // 将登录成功得到的 token 字符串，保存到 localStorage 中
        localStorage.setItem('token', res.token);
        // 跳转到后台主页
        location.href = '/index.html';
      }
    })
  })

 八、在ajaxPrefilter中统一拼接请求的根路径

        10、在 js 目录中新建 baseAPI.js

   11、编写代码：

// 注意：每次调用 $.get() 或 $.post() 或 $.ajax() 的时候，
// 会先调用 ajaxPrefilter 这个函数
// 在这个函数中，可以拿到我们给Ajax提供的配置对象
$.ajaxPrefilter(function(options) {
  // 在发起真正的 Ajax 请求之前，统一拼接请求的根路径
  options.url = 'http://ajax.frontend.itheima.net' + options.url;
})

九、代码总结

1、HTML

<!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/css/login.css">
    <!-- 导入LayUI样式表 -->
    <link rel="stylesheet" href="./assets/lib/layui/css/layui.css">
</head>

<body>
    <!-- 登录注册页面 -->
    <div class="loginAndRegBox">
        <div class="title-box">登录</div>
        <!-- 登录div -->
        <div class="login-box">
            <form class="layui-form" id="form_login">
                <!-- 用户名 -->
                <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">
                    <button class="layui-btn layui-btn-fluid layui-btn-normal" id="btn" lay-submit
                        lay-filter="formDemo">登录</button>
                </div>
                <div class="layui-form-item links">
                    <a href="javascript:;" id="link_reg">注册账号</a>
                </div>
            </form>
        </div>
        <!-- 注册div -->
        <div class="reg-box">
            <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" id="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" id="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|pwd|repwd"
                        placeholder="请再次输入密码" autocomplete="off" class="layui-input">
                </div>
                <!-- 按钮 -->
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit lay-filter="formDemo"
                        id="btn">注册</button>
                </div>
                <div class="layui-form-item links">
                    <a href="javascript:;" id="link_login">去登录</a>
                </div>
        </div>
    </div>

    <!-- 导入Layui的JS -->
    <script src="./assets/lib/layui/layui.all.js"></script>

    <!-- 导入jQuery -->
    <script src="./assets/lib/jquery.js"></script>
    <!-- 导入自己的JS样式 -->
    <script src="./assets/js/login.js"></script>
</body>

</html>

2、CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: url(../images/bg.jpg) no-repeat center;
  background-size: cover;
}
.loginAndRegBox {
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30%;
  text-align: center;
  background: #00000090;
  padding: 20px 50px;
}
.loginAndRegBox .title-box {
  height: 68px;
  text-align: center;
  line-height: 68px;
  font-size: 30px;
  color: #fff;
}
.loginAndRegBox .login-box .layui-form,
.loginAndRegBox .reg-box .layui-form {
  padding: 0 30px;
}
.loginAndRegBox .login-box .layui-form .layui-form-item,
.loginAndRegBox .reg-box .layui-form .layui-form-item {
  position: relative;
}
.loginAndRegBox .login-box .layui-form .layui-form-item .layui-icon,
.loginAndRegBox .reg-box .layui-form .layui-form-item .layui-icon {
  position: absolute;
  left: 10px;
  top: 10px;
}
.loginAndRegBox .login-box .layui-form .layui-form-item .layui-input,
.loginAndRegBox .reg-box .layui-form .layui-form-item .layui-input {
  width: 330px;
  font-size: 18px;
  border: 0;
  border-bottom: 2px solid #fff;
  padding: 5px 32px;
  background: #ffffff00;
  color: #fff;
}
.loginAndRegBox .login-box .layui-form .layui-form-item #btn,
.loginAndRegBox .reg-box .layui-form .layui-form-item #btn {
  margin-top: 15px;
  width: 180px;
  height: 40px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background-image: linear-gradient(to right, #db3125 0%, #578bc3 100%);
  border: 0;
  border-radius: 20px;
}
.loginAndRegBox .login-box .layui-form .links,
.loginAndRegBox .reg-box .layui-form .links {
  display: flex;
  justify-content: flex-end;
}
.loginAndRegBox .login-box .layui-form .links a,
.loginAndRegBox .reg-box .layui-form .links a {
  font-size: 12px;
  color: #fff;
}
.loginAndRegBox .reg-box {
  display: none;
}

3、JS

$(function () {
    // 点击“去注册账号”的链接
    $('#link_reg').on('click', function () {
        $('.login-box').hide();
        $('.reg-box').show();
    })

    // 点击“去登录”的链接
    $('#link_login').on('click', function () {
        $('.login-box').show();
        $('.reg-box').hide();
    })

    // 从 layui 中获取 form 对象
    var form = layui.form;
    var layer = layui.layer;
    // 通过 form.verify() 函数自定义校验规则
    form.verify({
        // 自定义了一个叫做 pwd 校验规则
        pwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
        // 校验两次密码是否一致的规则
        repwd: function (value) {
            // 通过形参拿到的是确认密码框中的内容
            // 还需要拿到密码框中的内容
            // 然后进行一次等于的判断
            // 如果判断失败,则return一个提示消息即可
            var pwd = $('.reg-box [name=password]').val();
            if (pwd !== value) {
                return '两次密码不一致！'
            }
        }
    })

    // 监听注册表单的提交事件
    $('#form_reg').on('submit', function (e) {
        // 1. 阻止默认的提交行为
        e.preventDefault()
        // 2. 发起Ajax的POST请求
        var data = {
            username: $('#form_reg [name=username]').val(),
            password: $('#form_reg [name=password]').val()
        }
        $.post('http://www.liulongbin.top:3007/api/reguser', data, function (res) {
            if (res.status !== 0) {
                return layer.msg(res.message)
            }
            layer.msg('注册成功，请登录！')
            // 模拟人的点击行为
            $('#link_login').click()
        })
    })

    // 监听登录表单的提交事件
    $('#form_login').submit(function (e) {
        // 阻止默认提交行为
        e.preventDefault()
        $.ajax({
            url: 'http://www.liulongbin.top:3007/api/login',
            method: 'POST',
            // 快速获取表单中的数据
            data: $(this).serialize(),
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg('登录失败！')
                }
                layer.msg('登录成功！')
                // 将登录成功得到的 token 字符串，保存到 localStorage 中
                localStorage.setItem('token', res.token)
                // 跳转到后台主页
                location.href = './index.html'
            }
        })
    })
})

4、其它

除了这些，还要导入layui.css , layui.all.js , jquery.js 外部样式。

化华桦
关注
  • 10
    点赞
  • 踩
  • 58
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值