General background management system front-end interface Ⅶ—common components (Header+Footer+Menu)

 Create a new folder common under components, and create three new components: Header.vue Footer.vue Menu.vue

  Find the desired component from the official website of element-ui. After roughly writing it, mount it on the home page 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.view

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

Effect:

 

Style issues and adjustments:

        1. Use container layout container in home.vue, add cards for wrapping

        2. Let the height of the menu fill the screen and make the scroll bar disappear ;

        3. Adjust the width of the menu and shrink it a little ;

        4. Adjust theme color: Gradient color effect

Adjusted code

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.view

<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>

Current code effect:

Improve project function points and modules 

 Create a new one under the components file as follows:

Data Visualization: User Management: User Center:

Data View Leave List, Leave Management My

Data map user information, information management

Score Map Information List

Tourist map Vaccination list, Vaccination management

 

 configure routing

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'
})

The file that will define the route and render the menu

But some do not need to render eg: login, 404 page, home page, so:

        1. Routing authority control

        2. Front-end v-if (currently used)

​​​​​​​

 Adjust the style of the menu icon, set the distance, but you will find that the directory has no hierarchical order, that is to say, the page has not been opened and the route is bound, so the route will change, but the content on the right has not changed === "Set the route exit

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>

 index.js under router

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>