|
|
<!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>
|
