Vue.js+Element UI 登录界面开发详解【附源码】

成果图：

---

一、技术架构解析

本登录模块采用前后端分离架构，前端基于Vue.js+Element UI实现交互逻辑，主要包含以下技术要点：

1. ​组件化开发 - 采用单文件组件形式组织代码
2. ​响应式设计 - 实现多终端适配
3. ​状态管理 - 使用sessionStorage维护会话状态
4. ​安全验证 - 前后端双重表单校验机制

---

二、核心实现原理

1. 数据驱动视图

通过Vue的响应式系统实现数据绑定：

data() {return {loginForm: {username: '',password: ''}}
}

• 表单输入与loginForm对象双向绑定
• 数据变更自动触发视图更新

2. 表单验证机制

rules: {username: [{ required: true, message: '请输入用户名' },{ min: 3, max: 20, message: '长度3-20字符' }]
}

• 实时校验输入合法性
• 支持多种验证类型（必填、长度、正则等）

3. 登录流程控制

this.$axios.post('/user/login', loginData).then(res => {sessionStorage.setItem("CurUser", JSON.stringify(res.data.user));this.$router.replace('/Index');})

• 使用axios发送POST请求
• 会话存储采用sessionStorage
• 路由跳转通过Vue Router实现

---

三、关键技术点详解

1. 防重复提交设计

confirm_disabled: false, // 状态控制// 请求开始
this.confirm_disabled = true; // 请求结束
.finally(() => {this.confirm_disabled = false;
})

• 按钮禁用状态联动
• 确保请求生命周期控制

2. 异常处理机制

.catch(error => {this.$message.error('服务器连接异常');
})

• 网络异常统一处理
• Element UI消息提示组件

3. 路由守卫集成

this.$router.replace('/Index');

• 登录成功替换当前路由
• 避免回退到登录页

---

四、完整代码

<template><div class="loginBody"><div style="width:97%;text-align:center;color:white;padding: 100px 100px 0 0;font-size:22px;"><h1>新能源汽车充电监管系统</h1></div><div class="loginDiv"><div class="login-content"><h1 class="login-title">用户登录</h1><el-form :model="loginForm" label-width="100px" :rules="rules" ref="loginForm" style="margin-left: 10px"><el-form-item label="用户名" prop="username"><el-input style="width: 200px" type="text" v-model="loginForm.username"autocomplete="off" size="medium"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input style="width: 200px" type="password" v-model="loginForm.password"show-password autocomplete="off" size="medium" @keyup.enter.native="confirm"></el-input></el-form-item><el-form-item><el-button type="primary" size="medium" @click="confirm" :disabled="confirm_disabled">登 录</el-button><el-button type="primary" size="medium" @click="$router.push('/Register')" style="margin-left: 50px">注 册</el-button></el-form-item></el-form></div></div></div>
</template><script>
export default {name: "Login",data() {return {confirm_disabled: false,loginForm: {username: '',  // 字段名改为usernamepassword: ''},rules: {username: [    // 对应字段修改{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 20, message: '长度在3到20个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }]}}},methods: {confirm() {this.confirm_disabled = true;this.$refs.loginForm.validate((valid) => {if (valid) {// 构造符合新接口要求的请求体const loginData = {username: this.loginForm.username,password: this.loginForm.password};this.$axios.post(this.$httpUrl + '/user/login', loginData).then(res => res.data).then(res => {if (res.code === 200) {// 存储用户信息（根据实际返回数据结构调整）sessionStorage.setItem("CurUser", JSON.stringify(res.data.user));// 跳转前显示欢迎提示this.$message.success(`欢迎回来，${res.data.user.realName || ''}!`);this.$router.replace('/Index');} else {this.$message.error(res.msg || '登录失败，请检查用户名和密码');}}).catch(error => {console.error('登录请求错误:', error);this.$message.error('服务器连接异常');}).finally(() => {this.confirm_disabled = false;});} else {this.confirm_disabled = false;return false;}});}}
}
</script><style scoped>
/* 保持原有样式不变 */
.loginBody {position: absolute;width: 100%;height: 100%;background: url('../assets/home.jpg');background-size: cover;overflow-x: hidden;
}.loginDiv {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 450px;height: 330px;background: rgba(255, 255, 255, 0.95);border-radius: 15px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}.login-title {margin: 20px 0;text-align: center;color: #303133;
}.login-content {padding: 25px;
}
</style>

---

五、开发注意事项

环境配置

• 安装Element UI：npm install element-ui
• 配置axios：需在main.js中全局引入

接口对接

• 修改$httpUrl为实际后端地址
• 根据实际API响应结构调整res.data.data.user路径