springboot+vue显示当前用户功能

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量1k 收藏 24
点赞数 26
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77613763/article/details/141603279
版权

现在的前端界面如下图：显示“当前用户”是静态不可修改的，并且没有实现“个人中心”和“退出登录”按钮的逻辑，所以接下来就要对前后端进行修改实现“当前用户”真正显示的是当前用户的名字。

一.简要概述

后端部分：

  1. 用户登录和信息获取 API：

    • 登录认证控制器（例如 AuthController）：
      • 确保登录成功后，返回用户的基本信息（如姓名、角色、token等）。
    • 用户信息控制器（例如 UserController）：
      • 创建一个 API 来获取当前登录用户的信息，例如 /api/user/me。这个 API 需要返回用户的详细信息，包括姓名、角色等。
    • 安全配置类（例如 SecurityConfig）：
      • 配置安全策略以确保只有登录用户可以访问用户信息的 API。

  2. 退出登录 API（可选）：

    • 如果你使用会话管理（如 Spring Security），可以创建一个登出 API，清除会话或 token。
    • 如果使用 JWT，通常不需要后端支持的登出逻辑，前端只需清除 token 即可。

前端部分：

  1. 获取并显示用户名：

    • Vuex 状态管理（或类似的全局状态管理）：
      • 在登录成功后，将用户的姓名、token 等信息保存到 Vuex 状态管理或 localStorage。
    • 头部组件（Header.vue）：
      • 在 mounted 生命周期钩子中，通过 Vuex 或 localStorage 获取用户信息，并将用户名显示在右上角。

  2. 退出登录逻辑：

    • 头部组件（Header.vue）：
      • 在 handleCommand 方法中处理登出逻辑，清除 Vuex 或 localStorage 中的用户信息，然后使用 this.$router.push('/login') 跳转到登录页面。

二.后端代码编写

后端中已经编写了登录的方法（根据账号返回User对象），使用gpt让我重新创建一个方法（根据id返回User对象），亲测没用，因为前端在登录的时候就已经获得了对象，所以不用再创建一个方法，controller代码如下：

package com.example.controller;
//登录验证类

import com.example.config.ApiResponse;
import com.example.entity.User;
import com.example.service.UserService;
import lombok.Data;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api/auth")
public class UserController {

    @Autowired
    private UserService userService;

    @PostMapping("/login")
    public ResponseEntity<ApiResponse<?>> login(@RequestBody LoginRequest loginRequest) {
        User user = userService.selectByPhone2(loginRequest.getPhoneNumber());
        if (user != null && userService.checkPassword(loginRequest.getPassword(), user.getUserPassword())) {
            return ResponseEntity.ok(ApiResponse.success("登录成功",user));
        } else {
            return ResponseEntity.status(401).body(ApiResponse.error("登录失败"));
        }
    }

    // 登录请求的内部类
    @Data
    public static class LoginRequest {
        private String phoneNumber;
        private String password;
    }

//    @GetMapping("/profile")
//    public ResponseEntity<ApiResponse<?>> getUserProfile(@RequestParam Integer userId) {
//        User user = userService.selectById2(userId);
//        if (user != null) {
//            return ResponseEntity.ok(ApiResponse.success("获取用户信息成功", user));
//        } else {
//            return ResponseEntity.status(404).body(ApiResponse.error("未找到用户"));
//        }
//    }

}

三.前端代码编写

Login.vue:

<template>
  <div class="login-container">
    <div class="form-container">
      <h2>登录界面</h2>
      <form @submit.prevent="login">
        <div class="form-group">
          <label for="phoneNumber">账号：</label>
          <input
              type="text"
              id="phoneNumber"
              v-model="phoneNumber"
              placeholder="请输入登录账号"
              required
          />
        </div>
        <div class="form-group">
          <label for="password">密码：</label>
          <input
              type="password"
              id="password"
              v-model="password"
              placeholder="请输入密码"
              required
          />
        </div>
        <button type="submit">登录</button>
      </form>
      <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
    </div>
  </div>
</template>


<script>
import axios from 'axios';

