vue3实现登录注册功能

要实现登录注册功能，首先需要有后端 API 接口处理登录注册的逻辑。这里以一个简单的 Node.js Express 后端服务为例，前端使用 Vue3 实现。

1. 创建Vue3项目

vue create login-register

2. 安装 axios

npm install axios

3. 创建登录和注册组件

在 src/components 目录下创建 Login.vue 和 Register.vue 组件。

Login.vue：

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

<script>
import axios from "axios";

export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post("/api/login", {
          username: this.username,
          password: this.password,
        });
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

Register.vue：

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

<script>
import axios from "axios";

export default {
  name: "Register",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    async register() {
      try {
        const response = await axios.post("/api/register", {
          username: this.username,
          password: this.password,
        });
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

4. 创建路由

在 src/router 目录下创建 index.js 文件，添加登录和注册路由。

import { createRouter, createWebHistory } from "vue-router";
import Login from "../components/Login.vue";
import Register from "../components/Register.vue";

const routes = [
  {
    path: "/login",
    name: "Login",
    component: Login,
  },
  {
    path: "/register",
    name: "Register",
    component: Register,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

5. 编写后端 API

在后端创建路由处理登录和注册请求。这里使用了 Express 和 MongoDB。

const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");

const app = express();

app.use(bodyParser.json());

// 连接MongoDB数据库
mongoose
  .connect("mongodb://localhost/login-register", {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(() => {
    console.log("Connected to MongoDB");
  })
  .catch((error) => {
    console.error(error);
  });

// 定义用户模型
const User = mongoose.model(
  "User",
  new mongoose.Schema({
    username: String,
    password: String,
  })
);

// 处理登录请求
app.post("/api/login", async (req, res) => {
  const { username, password } = req.body;
  const user = await User.findOne({ username, password });
  if (!user) {
    return res.status(401).send({
      error: "用户名或密码错误",
    });
  }
  res.send({
    message: "登录成功",
  });
});

// 处理注册请求
app.post("/api/register", async (req, res) => {
  const { username, password } = req.body;
  const existingUser = await User.findOne({ username });
  if (existingUser) {
    return res.status(409).send({
      error: "用户名已存在",
    });
  }
  const user = new User({ username, password });
  await user.save();
  res.send({
    message: "注册成功",
  });
});

app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

6. 修改 App.vue

在 App.vue 中添加链接到登录和注册页面的按钮。

<template>
  <div class="container">
    <h1>Vue3登录注册示例</h1>
    <div>
      <router-link to="/login">登录</router-link>
      <router-link to="/register">注册</router-link>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

7. 运行项目

在前端项目根目录下运行以下命令启动前端：

npm run serve

在后端项目根目录下运行以下命令启动后端：

node index.js

然后访问 http://localhost:8080 即可看到登录注册页面。