创新实训（四）前端框架大改以及顶栏的绘制

普什清决

已于 2022-06-08 01:44:22 修改

阅读量444

点赞数

分类专栏：创新实训文章标签： vue 机器学习

于 2022-05-08 22:37:24 首次发布

本文链接：https://blog.csdn.net/ldxcsdn/article/details/124656325

版权

创新实训专栏收录该内容

12 篇文章 1 订阅

订阅专栏

这篇博客主要介绍了对中期阶段简陋前端界面的改造过程。作者决定自定义布局，以实现更灵活的头部、侧边栏和主体区域设计。在Header.vue组件中，详细展示了如何创建包含项目名称、用户信息和功能按键的头部，并提供了切换主题、全屏及下拉菜单等功能。博客还提及了使用ElementPlus布局组件的体验，但最终选择自定义以满足特定需求。

摘要由CSDN通过智能技术生成

前言

中期的界面总体来说还是比较简陋的，因此有必要下定决心大刀阔斧的改造一番，达到理想的前端展示效果，这样才能吸引用户。

前端架构

总体架构如图：
在这里插入图片描述
src文件夹下，assets存放静态资源，components是组件，router是路由，styles是静态CSS资源，view是展示的组件，剩下的略。

主页结构

这里可以选用element plus自带的布局组件，但是我用了一下感觉还是不太灵活，决定还是自己写，然后结合CSS控制相对布局。
总体就是分成顶端，侧边栏，主体区域这三部分。如图：
在这里插入图片描述

体现在layout.vue当中比较明显：

<template>
  <div class="dark">
    <!-- 头部 -->
    <Header :title="platformName" :user="userInfo" id="guide-header"></Header>

    <!--    主体-->
    <div style="display: flex">
      <!--      侧边栏-->
      <Aside id="guide-aside"></Aside>

      <!--      内容区域-->
      <router-view style="flex: 1" id="guide-main"/>
    </div>
  </div>
</template>

头部的绘制

预期效果：
在这里插入图片描述

我们抽离到一个单独的组件，Header.vue.
可以看到就是左侧的项目名称，右侧的用户头像、名字、几个功能按键。其中头像这里隐含了一个下拉栏。

<template>

  <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; display: flex ">
    <div style="width: 200px; padding-left: 25px; font-weight: bold; color: dodgerblue;font-size: 18px;">{{ title }}</div>
    <div style="flex: 1"></div>
    <div style="">
      <span>
        <el-button text bg type="primary" style="margin-right:10px;" @click="yindao()">
          引导页
        </el-button>
      </span>
      <span id="guide-dark">
        <el-switch
          v-model="dark"
          size="large"
          inline-prompt
          active-text="Pay by month"
          inactive-text="Pay by year"
          :active-icon="Sunny"
          :inactive-icon="Moon"
          @change="changeTheme()"
          style="margin-right:17px;position: relative;"
        />
        <!-- <el-button @click="toggleDark()">
          当前状态是: {{ isDark }}
        </el-button> -->
      </span>
      <span id="guide-screenfull">
        <el-icon :size="20" style="margin-right:17px;cursor:pointer;position: relative;top: 4.5px" @click="toggleFullscreen()"><FullScreen /></el-icon>
      </span>
      <el-dropdown id="guide-person">
        <span class="el-dropdown-link" style="font-size: 16px;">
          <el-avatar :size="35" :src='user.avatar' style="position: relative; top: 7px"></el-avatar>
           {{ user.nickName }}
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="notBuiltYet()">个人中心</el-dropdown-item>
            <el-dropdown-item @click="openGitee()">项目地址</el-dropdown-item>
            <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

  
</template>