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
parent
c4e19706a7
commit
299eaf8088
@ -28,12 +28,21 @@ db.connect(err => {
|
||||
// 处理注册请求
|
||||
app.post('/api/register', (req, res) => {
|
||||
const { username, password } = req.body;
|
||||
const sql = 'INSERT INTO users (username, password) VALUES (?, ?)';
|
||||
db.query(sql, [username, password], (err, result) => {
|
||||
const checkSql = 'SELECT * FROM users WHERE username = ?';
|
||||
db.query(checkSql, [username], (err, results) => {
|
||||
if (err) {
|
||||
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
BIN
src/assets/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 866 KiB |
@ -1,48 +1,58 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>登录</h2>
|
||||
<form @submit.prevent="login">
|
||||
<div>
|
||||
<label for="username">用户名：</label>
|
||||
<input type="text" v-model="loginForm.username" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="password">密码：</label>
|
||||
<input type="password" v-model="loginForm.password" required />
|
||||
</div>
|
||||
<button type="submit">登录</button>
|
||||
</form>
|
||||
<h2>注册</h2>
|
||||
<form @submit.prevent="register">
|
||||
<div>
|
||||
<label for="newUsername">用户名：</label>
|
||||
<input type="text" v-model="registerForm.username" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="newPassword">密码：</label>
|
||||
<input type="password" v-model="registerForm.password" required />
|
||||
</div>
|
||||
<button type="submit">注册</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loginForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
},
|
||||
registerForm: {
|
||||
username: '',
|
||||
password: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async login() {
|
||||
<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: {
|
||||
@ -54,10 +64,14 @@
|
||||
if (result.success) {
|
||||
window.location.href = '/main.html';
|
||||
} else {
|
||||
alert('登录失败');
|
||||
this.$message.error('登录失败');
|
||||
}
|
||||
},
|
||||
async register() {
|
||||
} catch (error) {
|
||||
this.$message.error('网络错误');
|
||||
}
|
||||
},
|
||||
async register() {
|
||||
try {
|
||||
const response = await fetch('http://localhost:3000/api/register', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@ -67,28 +81,71 @@
|
||||
});
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
alert('注册成功，请登录');
|
||||
this.$message.success('注册成功，请登录');
|
||||
this.showLoginForm = true; // 注册成功后显示登录表单
|
||||
} else {
|
||||
alert('注册失败');
|
||||
this.$message.error('注册失败');
|
||||
}
|
||||
} catch (error) {
|
||||
this.$message.error('网络错误');
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 添加一些简单的样式 */
|
||||
form {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
label {
|
||||
margin-right: 10px;
|
||||
}
|
||||
input {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.auth-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: calc(100vh-100px);
|
||||
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>
|
||||
|
||||
10
src/main.js
10
src/main.js
@ -1,4 +1,8 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import { createApp } from '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');
|
||||
Loading…
Reference in New Issue
Block a user