zjncs · zjncs · Jun 5, 2025
diff --git a/TjuFood-front/src/net/index.js b/TjuFood-front/src/net/index.js
@@ -1,32 +1,37 @@
-import axios from "axios";
-import {ElMessage} from "element-plus";
+import axios from 'axios'
 
-const defaultError = () => ElMessage.error('发生了一些错误，请联系管理员')
-const defaultFailure = (message) => ElMessage.warning(message)
+function post(url, data) {
+  return axios
+    .post(url, data, {
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      withCredentials: true
+    })
+    .then(({ data }) => {
+      if (data.success) return data.message
+      throw new Error(data.message)
+    })
+}
 
-function post(url, data, success, failure = defaultFailure, error = defaultError) {
-    axios.post(url, data, {
-        headers: {
-            'Content-Type': 'application/json'
-        },
-        withCredentials: true
-    }).then(({data}) => {
-        if(data.success)
-            success(data.message, data.status)
-        else
-            failure(data.message, data.status)
-    }).catch(error)
+function postForm(url, data) {
+  const params = new URLSearchParams()
+  Object.keys(data).forEach((k) => params.append(k, data[k]))
+  return axios
+    .post(url, params, { withCredentials: true })
+    .then(({ data }) => {
+      if (data.success) return data.message
+      throw new Error(data.message)
+    })
 }
 
-function get(url, success, failure = defaultFailure, error = defaultError) {
-    axios.get(url, {
-        withCredentials: true
-    }).then(({data}) => {
-        if(data.success)
-            success(data.message, data.status)
-        else
-            failure(data.message, data.status)
-    }).catch(error)
+function get(url) {
+  return axios
+    .get(url, { withCredentials: true })
+    .then(({ data }) => {
+      if (data.success) return data.message
+      throw new Error(data.message)
+    })
 }
 
-export { get, post }
+export { get, post, postForm }
diff --git a/TjuFood-front/src/stores/auth.js b/TjuFood-front/src/stores/auth.js
@@ -1,54 +1,51 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
+import { postForm, get } from '../net'
 
 export const useAuthStore = defineStore('auth', () => {
-    const user = ref(null)
-    const isAuthenticated = ref(false)
-
-    // Mock user data for demo purposes
-    const mockUsers = [
-        {
-            id: 1,
-            username: 'user1',
-            password: 'password',
-            nickname: '美食达人',
-            avatar: 'https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2',
-            credits: 520,
-            level: 3,
-            campus: '北洋园校区'
-        }
-    ]
-
-    function login(username, password) {
-        const foundUser = mockUsers.find(u => u.username === username && u.password === password)
-
-        if (foundUser) {
-            // Remove password from user object
-            const { password, ...userData } = foundUser
-            user.value = userData
-            isAuthenticated.value = true
-            return true
-        }
-
-        return false
+  const user = ref(null)
+  const isAuthenticated = ref(false)
+
+  async function login(username, password, remember = false) {
+    try {
+      await postForm('/api/auth/login', { username, password, remember })
+      const info = await get('/api/user/me')
+      user.value = info
+      isAuthenticated.value = true
+      return true
+    } catch (e) {
+      return false
     }
-
-    function logout() {
-        user.value = null
-        isAuthenticated.value = false
+  }
+
+  function logout() {
+    postForm('/api/auth/logout', {})
+    user.value = null
+    isAuthenticated.value = false
+  }
+
+  async function register({ username, email, password, code }) {
+    try {
+      await postForm('/api/auth/register', {
+        username,
+        email,
+        password,
+        code
+      })
+      return true
+    } catch (e) {
+      return false
     }
-
-    function register(userData) {
-        // In a real app, this would send a request to the backend
-        // For demo purposes, just simulate success
-        return true
+  }
+
+  async function sendRegisterEmail(email) {
+    try {
+      await postForm('/api/auth/valid-register-email', { email })
+      return true
+    } catch (e) {
+      return false
     }
+  }
 
-    return {
-        user,
-        isAuthenticated,
-        login,
-        logout,
-        register
-    }
-})
+  return { user, isAuthenticated, login, logout, register, sendRegisterEmail }
+})
diff --git a/TjuFood-front/src/views/auth/Login.vue b/TjuFood-front/src/views/auth/Login.vue
@@ -70,17 +70,21 @@ const password = ref('')
 const remember = ref(false)
 const errorMessage = ref('')
 
-function handleLogin() {
-  if (username.value && password.value) {
-    const success = authStore.login(username.value, password.value)
-
-    if (success) {
-      router.push('/')
-    } else {
-      errorMessage.value = '用户名或密码错误'
-    }
-  } else {
+async function handleLogin() {
+  errorMessage.value = ''
+  if (!username.value || !password.value) {
     errorMessage.value = '请输入用户名和密码'
+    return
+  }
+  const success = await authStore.login(
+    username.value,
+    password.value,
+    remember.value
+  )
+  if (success) {
+    router.push('/')
+  } else {
+    errorMessage.value = '用户名或密码错误'
   }
 }
 </script>

diff --git a/TjuFood-front/src/views/auth/Register.vue b/TjuFood-front/src/views/auth/Register.vue
@@ -22,12 +22,31 @@
 
           <div class="form-group">
             <label for="email" class="form-label">邮箱</label>
+            <div class="code-row">
+              <input
+                  type="email"
+                  id="email"
+                  v-model="email"
+                  class="form-input"
+                  placeholder="请输入邮箱"
+                  required
+              />
+              <button
+                  type="button"
+                  class="code-btn"
+                  @click="sendCode"
+              >{{ codeButtonText }}</button>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label for="code" class="form-label">邮箱验证码</label>
             <input
-                type="email"
-                id="email"
-                v-model="email"
+                type="text"
+                id="code"
+                v-model="code"
                 class="form-input"
-                placeholder="请输入邮箱"
+                placeholder="请输入验证码"
                 required
             />
           </div>
@@ -107,13 +126,41 @@ const authStore = useAuthStore()
 
 const username = ref('')
 const email = ref('')
+const code = ref('')
 const password = ref('')
 const confirmPassword = ref('')
 const campus = ref('')
 const agreement = ref(false)
 const errorMessage = ref('')
+const codeButtonText = ref('发送验证码')
+let countdown = 0
+
+function updateCountdown() {
+  if (countdown > 0) {
+    codeButtonText.value = `${countdown}s`
+    setTimeout(() => {
+      countdown--
+      updateCountdown()
+    }, 1000)
+  } else {
+    codeButtonText.value = '发送验证码'
+  }
+}
 
-function handleRegister() {
+async function sendCode() {
+  if (countdown > 0) return
+  if (!email.value) {
+    errorMessage.value = '请先填写邮箱'
+    return
+  }
+  const ok = await authStore.sendRegisterEmail(email.value)
+  if (ok) {
+    countdown = 60
+    updateCountdown()
+  }
+}
+
+async function handleRegister() {
   // Reset error message
   errorMessage.value = ''
 
@@ -134,11 +181,11 @@ function handleRegister() {
   }
 
   // Attempt registration
-  const success = authStore.register({
+  const success = await authStore.register({
     username: username.value,
     email: email.value,
     password: password.value,
-    campus: campus.value
+    code: code.value
   })
 
   if (success) {
@@ -274,4 +321,15 @@ select.form-input {
   border-radius: var(--radius-md);
   text-align: center;
 }
+
+.code-row {
+  display: flex;
+  gap: var(--space-2);
+}
+
+.code-btn {
+  white-space: nowrap;
+  padding: var(--space-2) var(--space-3);
+  font-size: 0.875rem;
+}
 </style>