<!DOCTYPE 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"> <!-- 设置视口属性，使页面在移动设备上显示良好 -->
<!-- 最新版本的 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 核心 JavaScript 文件 -->
<!-- 可选的 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">
<link rel="stylesheet" href="./public/css/animate.css"> <!-- 引入动画效果的CSS文件 -->
<link rel="stylesheet" href="./public/css/login.css" /> <!-- 引入自定义的登录页面样式表 -->
<style>
button:hover{
background-color:#ffd6e7; /* 鼠标悬停在按钮上时的背景颜色 */
}
</style>
</head>
<body>
<div class="container main"> <!-- 主容器 -->
<div id="login" class="contain animated fadeInDown"> <!-- 登录表单容器，添加了动画效果 -->
<h1>借阅者登录</h1> <!-- 页面标题 -->
<form method="post"> <!-- 登录表单，使用POST方法提交数据 -->
<input type="text" name="user" class="form-control my_input" placeholder="请输入账号" required="required"> <!-- 用户名输入框 -->
<input type="password" name="psw" class="form-control my_input" placeholder="请输入密码" required="required"> <!-- 密码输入框 -->
<input type="submit" class="form-control" value="登录" onclick="javascript:void(0);"><!-- 提交按钮 -->
</form>
</div>
</div>
<div style="position:fixed; bottom:0; right:0;"> <!-- 固定位置的链接容器 -->
<a href="loginManager.html" target="_blank"><img width="50px" height="50px"></a><br> <!-- 跳转到管理员登录页面的链接 -->
<a href="adminLogin.html" target="_blank"><img width="50px" height="50px"></a> <!-- 跳转到管理员登录页面的链接 -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入jQuery库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script> <!-- 引入Layer弹窗插件 -->
<script>
$(function(){
// 登录操作
$("input[type=submit]").click(function(){
$.ajax({
url: "./readerLogin", // 请求的URL地址
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(){
location.href = data.url; // 跳转到指定URL
});
} else { // 如果返回的code不为0，表示登录失败
layer.open({
title: "登录失败", // 弹窗标题
content: data.msg, // 弹窗内容为返回的错误信息
icon: 5, // 图标类型为哭脸
anim: 6 // 动画效果
});
}
}
});
return false; // 阻止表单默认提交行为
});
});
</script>
</body>
</html>