通用后台管理系统前端界面Ⅶ——公用组件（Header+Footer+Menu）

编程语言 2023-04-09 19:48:14 阅读次数: 0

 components下新建文件夹common，新建三个组件：Header.vue Footer.vue Menu.vue

  从element-ui官网找到想要的组件，粗略写好后，挂载在主页Home.vue上，

Header.vue：

<template>
    <div class="header">
        <el-header>
            <div class="title">疫起健康后台管理系统</div>
            <div>{
    
    {name}}</div>
        </el-header>
    </div>
</template>
<script>
import { getToken } from '@/utils/setToken.js'
export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
        this.name = getToken('username')
    }
}
</script>
<style lang="scss" scoped>
.header {
    .el-header {
        background: rgb(138, 173, 243);
        color: #fff;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        .title {
            width: 200px;
            font-size: 18px;
        }
    }
}
</style>

 Menu.vue

<template>
    <div class="menu">
      <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {};
    },
    methods: {
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
      },
    },
  };
  </script>
  <style lang="scss">
  .menu {
      .el-aside {
          height: 100%;
          .el-menu {
              height: 100%;
          }
          .el-submenu .el-menu-item {
              min-width: 0;
          }
      }
  }
  </style>

Footer.vue

<template>
    <div class="footer">
        <el-card>
            Frontend 2022 Casey
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    }
}
</script>

效果：

 

样式问题及调整方案：

        1、在home.vue使用container布局容器，添加卡片进行包裹

        2、让菜单的高度撑满屏幕，并让滚动条消失；

        3、调整菜单的宽度，缩小一点；

        4、调整主题颜色：渐变色效果


调整后的代码

header.vue

<template>
  <div class="header">
    <el-header>
      <div class="title">疫起健康后台管理系统</div>
      <div>{
   
   { name }}</div>
    </el-header>
  </div>
</template>
<script>
import { getToken } from "@/utils/setToken.js";
export default {
  data() {
    return {
      name: "",
    };
  },
  created() {
    this.name = getToken("username");
  },
};
</script>
<style lang="scss" scoped>
.header {
  .el-header {
    background: #6190e8; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to right,
      #a7bfe8,
      #6190e8
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to right,
      #a7bfe8,
      #6190e8
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    color: #fff;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    .title {
      width: 200px;
      font-size: 18px;
    }
  }
}
</style>

menu.vue

<template>
  <div class="menu">
    <el-aside width="200px">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        active-text-color="#C0FAFF"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>导航一</span>
          </template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <i class="el-icon-document"></i>
          <span slot="title">导航三</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menus: []
    };
  },
  created(){
    console.log(this.$router.options.routes)
  },
  methods: {
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
    },
  },
};
</script>
<style lang="scss">
.menu {
  .el-aside {
    height: 100%;
    .el-menu {
      height: 100%;
      color: "#fff";
      background: #6190e8; /* fallback for old browsers */
      background: -webkit-linear-gradient(
        to right,
        #a7bfe8,
        #6190e8
      ); /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(
        to right,
        #a7bfe8,
        #6190e8
      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    .el-submenu .el-menu-item {
      min-width: 0;
    }
  }
}
</style>

footer.vue

<template>
    <div class="footer">
        <el-card>
            ANTI-COVID 2022 BE-HEALTHY
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    }
}
</script>

 home.vue

<template>
  <div class="home">
    <Header />
    <el-container class="content">
      <Menu />
      <el-container>
        <el-main>
          <Bread />
          <div class="cont">
            <router-view></router-view>
          </div>
        </el-main>
        <el-footer><Footer /></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "./common/Header.vue";
