当前位置：首页 > VUE

vue实现登录页

2026-02-19 05:32:06VUE

Vue 实现登录页

项目初始化

使用 Vue CLI 创建新项目：

vue create login-page

选择默认配置或手动配置（推荐包含 Vue Router 和 Vuex）。

基础结构

在 src/views 目录下创建 Login.vue：

<template>
  <div class="login-container">
    <h1>用户登录</h1>
    <form @submit.prevent="handleSubmit">
      <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: {
    handleSubmit() {
      // 登录逻辑
    }
  }
}
</script>

<style scoped>
.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}
.form-group {
  margin-bottom: 15px;
}
</style>

路由配置

修改 src/router/index.js：

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
    }
  ]
})

表单验证

安装 VeeValidate：

npm install vee-validate

在 main.js 中引入：

import { ValidationProvider, extend } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules'

extend('required', required)
extend('email', email)

Vue.component('ValidationProvider', ValidationProvider)

更新登录表单：

<ValidationProvider rules="required|email" v-slot="{ errors }">
  <input v-model="username" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

状态管理

在 Vuex 中存储用户状态：

// store/index.js
export default new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    }
  }
})

登录逻辑

methods: {
  async handleSubmit() {
    try {
      const response = await axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      this.$store.commit('setUser', response.data.user)
      this.$router.push('/dashboard')
    } catch (error) {
      alert('登录失败')
    }
  }
}

安全增强

添加 CSRF 防护：

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

响应式设计

使用媒体查询优化移动端显示：

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

完整功能实现

添加记住密码功能
实现密码显示/隐藏切换
添加第三方登录（如 Google、GitHub）
实现验证码功能
添加登录加载状态

部署注意事项

确保使用 HTTPS
设置合理的 Cookie 安全策略
实现密码加密传输
添加登录失败次数限制

vue实现登录页

标签: vue

分享给朋友：

vue实现同步

Vue 实现同步的方法在 Vue 中实现同步操作通常涉及数据绑定、状态管理和异步操作的处理。以下是几种常见的方法：使用计算属性（Computed Properties）计算属性基于响应式依赖…

vue实现token

Vue 中实现 Token 认证的方法在 Vue 中实现 Token 认证通常涉及前端与后端的交互，包括 Token 的获取、存储、发送和刷新等操作。以下是具体实现步骤：获取 Token 用户…

vue tab实现

Vue Tab 实现方法使用动态组件实现 Tab 在 Vue 中可以通过动态组件 <component :is="currentTab"> 结合 v-for 和 v-bind 实现 Ta…

vue实现机制

Vue 实现机制的核心原理 Vue.js 的核心实现机制主要基于响应式系统、虚拟 DOM 和组件化设计。以下是关键实现细节：响应式系统 Vue 通过 Object.defineProperty（…

vue实现popup

Vue 实现 Popup 弹窗使用 Vue 原生组件创建一个基本的 Vue 组件作为弹窗，通过 v-if 或 v-show 控制显示隐藏。 <template> <div&…

vue实现portal

Vue 实现 Portal 功能 Portal 是一种将子节点渲染到父组件 DOM 层级之外的 DOM 节点的技术，常用于实现模态框、弹出层等需要脱离当前组件层级的场景。Vue 可以通过多种方式实现…

vue实现登录页