|
|
<!DOCTYPE html> // 声明文档类型为HTML5
|
|
|
<html> // HTML文档开始
|
|
|
<head>
|
|
|
<meta charset="UTF-8"> // 设置页面的字符编码为UTF-8
|
|
|
<title>登录页面</title> // 设置页面标题为“登录页面”
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> // 设置视口，确保在移动设备上有良好的显示效果
|
|
|
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> // 引入jQuery库（通过CDN）
|
|
|
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> // 引入Bootstrap的CSS样式文件
|
|
|
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> // 引入Bootstrap的JS文件
|
|
|
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> // 引入Bootstrap的主题样式文件
|
|
|
<link rel="stylesheet" href="./public/css/animate.css"> // 引入animate.css，提供CSS动画效果
|
|
|
<link rel="stylesheet" href="./public/css/login.css" /> // 引入自定义的登录页面样式文件
|
|
|
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="container main"> //使用Bootstrap的container类，设置容器
|
|
|
<div id="login" class="contain animated fadeInDown"> // 设置登录框，包含动画效果（从上方渐入）
|
|
|
<h1>系统管理员登录</h1> // 显示标题“系统管理员登录”
|
|
|
<form method="post"> // 表单使用POST方法提交
|
|
|
<input type="text" name="username" class="form-control my_input" placeholder="请输入账号" required="required"> // 输入框，要求用户输入账号，使用form-control样式
|
|
|
<input type="password" name="password" class="form-control my_input" placeholder="请输入密码" required="required"> // 输入框，要求用户输入密码，使用form-control样式
|
|
|
<input type="submit" class="form-control" value="登录" onclick="javascript:void(0);"> // 提交按钮，点击时调用JS函数（不会刷新页面）
|
|
|
</form>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="position:fixed; bottom:0; right:0;"> // 设置固定位置，位于页面底部右侧
|
|
|
<a href="loginReader.html" target="_blank"><img src="public/image/reader.png" width="50px" height="50px"></a><br> // 链接到“读者登录”页面，显示图片图标
|
|
|
<a href="loginManager.html" target="_blank"><img src="public/image/manager.png" width="50px" height="50px"></a> // 链接到“管理员登录”页面，显示图片图标
|
|
|
</div>
|
|
|
<script src="./public/js/layer/layer.js"></script> // 引入layer.js，用于弹窗提示
|
|
|
<script>
|
|
|
$(function(){ // 使用jQuery，等待DOM加载完成
|
|
|
//登录
|
|
|
$("input[type=submit]").click(function(){ // 监听提交按钮的点击事件
|
|
|
$.ajax({ // 使用AJAX发送请求
|
|
|
url: "./adminLogin", // 提交的URL地址为“adminLogin”
|
|
|
type: "post", // 请求方式为POST
|
|
|
data: $("form").serialize(), // 序列化表单数据，发送到后端
|
|
|
dataType: "json", // 设置返回的数据类型为JSON
|
|
|
success: function( data ){ // 请求成功时的回调函数
|
|
|
if(data.code == 0){ // 如果返回的code为0，表示登录成功
|
|
|
layer.msg("登录成功", { // 弹出登录成功提示
|
|
|
icon: 6, // 设置提示图标为“成功”图标
|
|
|
time: 1000 // 显示时间为1秒
|
|
|
}, function(){ // 在成功提示后，跳转到指定的URL
|
|
|
location.href = data.url;
|
|
|
})
|
|
|
}else{ // 如果登录失败
|
|
|
layer.open({ // 弹出登录失败提示
|
|
|
title: "登录失败", // 设置提示框标题
|
|
|
content: data.msg, // 显示返回的错误消息
|
|
|
icon: 5, // 设置提示图标为“错误”图标
|
|
|
anim: 6 // 设置提示框的动画效果
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
return false; // 阻止表单的默认提交行为
|
|
|
})
|
|
|
})
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
