login elementui

使用 Element UI 实现登录功能

Element UI 提供了丰富的表单组件，可以快速构建登录界面。以下是一个完整的登录表单实现示例：

安装 Element UI 确保项目中已安装 Element UI。可以通过 npm 或 yarn 安装：

npm install element-ui

引入 Element UI 在 main.js 中全局引入 Element UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

创建登录组件 创建一个 Login.vue 组件，包含表单验证功能：

<template>
  <div class="login-container">
    <el-form :model="loginForm" :rules="rules" ref="loginForm" 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"
          @keyup.enter.native="handleLogin"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          @click.native.prevent="handleLogin"
          style="width:100%"
        >登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          // 调用登录接口
          this.$axios.post('/login', this.loginForm)
            .then(response => {
              this.loading = false
              // 处理登录成功逻辑
              this.$router.push('/dashboard')
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    }
  }
}
</script>

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

.login-form {
  width: 350px;
  padding: 25px 25px 5px 25px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
}

.title {
  margin: 0 auto 30px;
  color: #707070;
  text-align: center;
}
</style>

表单验证配置

Element UI 的表单验证通过 rules 属性配置。上述示例中定义了基本的必填验证：

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

登录请求处理

登录按钮点击时会触发 handleLogin 方法，该方法会先验证表单，验证通过后发送登录请求：

handleLogin() {
  this.$refs.loginForm.validate(valid => {
    if (valid) {
      this.loading = true
      this.$axios.post('/api/login', this.loginForm)
        .then(response => {
          // 存储token
          localStorage.setItem('token', response.data.token)
          this.$router.push('/dashboard')
        })
        .catch(error => {
          this.$message.error(error.response.data.message)
        })
        .finally(() => {
          this.loading = false
        })
    }
  })
}

样式优化

登录页面通常需要全屏居中显示，可以通过以下 CSS 实现：

.login-container {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url('~@/assets/login-bg.jpg') no-repeat center;
  background-size: cover;
}

.login-form {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.9);
  width: 400px;
  padding: 25px 25px 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

响应式处理

针对不同屏幕尺寸可以添加媒体查询：

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