sunshine255/Ai_Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2.0

Browse Source
This commit is contained in:
Jane Doe
2024-09-25 12:18:07 +08:00
parent 3f369584fb
commit 9992293b9f
124 changed files with 2770 additions and 975 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
templates/admin/admin_login.html
View File

@@ -6,55 +6,82 @@
<link rel="stylesheet" href="https://file.guimiaokeji.com/layui/css/layui.css">
<style>
body {
background: linear-gradient(to right, #6a11cb, #2575fc);
background: linear-gradient(to right, #e0f7fa, #80deea);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Arial', sans-serif;
color: #fff;
color: #333;
}
.login-container {
width: 400px;
padding: 30px;
background: rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border-radius: 10px;
animation: fadeIn 1s ease-in-out;
border-radius: 20px;
backdrop-filter: blur(10px);
text-align: center;
animation: fadeIn 1s ease-in-out;
position: relative;
}
.login-container h2 {
text-align: center;
margin-bottom: 20px;
color: #fff;
color: #333;
}
.layui-btn {
width: 100%;
transition: background 0.3s ease;
}
.layui-btn:hover {
background: linear-gradient(45deg, #3b82ec, #2196f3);
background: #5cb85c;
}
.loading {
.loading-spinner {
z-index: 99999;
display: none;
border: 4px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top: 4px solid #5cb85c;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.captcha-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.captcha-container .layui-form-label {
flex: 0 0 90px; /* 确保验证码输入框的标签与其他字段一致 */
}
.captcha-container img {
height: 38px;
width: 100px;
cursor: pointer;
}
.captcha-input {
flex-grow: 1;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="login-container">
<h2>管理员登录</h2>
<div class="loading-spinner" id="loadingSpinner"></div>
<form class="layui-form" id="loginForm">
{% csrf_token %}
<div class="layui-form-item">
@@ -69,55 +96,59 @@
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" class="layui-input">
</div>
</div>
<div class="layui-form-item captcha-container">
<label class="layui-form-label">验证码</label>
<input type="text" name="captcha" required lay-verify="required" placeholder="请输入验证码" class="layui-input captcha-input">
<img src="{% url 'captcha_image' %}" alt="验证码" onclick="this.src='{% url 'captcha_image' %}?'+Math.random();">
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="login">登录</button>
</div>
<div id="error-msg" style="display: none;">
<p style="color: red;">用户名或密码错误</p>
</div>
<div class="loading">
<div class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 40px;"></div>
<p>登录中，请稍候...</p>
<button type="submit" class="layui-btn">登录</button>
</div>
</form>
</div>
<script src="https://file.guimiaokeji.com/layui/jquery-3.6.0.min.js"></script>
<script src="https://file.guimiaokeji.com/layui/layui.js"></script>
<script>
layui.use(['form', 'layer'], function() {
$(document).ready(function() {
var form = layui.form;
var $ = layui.jquery;
var layer = layui.layer;
form.on('submit(login)', function(data) {
document.querySelector('.loading').style.display = 'block';
document.getElementById('loginForm').style.display = 'none';
$('#loginForm').on('submit', function(event) {
event.preventDefault(); // 阻止默认提交行为
$('#loadingSpinner').show(); // 显示加载动画
const username = $('input[name="username"]').val();
const password = $('input[name="password"]').val();
const captcha = $('input[name="captcha"]').val();
$.ajax({
type: 'POST',
url: '{% url "admin_login" %}',
data: JSON.stringify(data.field),
url: '{% url "admin_login" %}', // 替换为实际的 URL
contentType: 'application/json',
data: JSON.stringify({ username, password, captcha }),
success: function(response) {
document.querySelector('.loading').style.display = 'none';
$('#loadingSpinner').hide(); // 隐藏加载动画
layer.msg(response.message); // 使用 Layer.js 显示消息
if (response.code === 200) {
layer.msg(response.message, {icon: 1, time: 2000}, function() {
window.location.href = '{% url "admin_home" %}';
});
} else {
document.getElementById('loginForm').style.display = 'block';
layer.msg(response.message, {icon: 2, time: 2000});
// 登录成功后跳转
setTimeout(function() {
window.location.href = '{% url "admin_home" %}'; // 替换为实际的 URL
}, 1000);
}else if (response.code === 400){
$('img[alt="验证码"]').attr('src', '{% url "captcha_image" %}?'+Math.random());
}
},
error: function(xhr, status, error) {
document.querySelector('.loading').style.display = 'none';
document.getElementById('loginForm').style.display = 'block';
layer.msg('登录失败，请稍后重试。', {icon: 2, time: 2000});
error: function(xhr) {
$('#loadingSpinner').hide(); // 隐藏加载动画
const response = xhr.responseJSON;
layer.msg(response.message); // 使用 Layer.js 显示错误消息
}
});
return false; // 阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
});
</script>
</body>
</html>