162 lines
4.2 KiB
Vue
162 lines
4.2 KiB
Vue
<template>
|
|
<div id='building'>
|
|
<el-container class="auth-container">
|
|
<el-main class="auth-form">
|
|
<el-card class="box-card">
|
|
<template #header>
|
|
<span v-if="showLoginForm">登录</span>
|
|
<span v-else>注册</span>
|
|
</template>
|
|
<el-form v-if="showLoginForm" @submit.prevent="login" :model="loginForm" ref="loginForm" label-width="80px">
|
|
<el-form-item label="用户名">
|
|
<el-input v-model="loginForm.username" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="密码">
|
|
<el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="login">登录</el-button>
|
|
<el-button type="text" @click="showLoginForm = false">注册账号</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-form v-else @submit.prevent="register" :model="registerForm" ref="registerForm" label-width="80px">
|
|
<el-form-item label="用户名">
|
|
<el-input v-model="registerForm.username" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="密码">
|
|
<el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="register">注册</el-button>
|
|
<el-button type="text" @click="showLoginForm = true">返回登录</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-card>
|
|
</el-main>
|
|
</el-container>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
loginForm: {
|
|
username: '',
|
|
password: ''
|
|
},
|
|
registerForm: {
|
|
username: '',
|
|
password: ''
|
|
},
|
|
showLoginForm: true // 默认显示登录表单
|
|
};
|
|
},
|
|
methods: {
|
|
async login() {
|
|
try {
|
|
const response = await fetch('http://localhost:3000/api/login', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(this.loginForm)
|
|
});
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
window.location.href = '/main.html';
|
|
} else {
|
|
this.$message.error('登录失败');
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('网络错误');
|
|
}
|
|
},
|
|
async register() {
|
|
try {
|
|
const response = await fetch('http://localhost:3000/api/register', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(this.registerForm)
|
|
});
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
this.$message.success('注册成功，请登录');
|
|
this.showLoginForm = true; // 注册成功后显示登录表单
|
|
} else {
|
|
this.$message.error('注册失败');
|
|
}
|
|
} catch (error) {
|
|
this.$message.error('网络错误');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* .auth-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: calc(100vh);
|
|
background-color: #ffe6f2; 淡粉色背景 */
|
|
|
|
|
|
.auth-form {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.box-card {
|
|
border:1px solid #ff99cc;
|
|
width: 350px;
|
|
margin:180px auto;
|
|
padding: 35px 80px 15px 35px;
|
|
border-radius: 5px;
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
box-shadow: 0 0 25px #ff99cc;
|
|
background-color:rgba(255,255,255,0.4);
|
|
/* max-width: 400px;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid #ff99cc; 粉色边框 */
|
|
}
|
|
|
|
.el-button--primary {
|
|
background-color: #ff6699;
|
|
border-color: #ff6699;
|
|
}
|
|
|
|
.el-button--primary:hover {
|
|
background-color: #ff3366;
|
|
border-color: #ff3366;
|
|
}
|
|
|
|
.el-button--text {
|
|
color: #ff6699;
|
|
}
|
|
|
|
.el-button--text:hover {
|
|
background-color: rgba(255, 102, 153, 0.1);
|
|
}
|
|
|
|
.el-form-item__label {
|
|
color: #ff6699;
|
|
}
|
|
|
|
.el-input__inner {
|
|
border-color: #ff99cc;
|
|
}
|
|
|
|
.el-input__inner:focus {
|
|
border-color: #ff6699;
|
|
}
|
|
</style>
|