用vue3写登录注册功能

首先，我们需要创建一个Vue 3项目，并安装所需的依赖。在项目根目录下运行以下命令：

npm install -g @vue/cli
vue create login-register
cd login-register
npm install axios

接下来，我们将编写登录和注册功能。首先，在src目录下创建一个名为components的文件夹，并在其中创建两个文件：Login.vue和Register.vue。

1. Login.vue:

<template>
  <div class="login">
    <h2>登录</h2>
    <form @submit.prevent="handleSubmit">
      <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" v-model="username" />
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" id="password" v-model="password" />
      </div>
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const username = ref("");
    const password = ref("");

    const handleSubmit = async () => {
      try {
        const response = await axios.post("/api/login", {
          username: username.value,
          password: password.value,
        });
        if (response.data.success) {
          alert("登录成功！");
        } else {
          alert("登录失败，请检查用户名和密码。");
        }
      } catch (error) {
        console.error(error);
      }
    };

    return {
      username,
      password,
      handleSubmit,
    };
  },
};
</script>

2. Register.vue:

<template>
  <div class="register">
    <h2>注册</h2>
    <form @submit.prevent="handleSubmit">
      <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" v-model="username" />
      </div>
      <div>
        <label for="email">邮箱：</label>
        <input type="email" id="email" v-model="email" />
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" id="password" v-model="password" />
      </div>
      <button type="submit">注册</button>
    </form>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const username = ref("");
    const email = ref("");
    const password = ref("");

    const handleSubmit = async () => {
      try {
        const response = await axios.post("/api/register", {
          username: username.value,
          email: email.value,
          password: password.value,
        });
        if (response.data.success) {
          alert("注册成功！");
        } else {
          alert("注册失败，请检查输入信息。");
        }
      } catch (error) {
        console.error(error);
      }
    };

    return {
      username,
      email,
      password,
      handleSubmit,
    };
  },
};
</script>

最后，在src/App.vue中引入这两个组件，并添加一个导航栏来切换登录和注册页面：

<template>
  <div id="app">
    <nav>
      <router-link to="/login">登录</router-link> |
      <router-link to="/register">注册</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
import { createApp } from "vue";
import App from "./App.vue";
import Login from "./components/Login.vue";
import Register from "./components/Register.vue";
import router from "./router";

createApp(App).use(router).mount("#app");
</script>

运行npm run serve实现登录注册功能。

---

在编写代码时，handleSubmit函数被声明为异步（async）的原因是为了处理可能的异步操作。在JavaScript中，异步操作通常涉及到网络请求、文件读写等耗时操作，这些操作不会阻塞主线程，而是会在后台进行。因此，为了确保程序能够继续执行其他任务，我们需要使用异步函数来处理这些操作。

下面是一个示例代码，展示了如何将handleSubmit函数声明为异步：

// 定义一个异步函数 handleSubmit
async function handleSubmit() {
  // 在这里编写异步操作的代码
  // 例如发送网络请求或读取文件

  try {
    // 模拟异步操作，例如发送网络请求
    await fetch('https://api.example.com/data');

    // 处理异步操作的结果
    const response = await response.json();
    console.log(response);

    // 其他处理逻辑...
  } catch (error) {
    // 处理异步操作的错误
    console.error('An error occurred:', error);
  }
}

// 调用 handleSubmit 函数
handleSubmit();

在上面的示例中，我们使用了async关键字来声明handleSubmit函数为异步函数。在函数体内，我们可以使用await关键字来等待异步操作的完成。通过这种方式，我们可以确保在异步操作完成后再执行后续的代码，避免了阻塞主线程的问题。