Boonlive_RD_Web/Web_F305_Mqtt_Prod
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
徐
2025-11-26 11:32:30 +08:00
commit 2163829349
1853 changed files with 1896668 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
MQTTServerSideAPI/Views/LoginViews/Index.cshtml Normal file
View File

@@ -0,0 +1,189 @@
@{
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>