使用vue实现登录

使用 Vue 实现登录功能

创建登录表单组件

在 Vue 项目中创建一个登录表单组件，通常命名为 Login.vue。表单包含用户名和密码输入框，以及提交按钮。

<template>
  <div class="login-form">
    <h2>登录</h2>
    <form @submit.prevent="handleSubmit">
      <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="submit-btn">登录</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    handleSubmit() {
      // 登录逻辑
    },
  },
};
</script>

<style scoped>
.login-form {
  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;
}
.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  cursor: pointer;
}
</style>

实现登录逻辑

在 handleSubmit 方法中，添加登录逻辑。通常需要调用后端 API 进行验证。

methods: {
  async handleSubmit() {
    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");
      } else {
        alert("登录失败，请检查用户名或密码");
      }
    } catch (error) {
      console.error("登录错误:", error);
      alert("登录失败，请稍后重试");
    }
  },
},

添加路由配置

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

import Login from "./views/Login.vue";

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

状态管理（可选）

如果需要全局管理用户登录状态，可以使用 Vuex。

// store.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
    isAuthenticated: false,
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
      state.isAuthenticated = true;
    },
    logout(state) {
      state.user = null;
      state.isAuthenticated = false;
    },
  },
  actions: {
    login({ commit }, userData) {
      // 调用登录 API
      commit("setUser", userData);
    },
    logout({ commit }) {
      commit("logout");
    },
  },
});

表单验证（可选）

可以使用 Vuelidate 或手动验证表单输入。

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

export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  validations: {
    username: { required },
    password: { required, minLength: minLength(6) },
  },
  methods: {
    handleSubmit() {
      this.$v.$touch();
      if (!this.$v.$invalid) {
        // 提交表单
      }
    },
  },
};

添加加载状态

在登录过程中添加加载状态，提升用户体验。

data() {
  return {
    username: "",
    password: "",
    isLoading: false,
  };
},
methods: {
  async handleSubmit() {
    this.isLoading = true;
    try {
      // 登录逻辑
    } finally {
      this.isLoading = false;
    }
  },
},

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

通过以上步骤，可以实现一个基本的 Vue 登录功能。根据实际需求，可以进一步扩展功能，如记住密码、第三方登录等。