190 lines
8.1 KiB
Plaintext
190 lines
8.1 KiB
Plaintext
@{
|
||
Layout = null;
|
||
}
|
||
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<!-- 取消固定手机框架宽度980 -->
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||
|
||
<title>Login</title>
|
||
|
||
<!-- Vue.js -->
|
||
<script src="~/plugins/vue.js/vue_2.6.14.js"></script>
|
||
<!-- 引入样式 -->
|
||
@* <link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-2-s/element-ui/2.15.7/theme-chalk/index.min.css" type="text/css" rel="stylesheet" />*@
|
||
|
||
<!-- 引入组件库 -->
|
||
@* <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-2-s/element-ui/2.15.7/index.min.js" type="application/javascript"></script>*@
|
||
<!-- 引入样式 -->
|
||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||
<!-- 引入组件库 -->
|
||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||
<!-- jQuery -->
|
||
<script src="~/plugins/jQuery/jquery.min.js"></script>
|
||
<style>
|
||
/* 流动布局样式 */
|
||
.login-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100vh;
|
||
margin: 0;
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
<body style=" overflow: hidden; margin: 0; padding: 0;">
|
||
<h1 style="font-size: 22px; position: absolute; top: 12%; left: 50%; transform: translate(-50%, -50%); margin: 0;">MQTT</h1>
|
||
<div id="app" class="login-container">
|
||
<el-card class="box-card" style="width: 500px;">
|
||
<div slot="header" class="clearfix">
|
||
<span>登录</span>
|
||
</div>
|
||
<div>
|
||
<el-form ref="loginForm" :model="loginForm" label-width="85px">
|
||
<el-form-item label="账号">
|
||
<el-input style="width:88%" v-model="loginForm.username"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="密码">
|
||
<el-input style="width:88%" type="password" v-model="loginForm.password"></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
|
||
</el-form-item>
|
||
<el-form-item style="padding-left:0px">
|
||
<el-button style="width:77%" type="primary" @@click="handleLogin">登录</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
var app = new Vue({
|
||
el: '#app',
|
||
data() {
|
||
return {
|
||
loginForm: {
|
||
username: '',
|
||
password: '',
|
||
remember: true,
|
||
}
|
||
};
|
||
},
|
||
created: function () {
|
||
this.loadCredentials(); // 加载凭证
|
||
this.adjustLayout();
|
||
window.addEventListener('resize', this.adjustLayout);
|
||
document.addEventListener('keydown', this.handleGlobalEnter);
|
||
this.attemptAutoLogin(); // 尝试自动登录
|
||
},
|
||
beforeDestroy: function () {
|
||
window.removeEventListener('resize', this.adjustLayout);
|
||
document.removeEventListener('keydown', this.handleGlobalEnter);
|
||
},
|
||
methods: {
|
||
loadCredentials: function () {
|
||
var username = localStorage.getItem('username');
|
||
var password = localStorage.getItem('password');
|
||
var remember = localStorage.getItem('remember') == 'true';
|
||
var loginTime = localStorage.getItem('loginTime');
|
||
|
||
if (username && password && remember) {
|
||
this.loginForm.username = username;
|
||
this.loginForm.password = password;
|
||
this.loginForm.remember = remember;
|
||
}
|
||
},
|
||
handleLogin() {
|
||
var _this = this; // 保存 Vue 实例的引用
|
||
// 发送登录请求
|
||
$.ajax({
|
||
url: '/api/Login/Login', // 登录处理程序
|
||
type: 'POST',
|
||
data: {
|
||
user_name: _this.loginForm.username,
|
||
password: _this.loginForm.password
|
||
},
|
||
success: function (response) {
|
||
// 处理成功响应
|
||
if (response) {
|
||
_this.$message({
|
||
message: '登录成功！',
|
||
type: 'success'
|
||
});
|
||
// 如果用户选择了记住密码，将用户名和密码保存到localStorage
|
||
if (_this.loginForm.remember) {
|
||
localStorage.setItem('username', _this.loginForm.username);
|
||
localStorage.setItem('password', _this.loginForm.password);
|
||
localStorage.setItem('remember', 'true');
|
||
localStorage.setItem('loginTime', new Date().toString());
|
||
} else {
|
||
localStorage.removeItem('username');
|
||
localStorage.removeItem('password');
|
||
localStorage.setItem('remember', 'false');
|
||
}
|
||
|
||
// 跳转到 /home/Index 页面
|
||
setTimeout(function () {
|
||
window.location.href = '/Home/Index';
|
||
}, 666);
|
||
} else {
|
||
// 如果后端返回了错误信息，显示Message提示
|
||
_this.$message.error(response);
|
||
}
|
||
},
|
||
error: function (xhr, status, error) {
|
||
// 处理错误响应
|
||
_this.$message.error('登录失败！');
|
||
}
|
||
});
|
||
},
|
||
handleGlobalEnter: function (event) {
|
||
if (event.key === 'Enter') {
|
||
this.handleLogin();
|
||
}
|
||
},
|
||
adjustLayout: function () {
|
||
var width = window.innerWidth;
|
||
var loginContainer = document.querySelector('.login-container');
|
||
var boxCard = document.querySelector('.box-card');
|
||
var header = document.querySelector('h1');
|
||
|
||
if (width < 768) { // 默认768px以下为移动设备
|
||
// 调整登录容器的样式
|
||
loginContainer.style.flexDirection = 'column';
|
||
loginContainer.style.alignItems = 'flex-start';
|
||
|
||
boxCard.style.width = '99vw';
|
||
|
||
header.style.fontSize = '18px';
|
||
} else {
|
||
// 还原为原始样式
|
||
loginContainer.style.flexDirection = 'row';
|
||
loginContainer.style.alignItems = 'center';
|
||
|
||
boxCard.style.width = '500px';
|
||
header.style.fontSize = '22px';
|
||
}
|
||
},
|
||
attemptAutoLogin: function () {
|
||
var loginTime = localStorage.getItem('loginTime');
|
||
if (loginTime) {
|
||
var timeSinceLastLogin = (new Date() - new Date(loginTime)) / 3600000; // 计算时间差，单位改为小时
|
||
if (timeSinceLastLogin < 2 && this.loginForm.username && this.loginForm.password) {
|
||
console.log('自动登录成功');
|
||
this.handleLogin();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|