从0开始搭建vue + flask 旅游景点数据分析系统（三）：开发header部分

这一期开始开发header部分，预期实现两个目标：

• 右侧显示用户名、退出按钮和头像
• 左侧显示系统的访问的路径

1 修改Layout.vue

先修改el-header部分,

<el-header class="header">
<!--        <div class="logo">My Admin</div>-->
        <div class="header-content">
          <div class="current-path">
            当前路径: {{ $route.path }}
          </div>

          <div class="user-info">
            <img :src="avatarUrl" alt="Avatar" class="avatar">
            <span class="username">{{ username }}</span>
            <el-button type="text" >退出</el-button>
          </div>
        </div>
      </el-header>

然后添加2个变量

username: '用户名', // 替换为实际用户名
avatarUrl: 'https://via.placeholder.com/40' // 替换为实际头像 URL

style部分要新增的比较多

.header-content {
  display: flex;
  /*justify-content: space-between;*/
  /*align-items: center;*/
  /*width: 100%;*/
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.username {
  margin-right: 10px;
}

.current-path {
  margin-right: auto;   /* 当前路径是靠左的 */
  /*padding-left: 20px;*/
}

2 修改下用户名和头像

首先拷贝一个图片 avatar.png 到 src/assets下面，然后还是修改Layout.vue，修改掉原来的avatarUrl代码

username: '麦麦大数据', // 替换为实际用户名
// avatarUrl: 'https://via.placeholder.com/40' // 替换为实际头像 URL
avatarUrl: require("@/assets/avatar.png") // 也可以使用 require 语法引入图片

3 运行效果

可以看到，在左侧上方可以显示目前的路径，右侧上方可以看到用户自定义的头像、用户名和退出按钮了！