import Footer from "./common/Footer.vue";
import Menu from "./common/Menu.vue";
export default {
  name: "home",
  components: {
    Header,
    Footer,
    Menu,
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss">
.home {
  // background-color: aquamarine;
  width: 100%;
  height: 100%;
  .content {
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
    .cont {
      margin: 3px 0px;
    }
  }
}
</style>

当前代码效果：

完善项目功能点和模块 

 在components文件下新建如下：

数据可视化：                                 用户管理：                                 用户中心：

数据视图                                       请假列表、请假管理                        我的

数据地图                                       用户信息、信息管理

分数地图                                       信息列表

旅游地图                                       疫苗接种列表、疫苗接种管理

 

 配置路由

import Vue from 'vue'
import Router from 'vue-router'
//import Home from '../components/Home.vue'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            // component: Home
            redirect:'/login',
            component: () => import('@/components/Login') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        },
        {
            path: '/login',
            name:'Login',
            component: () => import('@/components/Login') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        },
        {
            path: '/home',
            name: '用户管理',
            iconClass: 'fa fa-users',
            redirect: '/home/user',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/user',
                    name: '用户列表',
                    iconClass: 'fa fa-list',
                    component: () => import('@/components/users/UserList')
                },
                {
                    path: '/home/info',
                    name: '信息列表',
                    iconClass: 'fa fa-alt',
                    component: () => import('@/components/users/InfoList')
                },
                {
                    path: '/home/infos',
                    name: '信息管理',
                    iconClass: 'fa fa-alt',
                    component: () => import('@/components/users/InfoLists')
                },
                {
                    path: '/home/AbsenceList',
                    name: '请假列表',
                    iconClass: 'fa fa-list-ul',
                    component: () => import('@/components/users/AbsenceList')
                },
                {
                    path: '/home/AbsenceListsManage',
                    name: '请假管理',
                    iconClass: 'fa fa-th-list',
                    component: () => import('@/components/users/AbsenceListsManage')
                }
            ]
        },
        {
            path: '/home',
            name: '数据可视化',
            iconClass: 'fa fa-bar-chart',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/dataview',
                    name: '数据概览',
                    iconClass: 'fa fa-fa-chart',
                    component: () => import('@/components/dataAnalysis/DataView')
                },
                {
                    path: '/home/mapView',
                    name: '地图概览',
                    iconClass: 'fa fa-line-chart',
                    component: () => import('@/components/dataAnalysis/MapView')
                },
                {
                    path: '/home/travelMap',
                    name: '旅游地图',
                    iconClass: 'fa fa-line-chart',
                    component: () => import('@/components/dataAnalysis/TravelMap')
                },
                {
                    path: '/home/scoreMap',
                    name: '分数图',
                    iconClass: 'fa fa-line-chart',
                    component: () => import('@/components/dataAnalysis/ScoreMap')
                }
            ]
        },
        {
            path: '/home',
            name: '用户中心',
            iconClass: 'fa fa-bar-chart',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/Mine',
                    name: '我的',
                    iconClass: 'fa fa-fa-chart',
                    component: () => import('@/components/mine/Mine')
                }
            ]
        },
        {
            path: '*',
            component: () => import('@/components/NotFound') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        }
    ],
    mode: 'history'
})

将定义路由的文件，把菜单渲染出来

但有些不需要渲染eg：login、404页面、首页，所以：

        1、路由权限控制

        2、前端v-if（当前采用）

​​​​​​​

 调整一下菜单icon的样式，设置距离但是会发现目录没有层级顺序，也就是说页面还没有开启并绑定路由，于是但是路由会变，但是右侧的内容还没有变===》设置路由出口

Menu.vue 

