modified: server/server.js

new file:   src/assets/bg.png
	modified:   src/components/LoginForm.vue
	modified:   src/main.js
This commit is contained in:
IrisVega 2024-07-11 15:32:54 +08:00
parent c4e19706a7
commit 299eaf8088
4 changed files with 143 additions and 73 deletions

View File

@ -28,12 +28,21 @@ db.connect(err => {
// 处理注册请求 // 处理注册请求
app.post('/api/register', (req, res) => { app.post('/api/register', (req, res) => {
const { username, password } = req.body; const { username, password } = req.body;
const sql = 'INSERT INTO users (username, password) VALUES (?, ?)'; const checkSql = 'SELECT * FROM users WHERE username = ?';
db.query(sql, [username, password], (err, result) => { db.query(checkSql, [username], (err, results) => {
if (err) { if (err) {
return res.json({ success: false, message: '注册失败' }); return res.json({ success: false, message: '注册失败' });
} }
res.json({ success: true, message: '注册成功' }); if (results.length > 0) {
return res.json({ success: false, message: '用户名已存在' });
}
const insertSql = 'INSERT INTO users (username, password) VALUES (?, ?)';
db.query(insertSql, [username, password], (err, result) => {
if (err) {
return res.json({ success: false, message: '注册失败' });
}
res.json({ success: true, message: '注册成功' });
});
}); });
}); });

BIN
src/assets/bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 866 KiB

View File

@ -1,48 +1,58 @@
<template> <template>
<div> <el-container class="auth-container">
<h2>登录</h2> <el-main class="auth-form">
<form @submit.prevent="login"> <el-card class="box-card">
<div> <template #header>
<label for="username">用户名</label> <span v-if="showLoginForm">登录</span>
<input type="text" v-model="loginForm.username" required /> <span v-else>注册</span>
</div> </template>
<div> <el-form v-if="showLoginForm" @submit.prevent="login" :model="loginForm" ref="loginForm" label-width="80px">
<label for="password">密码</label> <el-form-item label="用户名">
<input type="password" v-model="loginForm.password" required /> <el-input v-model="loginForm.username" autocomplete="off"></el-input>
</div> </el-form-item>
<button type="submit">登录</button> <el-form-item label="密码">
</form> <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
<h2>注册</h2> </el-form-item>
<form @submit.prevent="register"> <el-form-item>
<div> <el-button type="primary" @click="login">登录</el-button>
<label for="newUsername">用户名</label> <el-button type="text" @click="showLoginForm = false">注册账号</el-button>
<input type="text" v-model="registerForm.username" required /> </el-form-item>
</div> </el-form>
<div> <el-form v-else @submit.prevent="register" :model="registerForm" ref="registerForm" label-width="80px">
<label for="newPassword">密码</label> <el-form-item label="用户名">
<input type="password" v-model="registerForm.password" required /> <el-input v-model="registerForm.username" autocomplete="off"></el-input>
</div> </el-form-item>
<button type="submit">注册</button> <el-form-item label="密码">
</form> <el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
</div> </el-form-item>
</template> <el-form-item>
<el-button type="primary" @click="register">注册</el-button>
<script> <el-button type="text" @click="showLoginForm = true">返回登录</el-button>
export default { </el-form-item>
data() { </el-form>
return { </el-card>
loginForm: { </el-main>
username: '', </el-container>
password: '' </template>
},
registerForm: { <script>
username: '', export default {
password: '' data() {
} return {
}; loginForm: {
}, username: '',
methods: { password: ''
async login() { },
registerForm: {
username: '',
password: ''
},
showLoginForm: true //
};
},
methods: {
async login() {
try {
const response = await fetch('http://localhost:3000/api/login', { const response = await fetch('http://localhost:3000/api/login', {
method: 'POST', method: 'POST',
headers: { headers: {
@ -54,10 +64,14 @@
if (result.success) { if (result.success) {
window.location.href = '/main.html'; window.location.href = '/main.html';
} else { } else {
alert('登录失败'); this.$message.error('登录失败');
} }
}, } catch (error) {
async register() { this.$message.error('网络错误');
}
},
async register() {
try {
const response = await fetch('http://localhost:3000/api/register', { const response = await fetch('http://localhost:3000/api/register', {
method: 'POST', method: 'POST',
headers: { headers: {
@ -67,28 +81,71 @@
}); });
const result = await response.json(); const result = await response.json();
if (result.success) { if (result.success) {
alert('注册成功,请登录'); this.$message.success('注册成功,请登录');
this.showLoginForm = true; //
} else { } else {
alert('注册失败'); this.$message.error('注册失败');
} }
} catch (error) {
this.$message.error('网络错误');
} }
} }
};
</script>
<style>
/* 添加一些简单的样式 */
form {
margin-bottom: 20px;
} }
label { };
margin-right: 10px; </script>
}
input { <style scoped>
margin-bottom: 10px; .auth-container {
} display: flex;
button { justify-content: center;
margin-top: 10px; align-items: center;
} height: calc(100vh-100px);
</style> background-color: #ffe6f2; /* 淡粉色背景 */
}
.auth-form {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.box-card {
width: 100%;
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>

View File

@ -1,4 +1,8 @@
import { createApp } from 'vue' import { createApp } from 'vue';
import App from './App.vue' import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
createApp(App).mount('#app') const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');