vue 登录页面实现

实现 Vue 登录页面的步骤

创建 Vue 项目

使用 Vue CLI 创建一个新项目：

vue create login-page

选择默认配置或手动配置，根据需求添加 Router 和 Vuex。

安装依赖

如果需要使用 UI 组件库，可以安装 Element UI 或 Vuetify：

npm install element-ui

创建登录组件

在 src/views 或 src/components 下创建 Login.vue 文件：

<template>
  <div class="login-container">
    <el-form :model="loginForm" :rules="rules" ref="loginForm" class="login-form">
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="loginForm.password" type="password" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 调用登录 API
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push('/dashboard')
            })
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login-form {
  width: 300px;
}
</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
    }
  ]
})

创建 Vuex 存储

在 src/store/modules/user.js 中创建用户模块：

const state = {
  token: ''
}

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  }
}

const actions = {
  login({ commit }, userInfo) {
    return new Promise((resolve, reject) => {
      // 模拟 API 调用
      setTimeout(() => {
        commit('SET_TOKEN', 'mock-token')
        resolve()
      }, 1000)
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

添加全局样式

在 src/assets/css 下创建全局样式文件，并在 main.js 中引入：

/* reset.css */
body {
  margin: 0;
  padding: 0;
}

实现表单验证

使用 Element UI 的表单验证功能，确保用户输入符合要求：

rules: {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
  ]
}

添加登录状态管理

在路由守卫中检查登录状态：

router.beforeEach((to, from, next) => {
  const hasToken = store.getters['user/token']
  if (to.path === '/login') {
    if (hasToken) {
      next('/')
    } else {
      next()
    }
  } else {
    if (!hasToken) {
      next('/login')
    } else {
      next()
    }
  }
})

实现记住密码功能

在 Login.vue 中添加记住密码选项：

<el-form-item>
  <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
</el-form-item>

添加第三方登录

集成 Google 或 GitHub 登录：

methods: {
  handleGoogleLogin() {
    window.location.href = 'https://accounts.google.com/o/oauth2/auth?client_id=YOUR_CLIENT_ID&redirect_uri=YOUR_REDIRECT_URI&response_type=code&scope=email profile'
  }
}

响应式设计

使用媒体查询确保在不同设备上正常显示：

@media (max-width: 768px) {
  .login-form {
    width: 90%;
  }
}