<template>
  <div class="menu">
    <el-aside width="200px">
      <el-menu
        router
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        active-text-color="#C2FB91"
      >
        <template v-for="(item, index) in menus">
          <el-submenu :index="index + ''" :key="index" v-if="!item.hidden">
            <template slot="title">
              <i :class="item.iconClass"></i>
              <span>{
   
   { item.name }}</span>
            </template>
            <el-menu-item-group v-for="(child, index) in item.children" :key="index">
              <el-menu-item :index="child.path">
                <i :class="child.iconClass"></i>
                {
   
   {child.name}}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </template>
      </el-menu>
    </el-aside>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menus: [],
    };
  },
  created() {
    console.log(this.$router.options.routes);
    this.menus = [...this.$router.options.routes];
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="scss">
.menu {
  .el-aside {
    height: 100%;
    .el-menu {
      height: 100%;
      .fa {
        margin: 10px;
      }
      color: "#fff";
      background: #6190e8; /* fallback for old browsers */
      background: -webkit-linear-gradient(
        to right,
        #a7bfe8,
        #6190e8
      ); /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(
        to right,
        #a7bfe8,
        #6190e8
      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }
    .el-submenu .el-menu-item {
      min-width: 0;
    }
  }
}
</style>

 router下的index.js

import Vue from 'vue'
import Router from 'vue-router'
//import Home from '../components/Home.vue'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            // component: Home
            redirect:'/login',
            hidden: 'true',
            component: () => import('@/components/Login') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        },
        {
            path: '/login',
            name:'Login',
            hidden: 'true',
            component: () => import('@/components/Login') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        },
        {
            path: '/home',
            name: '用户管理',
            iconClass: 'fa fa-users',
            redirect: '/home/user',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/user',
                    name: '用户列表',
                    iconClass: 'fa fa-list',
                    component: () => import('@/components/users/UserList')
                },
                {
                    path: '/home/info',
                    name: '信息列表',
                    iconClass: 'fa fa-list-alt',
                    component: () => import('@/components/users/InfoList')
                },
                {
                    path: '/home/infos',
                    name: '信息管理',
                    iconClass: 'fa fa-list-alt',
                    component: () => import('@/components/users/InfoLists')
                },
                {
                    path: '/home/AbsenceList',
                    name: '请假列表',
                    iconClass: 'fa fa-list-ul',
                    component: () => import('@/components/users/AbsenceList')
                },
                {
                    path: '/home/AbsenceListsManage',
                    name: '请假管理',
                    iconClass: 'fa fa-th-list',
                    component: () => import('@/components/users/AbsenceListsManage')
                }
            ]
        },
        {
            path: '/home',
            name: '数据可视化',
            iconClass: 'fa fa-line-chart',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/dataview',
                    name: '数据概览',
                    iconClass: 'fa fa-bar-chart',
                    component: () => import('@/components/dataAnalysis/DataView')
                },
                {
                    path: '/home/mapView',
                    name: '地图概览',
                    iconClass: 'fa fa-line-chart',
                    component: () => import('@/components/dataAnalysis/MapView')
                },
                {
                    path: '/home/travelMap',
                    name: '旅游地图',
                    iconClass: 'fa fa-area-chart',
                    component: () => import('@/components/dataAnalysis/TravelMap')
                },
                {
                    path: '/home/scoreMap',
                    name: '分数图',
                    iconClass: 'fa fa-pie-chart',
                    component: () => import('@/components/dataAnalysis/ScoreMap')
                }
            ]
        },
        {
            path: '/home',
            name: '用户中心',
            iconClass: 'fa fa-bar-chart',
            component: () => import('@/components/Home') ,//路由懒加载
            children: [
                {
                    path: '/home/Mine',
                    name: '我的',
                    iconClass: 'fa fa-fa-chart',
                    component: () => import('@/components/mine/Mine')
                }
            ]
        },
        {
            path: '*',
            name: 'NotFound',
            hidden: 'true',
            component: () => import('@/components/NotFound') //路由懒加载
            //component: resolve => require(['@/components/Home'], resolve) //异步加载
        }
    ],
    mode: 'history'
})

Home.vue

<template>
  <div class="home">
    <Header />
    <el-container class="content">
      <Menu />
      <el-container>
        <el-main>
          <Bread />
          <div class="cont">
            <router-view></router-view>
          </div>
        </el-main>
        <el-footer><Footer /></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "./common/Header.vue";
import Footer from "./common/Footer.vue";
import Menu from "./common/Menu.vue";
export default {
  name: "home",
  components: {
    Header,
    Footer,
    Menu,
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss">
.home {
  // background-color: aquamarine;
  width: 100%;
  height: 100%;
  .content {
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
    .cont {
      margin: 3px 0px;
    }
  }
}
</style>

Header.vue

<template>
    <div class="header">
        <el-header>
            <div class="title">疫起健康后台管理系统</div>
            <div>{
   
   {name}}</div>
        </el-header>
    </div>
</template>
<script>
import { getToken } from '@/utils/setToken.js'
export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
        this.name = getToken('username')
    }
}
</script>
<style lang="scss" scoped>
.header {
    .el-header {
        background: rgb(138, 173, 243);
        color: #fff;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        .title {
            width: 200px;
            font-size: 18px;
        }
    }
}
</style>

猜你喜欢

转载自blog.csdn.net/qq_45947664/article/details/127931360
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022