export default {
  data() {
    return {
      phoneNumber: '',
      password: '',
      errorMessage: null,
    };
  },
  methods: {
    async login() {
      try {
        const response = await axios.post('http://localhost:8081/api/auth/login', {
          phoneNumber: this.phoneNumber,
          password: this.password,
        });
        // console.log('登录响应:', response.data.data); // 查看响应数据
        // console.log('登录响应:', response.data.data.userName); // 查看响应数据
        if (response.data.success) {
          this.$emit('login-success', {
            picture: response.data.data.userPicture, // 用户头像链接
            name: response.data.data.userName // 用户名字
          });//多返回userPicture和userName，这里是双层数组，使用console.log可以发现
          this.$message.success("登录成功");
        } else {
          this.errorMessage = response.data.message;
        }
      } catch (error) {
        this.errorMessage = '登录失败，请检查账号和密码';
      }
    },
  },
};
</script>

<style scoped>
.login-container {
  position: relative;
  width: auto;
  height: 100vh;
  background-image: url('@/images/2.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 10%;
}

.form-container {
  width: 300px;
  padding: 30px;
  border: 1px solid rgba(0, 0, 0, 0.2); /* 边框颜色也设置为半透明 */
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.95); /* 使用rgba设置背景色为半透明 */

  position: absolute;
  top: 50%;
  right: 15%;
  transform: translateY(-50%);
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

.error {
  color: red;
  margin-top: 15px;
  text-align: center;
}
</style>

App.vue

<template>
  <div>
    <el-container v-if="isLoggedIn" style="height: 100%;">
      <el-header style="width: 100% ;padding: 0">
        <Header :userPicture="userPicture" :userName="userName" />
      </el-header>
      <div class="divider"></div> <!-- 分割线 -->
      <el-container style="width: 100%">
        <el-aside width="200px">
          <Sidebar @select="updateContent" />
        </el-aside>
        <el-main>
          <Content :selectedSection="selectedSection" />
        </el-main>
      </el-container>
    </el-container>

    <div v-else>
      <Login @login-success="handleLoginSuccess" />
    </div>
  </div>
</template>

<script>
import Header from './components/Header.vue';
import Sidebar from './components/Sidebar.vue';
import Content from './components/Content.vue';
import Login from './components/Login.vue';

export default {
  components: {
    Header,
    Sidebar,
    Content,
    Login,
  },
  data() {
    return {
      selectedSection: '0',
      isLoggedIn: false, // 登录状态
      userPicture:'', // 用户头像
      userName: '' // 用户名字
    };
  },
  methods: {
    updateContent(index) {
      this.selectedSection = index;
    },
    handleLoginSuccess(userData) {//接收Login返回的数据并传给Header
      this.isLoggedIn = true; // 登录成功后更新状态
      this.userPicture = userData.picture; // 假设 userData 包含头像链接
      this.userName = userData.name; // 假设 userData 包含用户名

      this.$nextTick(() => {
        console.log('头像链接:', this.userPicture); // 查看更新后的数据
        console.log('用户名:', this.userName); // 查看更新后的数据
      });

    }
  }
};
</script>

Header.vue:

<!-- 头部 -->
<template>
  <div class="header">
    <img src="@/images/1.jpg" alt="Logo" class="logo" />
    <div class="title">小菜家教平台</div>
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        <img :src="userPicture" class="user-picture" alt="用户头像" />
        {{ userName }}
        <el-icon class="el-icon--right"><arrow-down /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="profile">个人中心</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  props: {
    userPicture: {
      type: String,
      default: () => require('@/images/3.jpg')
    },
    userName: {
      type: String,
      default: '用户'
    }
  },
  methods: {
    handleCommand(command) {
      if (command === 'profile') {
        alert('个人中心');
      } else if (command === 'logout') {
        alert('退出登录');
      }
    }
  },
  mounted() {
    console.log('Header 组件接收到的头像链接:', this.userPicture);
    console.log('Header 组件接收到的用户名:', this.userName);
  }
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直居中对齐 */
  padding: 0 30px;
  height: 60px; /* 适当调整头部高度 */
  background-color: slateblue;
  box-sizing: border-box; /* 包含边框和内边距在宽度和高度中 */
}

.logo {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin-right: 10px;
  border: 1px solid white;
}

.title {
  font-size: 22px;
  font-weight: 700;
  color: white;
  margin-right: auto;
}

.user-picture {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover; /* 确保图片按比例显示 */
}

