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