当前位置：首页 > VUE

vue 登录页面实现

2026-01-15 22:53:20VUE

实现 Vue 登录页面的步骤

创建 Vue 项目

使用 Vue CLI 创建一个新项目，运行以下命令：

vue create login-page

进入项目目录并安装必要的依赖：

cd login-page
npm install axios vue-router

设计登录表单

在 src/components/Login.vue 文件中创建登录表单组件：

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

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    handleLogin() {
      // 登录逻辑
    },
  },
};
</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;
}
label {
  display: block;
  margin-bottom: 5px;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
.login-button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>

配置路由

在 src/router/index.js 中配置登录页面的路由：

import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../components/Login.vue";

Vue.use(VueRouter);

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

const router = new VueRouter({
  routes,
});

export default router;

实现登录逻辑

在 Login.vue 的 handleLogin 方法中添加登录逻辑：

methods: {
  async handleLogin() {
    try {
      const response = await axios.post("/api/login", {
        username: this.username,
        password: this.password,
      });
      localStorage.setItem("token", response.data.token);
      this.$router.push("/dashboard");
    } catch (error) {
      alert("登录失败，请检查用户名和密码");
    }
  },
},

添加表单验证

使用 Vuelidate 或其他验证库增强表单验证：

npm install vuelidate

在 Login.vue 中引入并使用：

import { required, minLength } from "vuelidate/lib/validators";

export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) },
  },
  methods: {
    handleLogin() {
      this.$v.$touch();
      if (this.$v.$invalid) return;
      // 登录逻辑
    },
  },
};

添加加载状态

在登录按钮上添加加载状态：

<button type="submit" class="login-button" :disabled="loading">
  {{ loading ? "登录中..." : "登录" }}
</button>

在 data 中添加 loading 状态：

data() {
  return {
    username: "",
    password: "",
    loading: false,
  };
},

更新 handleLogin 方法：

async handleLogin() {
  this.$v.$touch();
  if (this.$v.$invalid) return;
  this.loading = true;
  try {
    // 登录逻辑
  } catch (error) {
    alert("登录失败");
  } finally {
    this.loading = false;
  }
},