(1)后端部分
后端代码的构造框架见我之前的博客:http://t.csdnimg.cn/5MgKf
(2)前端部分
①前端页面login页面代码:LoginUser.vue
<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-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>
<input type="password" v-model="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
</div>
</el-main>
</el-container>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
username: '', // 用户名
password: '', // 密码
errorMessage: '', // 错误信息
successMessage: '' // 成功信息
};
},
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); // 可以弹出提示或者在页面上显示
} else {
// 如果登录失败,显示错误信息
this.errorMessage = response.data.msg || '登录失败,请重试。';
}
} catch (error) {
// 捕获网络错误或其他异常
this.errorMessage = '网络错误,请稍后重试。';
}
},
},
};
</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: white;
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;
}
h2 {
text-align: center;
color: #333;
}
form {
display: flex;
flex-direction: column;
align-items: center; /* 让输入框和按钮居中 */
}
input {
width: 100%; /* 让输入框的宽度适应容器 */
max-width: 300px; /* 限制输入框最大宽度 */
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box; /* 包含padding和border在width中 */
}
button {
width: 100%; /* 让按钮的宽度适应容器 */
max-width: 300px; /* 限制按钮最大宽度 */
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
box-sizing: border-box; /* 包含padding和border在width中 */
}
button:hover {
background-color: #45a049;
}
.error-message {
color: red;
text-align: center;
}
</style>
②设置index.js访问路径
{
path: '/',
name:'login',
component: () => import('../views/login/LoginUser.vue'),
}
③页面效果
(3)前后端数据对接
在LoginUser.vue中,通过使用axios完成异步请求的访问:
好啦,希望能够帮助到大家!