当前位置：首页 > VUE

vue实现登了页面

2026-01-18 03:49:00VUE

Vue 登录页面实现步骤

创建登录表单组件

在 Vue 项目中创建一个登录组件，通常命名为 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">登录</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;
}
.form-group {
  margin-bottom: 15px;
}
label {
  display: block;
  margin-bottom: 5px;
}
input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}
button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

添加表单验证

使用 Vue 的 computed 属性或第三方库如 VeeValidate 实现表单验证。

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      error: "",
    };
  },
  computed: {
    isValid() {
      return this.username.length > 0 && this.password.length > 0;
    },
  },
  methods: {
    handleLogin() {
      if (!this.isValid) {
        this.error = "请输入用户名和密码";
        return;
      }
      // 登录逻辑
    },
  },
};
</script>

实现登录逻辑

在 handleLogin 方法中调用后端 API 进行身份验证，通常使用 axios 发送请求。

<script>
import axios from "axios";

export default {
  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) {
        this.error = "登录失败，请检查用户名和密码";
      }
    },
  },
};
</script>

添加路由配置

在 Vue Router 中配置登录页面的路由。

import Vue from "vue";
import Router from "vue-router";
import Login from "./views/Login.vue";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/login",
      name: "login",
      component: Login,
    },
  ],
});

添加导航守卫

使用 Vue Router 的导航守卫保护需要认证的路由。

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem("token");
  if (to.name !== "login" && !isAuthenticated) {
    next({ name: "login" });
  } else {
    next();
  }
});

状态管理（可选）

对于大型应用，可以使用 Vuex 管理用户认证状态。

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
    token: null,
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
    setToken(state, token) {
      state.token = token;
    },
  },
  actions: {
    login({ commit }, { username, password }) {
      return axios.post("/api/login", { username, password }).then((response) => {
        commit("setUser", response.data.user);
        commit("setToken", response.data.token);
        localStorage.setItem("token", response.data.token);
      });
    },
  },
});

响应式布局

确保登录页面在不同设备上都能正常显示。

@media (max-width: 600px) {
  .login-container {
    padding: 10px;
    max-width: 100%;
  }
}

错误处理

增强错误处理逻辑，提供更友好的用户反馈。

<template>
  <div v-if="error" class="error-message">
    {{ error }}
  </div>
</template>

<style scoped>
.error-message {
  color: red;
  margin-bottom: 15px;
}
</style>

以上步骤涵盖了 Vue 登录页面的基本实现，包括表单创建、验证、API 调用、路由配置和状态管理。根据实际需求可以进一步扩展功能如记住我、第三方登录等。

vue实现登了页面