vue实现登录网页

使用 Vue 实现登录网页

创建 Vue 项目

使用 Vue CLI 快速初始化项目：

npm install -g @vue/cli
vue create vue-login-demo
cd vue-login-demo
npm run serve

设计登录表单

在 src/views/Login.vue 中编写登录表单：

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

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    handleLogin() {
      // 模拟登录逻辑
      if (this.username === "admin" && this.password === "123456") {
        alert("登录成功");
        this.$router.push("/dashboard");
      } else {
        alert("用户名或密码错误");
      }
    },
  },
};
</script>

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.form-group {
  margin-bottom: 15px;
}
input {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
}
button {
  background: #42b983;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

配置路由

在 src/router/index.js 中设置路由：

import { createRouter, createWebHistory } from "vue-router";
import Login from "../views/Login.vue";
import Dashboard from "../views/Dashboard.vue";

const routes = [
  { path: "/", redirect: "/login" },
  { path: "/login", name: "Login", component: Login },
  { path: "/dashboard", name: "Dashboard", component: Dashboard },
];

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

export default router;

添加状态管理（可选）

使用 Vuex 或 Pinia 管理登录状态（以 Pinia 为例）：
安装 Pinia：

npm install pinia

在 src/stores/auth.js 中定义 Store：

import { defineStore } from "pinia";

export const useAuthStore = defineStore("auth", {
  state: () => ({
    isAuthenticated: false,
    user: null,
  }),
  actions: {
    login(username, password) {
      if (username === "admin" && password === "123456") {
        this.isAuthenticated = true;
        this.user = { username };
        return true;
      }
      return false;
    },
    logout() {
      this.isAuthenticated = false;
      this.user = null;
    },
  },
});

在 Login.vue 中调用：

<script>
import { useAuthStore } from "../stores/auth";
import { mapActions } from "pinia";

export default {
  data() {
    return { username: "", password: "" };
  },
  methods: {
    ...mapActions(useAuthStore, ["login"]),
    async handleLogin() {
      const success = await this.login(this.username, this.password);
      if (success) {
        this.$router.push("/dashboard");
      } else {
        alert("登录失败");
      }
    },
  },
};
</script>

表单验证增强

使用 vee-validate 或自定义验证规则：
安装 vee-validate：

npm install vee-validate

示例代码：

<template>
  <Form @submit="handleLogin">
    <Field name="username" v-model="username" rules="required" />
    <ErrorMessage name="username" />
    <Field name="password" v-model="password" rules="required|min:6" />
    <ErrorMessage name="password" />
    <button type="submit">登录</button>
  </Form>
</template>

后端接口对接

通过 Axios 调用真实 API：

import axios from "axios";

methods: {
  async handleLogin() {
    try {
      const response = await axios.post("/api/login", {
        username: this.username,
        password: this.password,
      });
      if (response.data.success) {
        localStorage.setItem("token", response.data.token);
        this.$router.push("/dashboard");
      }
    } catch (error) {
      alert(error.response.data.message);
    }
  },
}

通过以上步骤，可实现完整的 Vue 登录功能，涵盖表单设计、路由控制、状态管理及后端交互。