183 lines
6.0 KiB
HTML
183 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>简洁登录页面</title>
|
|
<link rel="stylesheet" href="/layui/css/layui.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
background: linear-gradient(135deg, #1E9FFF 0%, #0081FF 100%);
|
|
height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 15px;
|
|
}
|
|
.login-container {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
}
|
|
.login-box {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
|
|
overflow: hidden;
|
|
}
|
|
.login-header {
|
|
background: linear-gradient(135deg, #1E9FFF 0%, #0081FF 100%);
|
|
color: white;
|
|
padding: 30px 20px;
|
|
text-align: center;
|
|
}
|
|
.login-header h2 {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
}
|
|
.login-body {
|
|
padding: 30px 25px;
|
|
}
|
|
.layui-form-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
.layui-input {
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
}
|
|
.layui-btn {
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
background-color: #1E9FFF;
|
|
}
|
|
.login-footer {
|
|
padding: 0 25px 25px;
|
|
text-align: center;
|
|
}
|
|
.login-footer a {
|
|
color: #1E9FFF;
|
|
text-decoration: none;
|
|
}
|
|
.login-footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.response-message {
|
|
margin-top: 15px;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
display: none;
|
|
}
|
|
.success {
|
|
background-color: #f0f9eb;
|
|
color: #67c23a;
|
|
border: 1px solid #e1f3d8;
|
|
}
|
|
.error {
|
|
background-color: #fef0f0;
|
|
color: #f56c6c;
|
|
border: 1px solid #fbc4c4;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="login-container">
|
|
<div class="login-box">
|
|
<div class="login-header">
|
|
<h2>Miss下载器</h2>
|
|
</div>
|
|
<div class="login-body">
|
|
<form class="layui-form" id="loginForm">
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-wrap">
|
|
<input type="text" name="username" placeholder="用户名" autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-wrap">
|
|
<input type="password" name="password"placeholder="密码" autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="login">登录</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="response-message" id="responseMessage"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/layui/layui.js"></script>
|
|
<script>
|
|
layui.use(['form', 'layer'], function(){
|
|
var form = layui.form;
|
|
var layer = layui.layer;
|
|
var $ = layui.$;
|
|
|
|
// 表单提交
|
|
form.on('submit(login)', function(data){
|
|
var field = data.field;
|
|
var responseMessage = document.getElementById('responseMessage');
|
|
|
|
// 显示加载状态
|
|
layer.msg('登录中...');
|
|
|
|
// AJAX请求获取token
|
|
$.ajax({
|
|
url: '/api/login',
|
|
type: 'POST',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({
|
|
username: field.username,
|
|
password: field.password
|
|
}),
|
|
success: function(response) {
|
|
layer.closeAll(); // 关闭加载提示
|
|
|
|
if (response && response.data.token) {
|
|
// 登录成功
|
|
responseMessage.className = 'response-message success';
|
|
responseMessage.style.display = 'block';
|
|
localStorage.setItem('Authorization', response.data.token);
|
|
window.location.href = '/home.html';
|
|
} else {
|
|
// 登录失败
|
|
responseMessage.className = 'response-message error';
|
|
responseMessage.innerHTML = '登录失败：' + (response.message || '未知错误');
|
|
responseMessage.style.display = 'block';
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
layer.closeAll(); // 关闭加载提示
|
|
|
|
// 显示错误信息
|
|
responseMessage.className = 'response-message error';
|
|
|
|
if (xhr.status === 401) {
|
|
responseMessage.innerHTML = '登录失败：用户名或密码错误';
|
|
} else if (xhr.status === 0) {
|
|
responseMessage.innerHTML = '网络错误：无法连接到服务器';
|
|
} else {
|
|
var errorMsg = xhr.responseJSON && xhr.responseJSON.message ?
|
|
xhr.responseJSON.message :
|
|
'服务器错误 (' + xhr.status + ')';
|
|
responseMessage.innerHTML = '登录失败：' + errorMsg;
|
|
}
|
|
|
|
responseMessage.style.display = 'block';
|
|
}
|
|
});
|
|
|
|
return false; // 阻止表单跳转
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |