目录
一、绘制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样式
注册表单和登录表单的类名一致,所有这里就不需要重新编写表单样式
五、实现登录表单验证
-
导入 layui 的 js 文件:
<script src="js/layui.all.js"></script>
-
为需要验证的表单项添加
lay-verify
属性,同时指定具体的校验规则即可。 -
从 layui 中获取 form 对象:
var form = layui.form;
-
通过 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 '两次密码不一致!'; } } })
-
按需为表单项添加校验规则:
<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 外部样式。