IrisVega/my-project-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

modified: server/server.js

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
server/server.js
View File

@ -28,14 +28,23 @@ 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: '注册失败' });
}
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: '注册成功' });
});
});
});
// 处理登录请求
app.post('/api/login', (req, res) => {

BIN
src/assets/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 866 KiB

139
src/components/LoginForm.vue
View File

@ -1,30 +1,38 @@
<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>
<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>
@ -38,11 +46,13 @@
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('登录失败');
}
} 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>
<style>
/* 添加一些简单的样式 */
form {
margin-bottom: 20px;
<style scoped>
.auth-container {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh-100px);
background-color: #ffe6f2; /* 淡粉色背景 */
}
label {
margin-right: 10px;
.auth-form {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
input {
margin-bottom: 10px;
.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; /* 粉色边框 */
}
button {
margin-top: 10px;
.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
View File

@ -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');