SpringBoot+vue实现右侧登录昵称展示

目录

1. 定义User数据

1.1.在created方法获取数据

1.2.头部导航栏绑定User数据

1.3.在data中定义User数据

2. 获取数据

2.1.接收父组件传递的值

2.2.展示数据

3. 页面效果

---

在SpringBoot和 Vue.js 结合的项目中实现右侧登录昵称展示，通常涉及到前端的用户界面展示和后端的用户认证逻辑。

以下是实现这一功能的步骤：

1. 定义User数据

1.1.在created方法获取数据

<!--其它代码-->
created () {// 获取数据this.user = JSON.parse(localStorage.getItem('user'))
},
<!--其它代码-->

1.2.头部导航栏绑定User数据

<!-- 头部导航栏 -->
<el-header style="border-bottom: 1px solid #ccc;"><Header :user="user"/>
</el-header>

1.3.在data中定义User数据

data () {return {user: {}}
},

2. 获取数据

2.1.接收父组件传递的值

props: {user: Object
},

2.2.展示数据

<span>{{ user.nickname }}</span>

3. 页面效果

最终页面效果如下图所示：

 以上就是SpringBoot+vue实现右侧登录昵称展示过程实现。