当前位置：首页 > 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'

响应式设计

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

vue实现登录页

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

完整功能实现

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

部署注意事项

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

标签: vue

分享给朋友：

vue设计与实现目录

以下是《Vue设计与实现》一书的典型目录结构（根据常见技术书籍及Vue核心内容整理）：响应式系统响应式数据的基本原理依赖收集与触发更新实现简易响应式系统 Proxy与Reflec…

vue select实现

Vue Select 实现方法在 Vue 中实现下拉选择功能可以使用原生 <select> 标签或第三方库如 vue-select。以下是两种方法的详细说明：原生 HTML Sele…

vue实现bootstrap

Vue 中集成 Bootstrap 的方法在 Vue 项目中集成 Bootstrap 可以通过以下方式实现，涵盖样式、组件和交互功能。安装 Bootstrap 依赖通过 npm 或 yarn…

vue实现拍照

Vue实现拍照功能在Vue中实现拍照功能通常需要结合浏览器的MediaDevices API和Canvas元素。以下是具体实现方法：安装依赖（可选）如果需要更简单的封装，可以安装vue-web…

vue实现动画

Vue 实现动画的方法 Vue 提供了多种方式来实现动画效果，包括内置的过渡系统、第三方动画库以及直接操作 CSS 或 JavaScript 动画。使用 Vue 内置过渡系统 Vue 的 <…

vue实现flbook

Vue 实现类似 Flbook 的翻页效果要实现类似 Flbook 的翻页效果，可以使用 Vue 结合 CSS 动画和 JavaScript 事件处理。以下是实现方法：安装依赖需要安装 vue…

vue实现登录页