vue 登录页面实现

Vue 登录页面实现

创建Vue项目

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

vue create login-app

选择默认配置或手动配置项目依赖。

安装必要依赖

安装路由和表单验证库（如Vuelidate）：

npm install vue-router vuelidate

项目结构

典型结构如下：

src/
├── components/
│   └── LoginForm.vue
├── views/
│   └── Login.vue
├── router/
│   └── index.js
├── App.vue
└── main.js

实现登录表单组件

在LoginForm.vue中创建基础表单：

<template>
  <form @submit.prevent="handleSubmit">
    <div>
      <label>Email</label>
      <input v-model="email" type="email" required>
    </div>
    <div>
      <label>Password</label>
      <input v-model="password" type="password" required>
    </div>
    <button type="submit">Login</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    handleSubmit() {
      // 处理登录逻辑
    }
  }
}
</script>

添加表单验证

使用Vuelidate进行验证：

<script>
import { required, email } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      email: '',
      password: ''
    }
  },
  validations: {
    email: { required, email },
    password: { required }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // 验证通过，提交表单
      }
    }
  }
}
</script>

设置路由

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

实现登录视图

在views/Login.vue中使用登录表单：

<template>
  <div class="login-container">
    <h1>Login</h1>
    <LoginForm />
  </div>
</template>

<script>
import LoginForm from '@/components/LoginForm.vue'

export default {
  components: {
    LoginForm
  }
}
</script>

添加样式

为登录页面添加基本样式：

.login-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

form div {
  margin-bottom: 15px;
}

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

input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

button {
  background: #42b983;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
}

处理登录逻辑

在登录方法中实现API调用：

methods: {
  async handleSubmit() {
    try {
      const response = await axios.post('/api/login', {
        email: this.email,
        password: this.password
      })
      // 处理成功登录
      localStorage.setItem('token', response.data.token)
      this.$router.push('/dashboard')
    } catch (error) {
      console.error('Login failed:', error)
    }
  }
}

添加状态管理（可选）

使用Vuex管理登录状态：

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

实现登录重定向

在路由守卫中检查认证状态：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.isAuthenticated) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

添加错误提示

在表单中显示验证错误：

<template>
  <div v-if="$v.email.$error">
    <span v-if="!$v.email.required">Email is required</span>
    <span v-if="!$v.email.email">Invalid email format</span>
  </div>
</template>