前后端springboot+vue2实现登录功能全流程！

（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完成异步请求的访问：

好啦，希望能够帮助到大家!