六，Vue3搭建后台管理系统

设计manager组件

需要html，css等前端基础知识

一共分三个部分，上下部分，和下面部分的左右部分

上下部分用两div标签区分出来

分为头部部分和下面部分

全部用一个div包裹起来

头部部分，分为左右两个部分，左边显示管理系统的名字和logo，右边显示当前登录用户的名字和头像

使用display: flex分为两个部分，第二个部分用 flex: 1

主体结构

<div>
 <div>头部</div>
   <div>下面部分</div>
   </div>

具体的头部部分代码设计

<div style="display :flex" >
  <div style="display :flex">
    <span>系统logo和名字</span>
    </div>
       
<!-- 以上是头部的左边部分 -->
<div style="flex: 1">
</div>
    <div style="display :flex">
    <span>头像和昵称</span>
    </div>
</div>

加上修饰就是这样

<!--  头部开始 -->
<div style="height: 60px; background-color: #3c7fff; display: flex; align-items: center">
  <div style="width: 200px; display: flex; align-items: center; padding-left: 15px">
    <img style="width: 40px" src="@/assets/imgs/logo.svg" alt="">
    <!-- 这里的logo.svg自己替换图片，确保路径正确 -->
    <span style="font-size: 22px; color: white; margin-left: 5px">后台管理系统</span>
  </div>
  <div style="flex: 1"></div>
  <div style="width: fit-content; display: flex; align-items: center; padding-right: 10px">
    <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="" style="width: 40px; height: 40px">
    <span style="color: white; margin-left: 5px">vinicunca</span>
  </div>
</div>
<!--  头部结束 -

设计下面部分

下面部分，也分为两个部分，左右部分,左边为导航栏部分，右边为主体数据展示部分。

<div style="display :flex">
<div>导航栏部分</div>
 <div style="flex :1">主体部分</div> 
</div>

在这个<div style="display: flex">容器中：

1. 第一个<div></div>：没有设置flex属性，因此这个div的宽度会由其内容决定，默认不占据额外的空间。
2. 第二个<div style="flex: 1"></div>：设置了flex: 1，表示它会占据容器内剩余的所有可用空间。如果有其他具有flex属性的元素，它会根据它们的flex值按比例分配剩余空间。

所以，这两个flex的作用是让第一个div根据内容大小占用空间，而第二个div则占用剩余的所有空间，使其在容器内自动拉伸。

现在具体设计导航栏部分

<div >
<!-- 首先我们需要一个菜单栏
这里我们去官网(https://element-plus.org/zh-CN/component/menu.html#menu-attributes)
这里提供了一个菜单的组件 -->
<el-menu>
<el-menu-item>
   <!-- 加入图标和名称 -->
  <el-icon></el-icon>
  系统首页
  </el-menu-item>
  
  <el-menu-item>
  </el-menu-item>
  
    <el-menu-item>
  </el-menu-item>
    
<el-sub-menu>
    
<template #title>
<el-icon><User /></el-icon>
 <span>用户管理</span>
 </template>
    
<el-menu-item></el-menu-item>
    
    <el-menu-item></el-menu-item>
    
    </el-sub-menu>
    
  
  </el-menu>
</div>    

菜单部分还需要加入很多东西

router:

router	是否启用 <font style="color:rgb(48, 49, 51);">vue-router</font> 模式。 启用该模式会在激活导航时以 index 作为 path 进行路由跳转 使用 <font style="color:rgb(48, 49, 51);">default-active</font> 来设置加载时的激活项。

请注意前面是有冒号的 :default-active=”router.currentRoute.value.path”

这个的意思是显示的子级页面高亮

请注意前面是有冒号的 :default-openeds=”[‘1’]”

这个的意思二级菜单默认打开

主体部分：

<div style="flex: 1">
<RouterView />
       </div>

设计一下样式

<div style="display: flex">
      <!-- 左侧导航菜单开始 -->
      <div style="width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px)">
        <el-menu router :default-active="router.currentRoute.value.path" :default-openeds="['1']" style="border: 0">
          <el-menu-item index="/manage/home">
            <el-icon><House /></el-icon>
            系统首页
          </el-menu-item>
          <el-menu-item index="/manage/data">
            <el-icon><DataAnalysis /></el-icon>
            数据统计
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item>管理员信息</el-menu-item>
            <el-menu-item>普通用户信息</el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/manage/test">
            <el-icon><UserFilled /></el-icon>
            个人信息
          </el-menu-item>
          <el-menu-item index="/manage/home">
            <el-icon><SwitchButton /></el-icon>
            退出登录
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 左侧导航菜单结束 -->

      <!-- 右侧主体区域开始 -->
      <div style="flex: 1; width: 0; background-color: #f5f7ff; padding: 10px">
        <RouterView />
      </div>
      <!-- 右侧主体区域结束 -->
    </div>

设计data数据组件

三个部分

查询部分

<div class="card" style="margin-bottom: 5px">
  <el-input  style="width: 240px; margin-right: 10px" v-model="data.name" placeholder="请输入名称查询" :prefix-icon="Search"></el-input>
  <el-button type="primary">查 询</el-button>
  <el-button type="warning">重 置</el-button>
</div>

功能部分

<div class="card" style="margin-bottom: 5px">
   <el-button type="primary">新 增</el-button>
   <el-button type="warning">批量删除</el-button>
   <el-button type="info">导入</el-button>
   <el-button type="success">导出</el-button>
 </div>

数据展示部分(使用el-table表格的形式)极其页码部分

<div class="card" style="margin-bottom: 5px">
  <el-table :data="data.tableData" stripe>
    <el-table-column label="日期" prop="date" />
    <el-table-column label="名称" prop="name" />
    <el-table-column label="地址" prop="address" />
  </el-table>
  <div style="margin-top: 15px">
    <el-pagination
        v-model:current-page="data.pageNum"
        v-model:page-size="data.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
    />

  </div>
</div>