80 lines
2.7 KiB
HTML
80 lines
2.7 KiB
HTML
|
{% load static %}
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<link rel="stylesheet" href="{% static 'css/style.css' %}">
|
||
|
|
<script src="{% static '/js/jquery.js' %}"></script>
|
||
|
|
<script src="{% static '/js/layui/layui.js' %}"></script>
|
||
|
|
<script src="{% static '/js/qs.js' %}"></script>
|
||
|
|
<script src="{% static '/js/axios.js' %}"></script>
|
||
|
|
<title>管理员登陆</title>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<section>
|
||
|
|
<!-- 背景颜色 -->
|
||
|
|
<div class="color"></div>
|
||
|
|
<div class="color"></div>
|
||
|
|
<div class="color"></div>
|
||
|
|
<div class="box">
|
||
|
|
<!-- 背景圆 -->
|
||
|
|
<div class="circle" style="--x:0"></div>
|
||
|
|
<div class="circle" style="--x:1"></div>
|
||
|
|
<div class="circle" style="--x:2"></div>
|
||
|
|
<div class="circle" style="--x:3"></div>
|
||
|
|
<div class="circle" style="--x:4"></div>
|
||
|
|
<!-- 登录框 -->
|
||
|
|
<div class="container">
|
||
|
|
<div class="form">
|
||
|
|
<h2>管理员登陆</h2>
|
||
|
|
<form class="layui-form">
|
||
|
|
<div class="inputBox">
|
||
|
|
<input type="text" name="username" placeholder="用户名">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="inputBox">
|
||
|
|
<input type="password" name="password" placeholder="密码">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="inputBox">
|
||
|
|
<input type="submit" lay-submit lay-filter="login" value="登录">
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
layui.use(['form', 'layer'], function(){
|
||
|
|
var form = layui.form,
|
||
|
|
layer = layui.layer;
|
||
|
|
|
||
|
|
// 监听提交
|
||
|
|
form.on('submit(login)', function(data){
|
||
|
|
axios.post('/admin/', data.field)
|
||
|
|
.then(function (response) {
|
||
|
|
// 登录成功
|
||
|
|
if(response.data.status === 'success'){
|
||
|
|
layer.msg('登录成功', {icon: 1, time: 1000}, function(){
|
||
|
|
window.location.href = 'admin_dashboard/'
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
// 登录失败
|
||
|
|
layer.msg(response.data.message, {icon: 2});
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch(function (error) {
|
||
|
|
console.error(error);
|
||
|
|
layer.msg('登录请求失败', {icon: 2});
|
||
|
|
});
|
||
|
|
|
||
|
|
return false; // 阻止表单跳转
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</html>
|