vue登录界面实现

实现 Vue 登录界面的基本步骤

创建一个 Vue 登录界面需要结合表单处理、数据绑定和事件处理。以下是一个完整的实现方案，包含模板、逻辑和样式。

创建 Vue 组件

使用 Vue 单文件组件（SFC）结构，包含模板、脚本和样式部分。

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

<script>
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    handleSubmit() {
      // 登录逻辑
      console.log("提交表单:", this.form);
      // 这里可以添加API调用
    },
  },
};
</script>

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.submit-btn {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-btn:hover {
  background-color: #369f6b;
}
</style>

添加表单验证

使用 Vuelidate 或手动验证增强表单的健壮性。

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

export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
      },
    };
  },
  validations: {
    form: {
      username: { required },
      password: { required, minLength: minLength(6) },
    },
  },
  methods: {
    handleSubmit() {
      this.$v.$touch();
      if (this.$v.$invalid) {
        alert("请填写正确的表单信息");
        return;
      }
      console.log("提交表单:", this.form);
    },
  },
};
</script>

集成 API 调用

在 handleSubmit 方法中添加实际的登录 API 调用。

methods: {
  async handleSubmit() {
    this.$v.$touch();
    if (this.$v.$invalid) return;

    try {
      const response = await axios.post("/api/login", this.form);
      console.log("登录成功:", response.data);
      // 保存 token 或跳转页面
    } catch (error) {
      console.error("登录失败:", error);
      alert("登录失败，请检查用户名和密码");
    }
  },
},

添加加载状态

在提交时显示加载状态，避免重复提交。

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

<script>
export default {
  data() {
    return {
      isLoading: false,
    };
  },
  methods: {
    async handleSubmit() {
      if (this.isLoading) return;
      this.isLoading = true;

      try {
        await axios.post("/api/login", this.form);
        // 处理成功逻辑
      } finally {
        this.isLoading = false;
      }
    },
  },
};
</script>

路由跳转

登录成功后跳转到首页或其他页面。

methods: {
  async handleSubmit() {
    // ...验证和加载逻辑
    try {
      const response = await axios.post("/api/login", this.form);
      localStorage.setItem("token", response.data.token);
      this.$router.push("/dashboard");
    } catch (error) {
      // 错误处理
    }
  },
},

响应式设计

通过媒体查询确保登录界面在不同设备上显示正常。

@media (max-width: 600px) {
  .login-container {
    width: 90%;
    margin: 20px auto;
  }
}

关键点总结

• 使用 v-model 实现表单数据的双向绑定
• 通过 @submit.prevent 阻止表单默认提交行为
• 表单验证确保数据的合法性
• 异步处理登录请求并管理加载状态
• 登录成功后保存凭证并跳转页面
• 响应式设计适配不同屏幕尺寸

以上步骤提供了 Vue 登录界面的完整实现方案，可根据实际需求进行调整和扩展。