当前位置：首页 > news >正文

前端登录注册页面springboot+vue2全开发！

news 来源：原创 2025/5/25 17:14:39

需求目标：

有“登录界面”和“注册界面”以及“功能操作界面”：
我们打开程序会自动进入“登录界面”，如果密码输入正确则直接进入“功能操作界面”，在“登录界面”我们可以点击注册进入“注册页面”，注册好了可以再跳回到“登录界面”进行登录。

代码实现：

（1）登录操作后端开发

见我博客：http://t.csdnimg.cn/5MgKf

（2）注册操作后端开发

见我博客：http://t.csdnimg.cn/dYHX0

（3）登录操作前端开发

见我博客：http://t.csdnimg.cn/hFiFa

注：其中页面部分LoginUser.vue替换成我下面崭新的页面：

<template><el-container class="custom-container"><el-main><div class="login-container"><h2>用户登录</h2><div v-if="errorMessage" class="error-message">{{ errorMessage }}</div><form @submit.prevent="login" class="login-form"><input type="text" v-model="username" placeholder="用户名" required><div class="password-container"><input:type="showPassword ? 'text' : 'password'"v-model="password"placeholder="密码"required/><button type="button" class="toggle-password" @click="togglePassword">{{ showPassword ? '隐藏' : '显示' }}</button></div><!-- 新增的注册提示 --><div class="register-prompt">没有用户？ <router-link to="/register" class="register-link">点击注册</router-link></div><button type="submit">登录</button></form></div></el-main></el-container>
</template><script>
import axios from 'axios';export default {data() {return {username: '', // 用户名password: '', // 密码errorMessage: '', // 错误信息successMessage: '', // 成功信息showPassword: false, // 控制密码是否明文显示};},methods: {async login() {try {const response = await axios.post('user', {username: this.username,password: this.password,});// 处理返回结果if (response.data.flag) {this.successMessage = response.data.msg; // 显示登录成功的信息alert(this.successMessage); // 可以弹出提示或者在页面上显示// 登录成功后，跳转到指定的路由this.$router.push({ path: '/dashboard' });} else {// 如果登录失败，显示错误信息this.errorMessage = response.data.msg || '登录失败，请重试。';}} catch (error) {// 捕获网络错误或其他异常this.errorMessage = '网络错误，请稍后重试。';}},togglePassword() {this.showPassword = !this.showPassword;},},
};
</script><style scoped>
body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;
}.el-main {display: flex;justify-content: center;align-items: center;height: 100vh;
}
.login-container {background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */padding: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);max-width: 400px; /* 调整表单的最大宽度 */width: 100%; /* 确保容器宽度根据屏幕自适应 */height: 350px;margin: auto;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* 增强阴影效果 */border: 1px solid #ccc; /* 添加边框 */
}
.custom-container {height: 700px;border: 1px solid #eee;background-image: url('../../assets/背景图片 (2).png');background-size: cover; /* 根据需要调整背景图片的缩放方式 */background-position: center; /* 背景居中 */
}h2 {text-align: center;color: #333;
}
form {display: flex;flex-direction: column;align-items: center; /* 让输入框和按钮居中 */
}
.password-container {display: flex;align-items: center;position: relative;width: 100%;max-width: 300px;border-radius: 4px;
}
input {width: 100%;max-width: 300px;margin: 10px 0;padding: 12px;border: 1px solid #ddd;border-radius: 4px;box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);box-sizing: border-box;transition: box-shadow 0.3s ease;
}
input:focus {box-shadow: 0 0 8px rgba(74, 144, 226, 0.5);border-color: #4A90E2;
}
.toggle-password {position: absolute;right: 10px;top: 50%;transform: translateY(-50%);background: none;border: none;color: #007bff;cursor: pointer;width: auto; /* 让按钮宽度自适应文字 */padding: 0;  /* 去掉内边距，避免撑开 */font-size: 14px; /* 控制文字大小 */
}.register-prompt {text-align: right;width: 100%;max-width: 300px;font-size: 14px;color: #333;margin-bottom: 10px;
}.register-link {color: #007bff;text-decoration: none;cursor: pointer;
}
.register-link:hover {text-decoration: underline;
}button {background: linear-gradient(90deg, #4A90E2, #9013FE); /* 渐变色按钮 */color: white;padding: 10px;border: none;border-radius: 8px;cursor: pointer;box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
}
button:hover {background: linear-gradient(90deg, #357ABD, #7316E5); /* 鼠标悬浮时颜色变化 */
}.error-message {color: red;text-align: center;
}
</style>

（4）注册操作前端开发

见我博客：http://t.csdnimg.cn/8fpLg

注：其中页面部分RegisterUser.vue替换成我下面崭新的页面：

<template><el-container class="custom-container"><el-main><div class="login-container"><h2>用户注册</h2><div v-if="errorMessage" class="error-message">{{ errorMessage }}</div><form @submit.prevent="register" class="login-form"><input type="text" v-model="username" placeholder="用户名" required><div class="password-container"><input:type="showPassword ? 'text' : 'password'"v-model="password"placeholder="密码"required/><button type="button" class="toggle-password" @click="togglePassword">{{ showPassword ? '隐藏' : '显示' }}</button></div><button type="submit">注册</button></form></div></el-main></el-container>
</template><script>
import axios from 'axios';export default {data() {return {username: '', // 用户名password: '', // 密码errorMessage: '', // 错误信息successMessage: '', // 成功信息showPassword: false, // 控制密码是否明文显示};},methods: {async register() {try {const response = await axios.post('/register', {username: this.username,password: this.password,});// 处理返回结果if (response.data.flag) {this.successMessage = response.data.msg; // 显示注册成功的信息alert(this.successMessage); // 可以弹出提示或者在页面上显示// 注册成功后，跳转到指定的路由this.$router.push({ path: '/login' });} else {// 如果注册失败，显示错误信息this.errorMessage = response.data.msg || '注册失败，请重试。';}} catch (error) {// 捕获网络错误或其他异常this.errorMessage = '网络错误，请稍后重试。';}},togglePassword() {this.showPassword = !this.showPassword;},},
};
</script><style scoped>
/* 样式保持不变 */
body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;
}.el-main {display: flex;justify-content: center;align-items: center;height: 100vh;
}
.login-container {background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */padding: 20px;border-radius: 5px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);max-width: 400px; /* 调整表单的最大宽度 */width: 100%; /* 确保容器宽度根据屏幕自适应 */height: 300px;margin: auto;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* 增强阴影效果 */border: 1px solid #ccc; /* 添加边框 */
}
.custom-container {height: 700px;border: 1px solid #eee;background-image: url('../../assets/背景图片 (3).png');background-size: cover; /* 根据需要调整背景图片的缩放方式 */background-position: center; /* 背景居中 */}h2 {text-align: center;color: #333;
}
form {display: flex;flex-direction: column;align-items: center; /* 让输入框和按钮居中 */
}
.password-container {display: flex;align-items: center;position: relative;width: 100%;max-width: 300px;border-radius: 4px;
}
input {width: 100%;max-width: 300px;margin: 10px 0;padding: 12px;border: 1px solid #ddd;border-radius: 4px;box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);box-sizing: border-box;transition: box-shadow 0.3s ease;
}
input:focus {box-shadow: 0 0 8px rgba(74, 144, 226, 0.5);border-color: #4A90E2;
}
.toggle-password {position: absolute;right: 10px;top: 50%;transform: translateY(-50%);background: none;border: none;color: #007bff;cursor: pointer;width: auto; /* 让按钮宽度自适应文字 */padding: 0;  /* 去掉内边距，避免撑开 */font-size: 14px; /* 控制文字大小 */
}button {background: linear-gradient(90deg, #4A90E2, #9013FE); /* 渐变色按钮 */color: white;padding: 10px;border: none;border-radius: 8px;cursor: pointer;box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
}
button:hover {background: linear-gradient(90deg, #357ABD, #7316E5); /* 鼠标悬浮时颜色变化 */
}.error-message {color: red;text-align: center;
}
</style>

（5）前端功能页面开发

<template><el-container style="height: 700px; border: 1px solid #eee"><el-header style="font-size:40px;background-color: rgb(238, 241, 246)">燃料co2排放量管理系统</el-header><el-container><el-aside width="200px" class="custom-sidebar"><el-menu :default-openeds="['1', '3']" class="custom-menu"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>系统管理</template><el-menu-item index="1-1" class="deep-blue-button"><router-link to="/fuel">燃料管理</router-link></el-menu-item><el-menu-item index="1-2" class="deep-blue-button"><router-link to="/stuff">员工管理</router-link></el-menu-item></el-submenu></el-menu></el-aside><el-main style="position: relative; overflow: hidden;"><img src="./being必应桌面壁纸.jpg" alt="背景图片" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"><!-- 主要内容 --></el-main></el-container></el-container>
</template><script>
// 脚本部分保持不变
</script><style>
.custom-sidebar {background-color: #2c3e50;border-right: none;
}.custom-menu {background-color: transparent;
}.custom-menu .el-submenu__title,
.custom-menu .el-menu-item {color: #ecf0f1;
}.custom-menu .el-menu-item:hover,
.custom-menu .el-submenu__title:hover {background-color: #34495e;
}.custom-menu .deep-blue-button {background-color: #f7f7f7;  /* 浅灰色 */margin: 5px 0;border-radius: 4px;
}.custom-menu .deep-blue-button:hover {
background-color: #6c757d;  /* 灰蓝色 */}</style>

（6）前端vue路由跳转路径管理

先展现一下我前端的文件保存的路径：

index.js文件内容：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)const routes = [{path: '/fuel',name: 'fuel',component: () => import( '../views/element/FuelManagement.vue')},{path: '/stuff',name: 'stuff',component: () => import( '../views/element/StuffManagement.vue')},{path: '/',name:'login',component: () => import('../views/login/LoginUser.vue'),},{path: '/login',name:'login',component: () => import('../views/login/LoginUser.vue'),},{path: '/register',name:'register',component: () => import('../views/register/RegisterUser.vue'),},{path: '/dashboard',name:'dashboard',component: () => import('../views/dashboard/DashBoard1.vue'),} 
]const router = new VueRouter({routes
})export default router