页面
<html class="loginHtml">
<head>
<meta charset="utf-8">
<title>登录页</title>
<meta name="renderer" content="webkit">
<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="icon" href="../../favicon.ico">
<link rel="stylesheet" href="../../layui/css/layui.css" media="all" />
</head>
<body class="loginBody">
<form class="layui-form">
<div class="user-login-header">
<img src='../../images/logo.png'>
<p>后台系统</p>
</div>
<div class="layui-form">
<div class="layui-form-item input-item">
<label for="userName">用户名</label>
<input id="loginUsername" type="text" name="username" placeholder="请输入用户名" class="layui-input"
lay-verify="required" autocomplete="off">
</div>
<div class="layui-form-item input-item">
<label for="password">密码</label>
<input id="loginPassword" type="password" name="password" placeholder="请输入密码" class="layui-input"
lay-verify="required" autocomplete="off">
</div>
<div class="layui-form-item form_code">
<div class="layui-row layui-col-space10">
<div class="layui-col-xs7">
<div class="layui-form-item input-item">
<label for="userName layui-icon-username">验证码</label>
<input id="loginCard" type="text" placeholder="请输入验证码" name="card" class="layui-input"
autocomplete="off">
</div>
</div>
<div class="layui-col-xs5">
<input id="loginCode" class="layui-input user-login-codeimg" type="button">
</div>
</div>
</div>
<div class="layui-form-item" style="margin-bottom: 20px;">
<input type="checkbox" name="remember" id="remember" lay-skin="primary" title="记住密码">
<div class="layui-form-checkbox" lay-skin="primary"><span>记住密码</span><i
class="layui-icon layui-icon-ok"></i></div>
</div>
<div class="layui-form-item">
<input id="loginBtn" type="button" class="layui-btn layui-btn-fluid" value="登录"></input>
</div>
</div>
</form>
<script type="text/javascript" src="../../layui/layui.js"></script>
<script type="text/javascript" src="../../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery.cookie.js"></script>
<script type="text/javascript" src="login.js"></script>
</body>
</html>
login.js
layui.use(['form', 'jquery'], function () {
var $ = layui.jquery;
form = layui.form,
$(function () {
// 页面初始化生成验证码
window.onload = createCode('#loginCode')
// 验证码切换
$('#loginCode').on('click', function () {
createCode('#loginCode')
});
// 登录事件
$('#loginBtn').on('click', function () {
login()
});
// 注册事件
$('#loginRegister').on('click', function () {
register()
});
// 退出登录事件
$('.signOut').click(function () {
logout();
});
// 页面初始化Cookie
window.onload = getCookie()
});
//表单输入效果
$(".loginBody .input-item").click(function (e) {
e.stopPropagation();
$(this).addClass("layui-input-focus").find(".layui-input").focus();
})
$(".loginBody .layui-form-item .layui-input").focus(function () {
$(this).parent().addClass("layui-input-focus");
})
$(".loginBody .layui-form-item .layui-input").blur(function () {
$(this).parent().removeClass("layui-input-focus");
if ($(this).val() != '') {
$(this).parent().addClass("layui-input-active");
} else {
$(this).parent().removeClass("layui-input-active");
}
})
// 生成验证码
function createCode(codeID) {
var code = "";
// 验证码长度
var codeLength = 4;
// 验证码dom元素
var checkCode = $(codeID);
// 验证码随机数
var random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
];
for (var i = 0; i < codeLength; i++) {
// 随机数索引
var index = Math.floor(Math.random() * 36);
code += random[index];
}
// 将生成的随机验证码赋值
checkCode.val(code);
}
// 校验验证码、用户名、密码
function validateCode(inputID, codeID) {
var inputCode = $(inputID).val().toUpperCase();
var cardCode = $(codeID).val();
var loginUsername = $('#loginUsername').val();
var loginPassword = $('#loginPassword').val();
if ($.trim(loginUsername) == '' || $.trim(loginUsername).length <= 0) {
layer.alert("用户名不能为空");
return false;
}
if ($.trim(loginPassword) == '' || $.trim(loginPassword).length <= 0) {
layer.alert("密码不能为空");
return false;
}
if (inputCode.length <= 0) {
layer.alert("验证码不能为空");
return false;
}
if (inputCode != cardCode) {
layer.alert("请输入正确验证码");
return false;
}
return true;
}
//设置cookie
function setCookie() {
var loginCode = $("#loginUsername").val(); //获取用户名信息
var pwd = $("#loginPassword").val(); //获取登录密码信息
var checked = $("input[type='checkbox']").is(':checked'); //获取“是否记住密码”复选框
//console.log("setCookie方法是否记住密码:"+checked);
if (checked) { //判断是否选中了“记住密码”复选框
//设置cookie过期时间
// var date = new Date();
// date.setTime(date.getTime() + 60 * 1000); //只能这么写,60表示60秒钟
//console.log("cookie过期时间:"+date);
$.cookie("login_code", loginCode, {
expires: 7,
path: '/'
}); //调用jquery.cookie.js中的方法设置cookie中的用户名
$.cookie("pwd", pwd, {
expires: 7,
path: '/'
}); //调用jquery.cookie.js中的方法设置cookie中的登陆密码,并使用base64(jquery.base64.js)进行加密
} else {
$.cookie("login_code", null);
$.cookie("pwd", null);
}
}
//清除所有cookie函数
function clearAllCookie() {
var date = new Date();
date.setTime(date.getTime() - 10000);
var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
// console.log("需要删除的cookie名字:" + keys);
if (keys) {
for (var i = keys.length; i--;)
document.cookie = keys[i] + "=0; expire=" + date.toGMTString() + "; path=/";
}
}
//获取cookie
function getCookie() {
var loginCode = $.cookie("login_code"); //获取cookie中的用户名
var pwd = $.cookie("pwd"); //获取cookie中的登陆密码
// console.log("获取cookie:账户:" + loginCode);
// console.log("获取cookie:密码:" + pwd);
if (!loginCode || loginCode == 0) {
// console.log("账户:" + !loginCode);
// alert("请输出内容!");
} else {
$("#loginUsername").val(loginCode);
}
if (!pwd || pwd == 0) {
// console.log("密码:" + !pwd);
} else {
//密码存在的话把密码填充到密码文本框
//console.log("密码解密后:"+$.base64.decode(pwd));
$("#loginPassword").val(pwd);
//密码存在的话把“记住用户名和密码”复选框勾选住
$("[name='remember']").attr("checked", "true");
}
form.render();
}
function login() {
//判断是否选中复选框,如果选中,添加cookie
var rememberPwd = $("input[type='checkbox']").is(':checked');
// console.log("是否记住密码:" + rememberPwd);
if (rememberPwd) {
//添加cookie
setCookie();
} else {
clearAllCookie();
}
netWorking(loginUsername, loginPassword); //联网上传账号密码
}
// 登录流程
function netWorking(loginUsername, loginPassword) {
if (!validateCode('#loginCard', '#loginCode')) {
//阻断提示
} else {
var loginUsername = $('#loginUsername').val();
var loginPassword = $('#loginPassword').val();
var params = {};
params.username = loginUsername;
params.password = loginPassword;
$.ajax({
type: 'post',
url:,
data: JSON.stringify(params),
contentType: 'application/json',
success: function (data) {
if (typeof (data.flag) === 'undefined') {
return;
}
if (!data.flag) {
layer.alert(data.message);
return;
}
layui.data('sdtoken', {
key: "token",
value: data.data.token
});
window.location.href = '/';
},
error: function () {
$('#loginBtn').val("登录");
}
});
}
}
})
//退出登录
function logout() {
$.ajax({
type: 'get',
url:,
data: {
"name": ""
},
contentType: 'application/json',
success: function (data) {
if (data.code == 999 || data.code == undefined) {
window.location.href = "page/login/login.html";
}
},
error: function (e) {
console.log("退出异常:" + e);
}
});
}