vue登录页面实现

Vue 登录页面实现

创建 Vue 项目

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

vue create login-page
cd login-page

安装必要依赖

如果需要使用 UI 组件库（如 Element UI）：

npm install element-ui

登录页面组件结构

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

<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
      <h3 class="title">系统登录</h3>
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          placeholder="用户名"
          prefix-icon="el-icon-user"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="密码"
          prefix-icon="el-icon-lock"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          style="width:100%"
          @click="handleLogin"
        >登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

添加数据与验证逻辑

在 <script> 部分添加数据和方法：

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

添加样式

在 <style> 部分添加样式：

<style scoped>
.login-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2d3a4b;
}

.login-form {
  width: 350px;
  padding: 25px 25px 5px 25px;
  background: #fff;
  border-radius: 6px;
}

.title {
  margin: 0 auto 30px auto;
  text-align: center;
  color: #333;
}
</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
    }
  ]
})

实现登录状态管理

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

import { login } from '@/api/user'

const state = {
  token: localStorage.getItem('token') || ''
}

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

const actions = {
  login({ commit }, userInfo) {
    return new Promise((resolve, reject) => {
      login(userInfo).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  }
}

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

创建 API 接口

在 src/api/user.js 中定义登录接口：

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    data
  })
}

请求拦截处理

在 src/utils/request.js 中添加请求拦截器：

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['Authorization'] = 'Bearer ' + getToken()
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

权限控制

在路由守卫中添加登录验证：

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

响应式布局优化

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

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