modified: server/server.js

new file:   src/assets/bg.png
	modified:   src/components/LoginForm.vue
	modified:   src/main.js

server/server.js

@@ -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 (?, ?)';
+  const checkSql = 'SELECT * FROM users WHERE username = ?';
-  db.query(sql, [username, password], (err, result) => {
+  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: '注册成功' });
+    });
   });
 });
 

src/components/LoginForm.vue

@@ -1,48 +1,58 @@
 <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>
+            <el-button type="text" @click="showLoginForm = true">返回登录</el-button>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </el-main>
+  </el-container>
+</template>
 
-  <script>
+<script>
-  export default {
+export default {
-    data() {
+  data() {
-      return {
+    return {
-        loginForm: {
+      loginForm: {
-          username: '',
+        username: '',
-          password: ''
+        password: ''
-        },
+      },
-        registerForm: {
+      registerForm: {
-          username: '',
+        username: '',
-          password: ''
+        password: ''
-        }
+      },
-      };
+      showLoginForm: true // 默认显示登录表单
-    },
+    };
-    methods: {
+  },
-      async login() {
+  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) {
-      async register() {
+        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>
+<style scoped>
-  /* 添加一些简单的样式 */
+.auth-container {
-  form {
+  display: flex;
-    margin-bottom: 20px;
+  justify-content: center;
-  }
+  align-items: center;
-  label {
+  height: calc(100vh-100px);
-    margin-right: 10px;
+  background-color: #ffe6f2; /* 淡粉色背景 */
-  }
+}
-  input {
-    margin-bottom: 10px;
-  }
-  button {
-    margin-top: 10px;
-  }
-  </style>
 
+.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>

src/main.js

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