my-project-vue/src/components/LoginForm.vue

<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>
  
  <script>
  export default {
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        registerForm: {
          username: '',
          password: ''
        }
      };
    },
    methods: {
      async login() {
        const response = await fetch('http://localhost:3000/api/login', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.loginForm)
        });
        const result = await response.json();
        if (result.success) {
          window.location.href = '/main.html';
        } else {
          alert('登录失败');
        }
      },
      async register() {
        const response = await fetch('http://localhost:3000/api/register', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(this.registerForm)
        });
        const result = await response.json();
        if (result.success) {
          alert('注册成功，请登录');
        } else {
          alert('注册失败');
        }
      }
    }
  };
  </script>
  
  <style>
  /* 添加一些简单的样式 */
  form {
    margin-bottom: 20px;
  }
  label {
    margin-right: 10px;
  }
  input {
    margin-bottom: 10px;
  }
  button {
    margin-top: 10px;
  }
  </style>