将看板功能独立,方便独立维护功能。

This commit is contained in:
liuwei
2025-03-27 11:22:23 +08:00
parent 2eb4914b84
commit 3c0d1b30ae

View File

@@ -1,10 +1,18 @@
<!DOCTYPE html>
<html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录 - WeChatRobot管理后台</title>
<!-- 添加favicon -->
<link rel="icon" href="/static/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon">
<!-- Element UI CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- Element UI JS -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
body {
margin: 0;
@@ -19,7 +27,7 @@
.login-container {
width: 400px;
padding: 30px;
background-color: #fff;
background-color: white;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
@@ -43,22 +51,24 @@
</style>
</head>
<body>
<div id="app" class="login-container">
<h2 class="login-title">WeChatRobot管理后台</h2>
<el-form class="login-form" :model="loginForm" :rules="loginRules" ref="loginForm">
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="el-icon-user"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" placeholder="密码" prefix-icon="el-icon-lock" show-password></el-input>
</el-form-item>
<el-button type="primary" class="login-button" @click="submitForm('loginForm')">登录</el-button>
<div id="app">
<div class="login-container">
<h2 class="login-title">WeChatRobot管理后台</h2>
<el-form class="login-form" ref="loginForm" :model="loginForm" :rules="rules" label-width="0px">
<el-form-item prop="username">
<el-input v-model="loginForm.username" prefix-icon="el-icon-user" placeholder="用户名"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="密码" type="password" @keyup.enter.native="submitForm"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" class="login-button" @click="submitForm" :loading="loading">登录</el-button>
</el-form-item>
</el-form>
<div class="error-message" v-if="errorMessage">{{ errorMessage }}</div>
</el-form>
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
@@ -68,7 +78,7 @@
username: '',
password: ''
},
loginRules: {
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
@@ -76,34 +86,44 @@
{ required: true, message: '请输入密码', trigger: 'blur' }
]
},
errorMessage: '{{ error }}'
};
loading: false,
errorMessage: ''
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
submitForm() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
// 创建表单并提交
const form = document.createElement('form');
form.method = 'POST';
form.action = '/login';
this.loading = true;
// 创建表单数据
const formData = new FormData();
formData.append('username', this.loginForm.username);
formData.append('password', this.loginForm.password);
const usernameInput = document.createElement('input');
usernameInput.type = 'hidden';
usernameInput.name = 'username';
usernameInput.value = this.loginForm.username;
form.appendChild(usernameInput);
const passwordInput = document.createElement('input');
passwordInput.type = 'hidden';
passwordInput.name = 'password';
passwordInput.value = this.loginForm.password;
form.appendChild(passwordInput);
document.body.appendChild(form);
form.submit();
} else {
return false;
// 发送POST请求
fetch('/login', {
method: 'POST',
body: formData
})
.then(response => {
if (response.redirected) {
window.location.href = response.url;
} else {
return response.text();
}
})
.then(html => {
if (html) {
// 如果返回HTML说明登录失败
this.errorMessage = '用户名或密码错误';
this.loading = false;
}
})
.catch(error => {
console.error('登录出错:', error);
this.errorMessage = '登录请求失败,请稍后重试';
this.loading = false;
});
}
});
}