【项目实训】前端登录页面的实现

在Web开发中，打造一个直观、美观且易于使用的登录界面是提高用户体验的重要步骤。我们利用Vue.js和Element Plus库实现了一个响应式且功能完善的登录界面。

1. 技术栈介绍

在本项目中，我们主要使用了以下技术和工具：

• Vue.js：一种渐进式JavaScript框架，用于构建用户界面。
• Element Plus：一套基于Vue 3.0的桌面端组件库，提供了丰富的组件和样式，适合快速开发企业级应用。
• TypeScript：JavaScript的一个超集，添加了可选的静态类型检查。

2.界面样式与布局

界面的布局采用了Element Plus的el-container、el-header、和el-main组件，这些组件结合提供了一个结构化且易于维护的页面框架。

• 容器设置：使用el-container作为最外层容器，其中el-header用于显示标题，el-main用于包含登录表单，实现了视觉上的分层效果。
• 背景与风格：界面背景采用了全屏的图片，设置background-size: cover确保背景图覆盖整个容器，通过background-position: center保证图片的中心对齐。

3.功能组件与交互

• 输入框和图标：使用el-input组件结合User和Lock图标提供输入框，这不仅增加了视觉效果，还通过图标直观地告诉用户应该输入什么信息。
• 登录按钮：一个明显的“登录”按钮，使用el-button设置为主要按钮样式，确保用户可以容易地找到并操作。

4.交互反馈的实现

登录反馈：使用Element Plus的ElMessage组件提供操作反馈。当用户输入正确的账号密码后，显示成功消息并跳转；输入错误时，则显示错误提示。

下面是界面实现的代码：

<script setup lang='ts'>
import { ref } from 'vue'
import {useRouter} from 'vue-router'
import { ElMessage } from 'element-plus'
import {User, Lock} from '@element-plus/icons-vue'

const router = useRouter()

const account = ref('')
const password = ref('')

const Login = () => {
    if(account.value == 'admin' && password.value == '123456'){
        ElMessage({
            message: 'admin,欢迎您！',
            type: 'success',
        })
        router.push('/main')
    }
    else{
        ElMessage({
            message: '账号或密码错误，请重试！',
            type: 'error',
        })
    }
}

</script>

<template>
    <el-container class="LoginContainer">
        <el-header style="width: 100%;height: 15%;color: #fff;font-size: 60px;font-weight: bolder;">DSBTPG</el-header>
        <el-main style="width: 100%;height: 85%;position: relative;">
            <div class="LoginDiv">
                <div style="width: 100%;margin-top: 5%;margin-bottom: 5%;text-align: center;font-size: xx-large;font-weight: bolder;color: aliceblue;">LOG IN</div>
                <el-row justify="center" class="RowContainer">
                    <el-col :span="2">
                        <el-icon :size="30" color="#fff"><User /></el-icon>
                    </el-col>
                    <el-col :span="14">
                        <el-input v-model="account" style="width: 100%" placeholder="请输入账号" />
                    </el-col>
                </el-row>
                <el-row justify="center" class="RowContainer">
                    <el-col :span="2">
                        <el-icon :size="30" color="#fff"><Lock /></el-icon>
                    </el-col>
                    <el-col :span="14">
                        <el-input
                            v-model="password"
                            style="width: 100%"
                            type="password"
                            placeholder="请输入密码"
                            show-password
                        />
                    </el-col>
                </el-row>
                <el-row justify="center" class="RowContainer">
                    <el-col :span="12">
                        <el-button type="primary" style="width: 100%;" plain @click="Login">登录</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-main>
    </el-container>
</template>

<style scoped>
.LoginContainer{
    width: 100%;
    height: 100%;
    background-image: url('@/assets/background.jpg');
    background-size: cover;
    background-position: center;
}

.LoginDiv{
    width: 30%;
    height: 40%;
    background:  linear-gradient(135deg, rgba(151, 51, 255, 0.8) 0%, rgba(82, 106, 255, 0.8) 42%, rgba(17, 185, 255, 1) 100%);
    position: absolute;
    top: 25%;
    right: 10%;
    box-shadow: 5px 5px 3px #888888;
}

.RowContainer{
    width: 100%;
    height: 15%;
    margin-top: 2.5%;
    margin-bottom: 2.5%;
}
<style>