.el-dropdown-link {
  cursor: pointer;
  color: white;
  display: flex;
  align-items: center;
  font-size: 15px;
}

.el-dropdown-link:focus {
  outline: none;
}
</style>
小菜不菜。
关注
  • 26
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SpringBoot + Vue基本知识点荟萃
qq_35963482的博客
09-27 3万+
参考Bilibili课程https://www.bilibili.com/video/BV1nV4y1s7ZN?p=1，总结
搭建SpringBoot+Vue框架
zd15690912965的博客
10-08 8863
自己学习框架做项目
SpringBoot+Vue入门
honor2的博客
02-28 6501
Spring+Vue+Mybatis入门
从 0 开始实现一个 SpringBoot + Vue 项目
ProgramNovice的博客
12-17 1万+
从 0 开始实现一个 SpringBoot + Vue 项目
基于SpringBoot+Vue+WebSocket的在线聊天室
qq_40640261的博客
12-30 1995
本系统设计实现了一个在线聊天系统，支持用户注册、用户登录、显示当前在线用户人数、查看当前在线用户、选择群聊、选择与当前在线用户私聊、实时接收消息等功能。本项目采用前后端分离模式前后端分离模式（Front-end and Back-end Separation）是一种软件架构模式，将前端和后端的开发和部署分离开来。在这种模式下，前端和后端被视为独立的两个系统，通过接口进行通信。前端主要负责用户界面和用户交互的展示，通过 HTTP 请求与后端进行数据交互，获取数据并更新用户界面。
基于SpringBoot+Vue的房屋租赁平台
听夜雨声烦
03-11 1161
基于SpringBoot+Vue的房屋租赁平台
超详细SpringBoot+Vue项目部署(两个Vue项目)
qq_52030824的博客
09-18 2万+
超详细SpringBoot+Vue项目部署(两个Vue项目)
springboot+vue前后端分离项目（后台管理系统）
热门推荐
先养只猫的博客
08-13 5万+
学习笔记 学习资源来自于B站良心up 一、所使用的环境配置： 编译器：IDEA 后台框架：SpringBoot Mybatis-Plus 数据库：Mysql8.0 数据库工具：Navicat premium 前端框架：Vue Element UI 引用的富文本编辑器：wangEditor 二、项目简介 这是一个基于SpringBoot和Vue的后台管理系统。 主要功能： 1.实现用户信息的CRUD，以及页面的显示。 2.用户权限的分配，不同权限的用户锁能看到的的界面信息和能进行的操作是不同的。 3.实现图片
springboot+vue之实现后端员工的分页查询
m0_53773988的博客
12-27 1137
封装一个startPage()的方法，表示开启分页查询。Controller层通过接收GetMapping的请求，将请求委托给Service,调用Service层的search()方法，Service层再调用相应的Mapper方法来操作数据库，实现数据的访问。
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
CallMe_CrabXie的博客
08-27 790
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 2357
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1659
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
class 2: vue.js 3 模板语法和内置指令
ComingLiu的博客
08-29 735
vue.js 3
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 403
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
【已解决】Vue Duplicate keys detected: ‘[object Object]’
qq_34419312的博客
08-28 1062
【已解决】Vue Duplicate keys detected: ‘[object Object]’
vue part 5
E___V___E的博客
08-29 891
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
SprinBoot+Vue家政公司服务平台的设计与实现
赵广陆
08-29 823
目录 1 项目介绍 2 项目截图 3 核心代码 3.1 Controller 3.2 Service 3.3 Dao 3.4 application.yml 3.5 SpringbootApplication 3.5 Vue 4 数据库表设计 5 文档参考 6 计算机毕设选题推荐 7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+粉丝，超300w访问量，专注于大学生项目实战开发、讲解和毕业答疑辅导，对于专业性数据证明一切！
react 样式和vue样式的区别
weixin_44565776的博客
08-29 491
react 和vue 样式使用注意事项
springboot+vue购物商城订单功能怎么实现
05-25
在购物车页面中，列出当前用户加入购物车的商品列表，提供商品数量修改、删除商品等操作。 - 订单确认页面 在订单确认页面中，显示用户选择的商品列表、订单总金额等信息，用户可以选择支付方式、收货地址等信息。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值