[Vue Practical Project] General Management System: Home Page

Preface

This article is the third article in the blogger's series of practical Vue small projects. It is very suitable for back-end or those who are just getting started. It is a nanny-level teaching of a front-end project from 0 to 1. Previous content:

[Vue Practical Project] General Management System: Login Page-CSDN Blog

[Vue Practical Project] General Management System: Encapsulating token operations and network requests-CSDN Blog

[Vue Practical Project] General Management System: API Encapsulation, 404 Pages - CSDN Blog

This article will explain the key points of realizing the entire project: the construction of the homepage, including menus, menu routing, breadcrumb navigation, etc.

Table of contents

1. Build a shelf

2. Layout

Edit

3.Header

4.Footer

5.Menu

5.1. Page

5.2.Routing

5.2.1 Customize menu content

5.2.2. Enable routing function

6. Breadcrumb navigation

---

1. Build a shelf

Let’s first take a look at what the homepage looks like:

The structure of the homepage: header + middle + bottom, which is composed of three components: header, menu, and footer. Since these three components are common components used by many pages, a common is built under components to place these common components. Then build three component shelves respectively. Let’s build three blank shelves first, and then fill in the contents of these three components little by little.

Write out these three components first. Just write three blank shelves first, and then fill them in slowly:

header：

<template>
    <div>
        footer
    </div>
</template>

<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>

</style>

footer：

<template>
    <div>
        footer
    </div>
</template>

<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>

</style>

menu：

<template>
    <div>
        menu
    </div>
</template>

<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>

</style>

Introduce it into the helloworld component and see if it can be imported normally:

<template>
  <div class="helloworld">
    <Header></Header>
    <Menu/>
    <Footer/>
  </div>
</template>

<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
export default {
  components:{
    Footer,
    Menu,
    Header
  },
  data(){
    return{}
  }
}
</script>

If it can be introduced normally, the contents of several components will be displayed on the page:

Then change it to the Home page based on the original HelloWorld:

<template>
  <div class="home">
    <Header></Header>
    <Menu/>
    <Footer/>
  </div>
</template>

<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
export default {
  components:{
    Footer,
    Menu,
    Header
  },
  data(){
    return{}
  }
}
</script>

<style lang="less">
.home{
  width: 100%;
  height: 100%;
}
</style>

2. Layout

After preparing the three components, the next step is to lay out the Home. Since the UI framework is used, just use the layout provided by elementUI. It is available on its official website:

Pick one, change it, and style it:

<template>
  <div class="home">
    <Header/>
      <el-container class="content">
        <Menu/>
      <el-container>
        <el-main>Main</el-main>
        <el-footer><Footer/></el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
export default {
  components:{
    Footer,
    Menu,
    Header
  },
  data(){
    return{}
  }
}
</script>

<style lang="less">
.home{
  width: 100%;
  height: 100%;
  .content{
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
  }
}
</style>

3.Header

Next, you need to adjust the header. As you can see from the rendering above, the header should display the name of the system and the user name of the logged-in user. The system name is written directly, and the user name can be displayed using the setToken.js we encapsulated previously to retrieve the username we put in the cache after logging in as the user name.

<template>
    <div>
        <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="less" scoped>

</style>

The system name should be on the far left and the user name should be on the far right, so adjust the style:

<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="less" scoped>
    .header{
        .el-header{
            background: #2578b5;
            color: #fff;
            line-height: 60px;
            display: flex;
            justify-content: space-between;
            .title{
                width:200px;
                font-size: 24px;
            }
        }
    }
</style>

In this way, the Header is processed.

4.Footer

The footer is relatively simple, just wrap it with an el-card and add some text content.

<template>
    <div class="footer">
        <el-card>Frontend 2023 BugMan</el-card>
    </div>
</template>

<script>
export default{
    data(){
        return {}
    }
}
</script>
<style lang="less" scoped>
    
</style>

5.Menu

5.1. Page

The menu component elementUI also provides:

Find one and adjust it:

<template>
  <div class="menu">
    <el-aside width="200px">
      <el-col :span="12">
        <h5>自定义颜色</h5>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          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-col>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less" scoped></style>

If you look at the renderings, you will find that although the menu has been introduced, the style is very strange, so the next thing to do is to adjust the menu style.

There are left and right and up and down sliders indicating that the height and width are not enough. Pull the height to 100% and adjust the width a little wider. The background color is not harmonious and you need to manually adjust the background color. After the specific style adjustment, the content of the entire menu component is as follows:

<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: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

The effect after adjustment:

We actually don’t have that many first-level menus, we can only keep one navigation one, and in fact we don’t need the handleOpen and handleClose methods given in the example that comes with elementUI, so here we will sort out the page again, and the final content will be The effect is as follows:

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          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>
              <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-submenu>
        </el-menu>
    </el-aside>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

Final adjusted effect:

5.2.Routing

5.2.1 Customize menu content

The core content of the menu is naturally to jump to a certain component by clicking on an item. The next thing we need to complete is the routing jump of the menu.

First rewrite the routing file:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            redirect:'/login',
            component: ()=>import('@/components/Login')
        },
        {
            path:'/login',
            name:'Login',
            component: ()=>import('@/components/Login')
        },
        {
            path:'/home',
            name:'学生管理',
            iconClass:'fa fa-users',
            //默认转跳到学生管理页
            redirect:'/home/student',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/student',
                    name:'学生列表',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/StudentList'),

                },
                {
                    path:'/home/info',
                    name:'信息列表',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoList'),

                },
                {
                    path:'/home/info',
                    name:'信息管理',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoLists'),

                },
                {
                    path:'/home/work',
                    name:'作业列表',
                    iconClass:'fa fa-list-ul',
                    component: ()=>import('@/components/students/WorkList'),

                },
                {
                    path:'/home/info',
                    name:'作业管理',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/WorkMent'),

                }
            ]
        },
        {
            path:'/home/dataview',
            name:'数据分析',
            iconClass:'fa fa-bar-chart',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/dataview',
                    name:'数据概览',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/dataAnalysis/DataView'),

                },
                {
                    path:'/home/mapview',
                    name:'地图概览',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/DataView'),

                },
                {
                    path:'/home/travel',
                    name:'旅游地图',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/ScoreMap'),

                },
                {
                    path:'/home/score',
                    name:'分数地图',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/TravelMap'),

                }
            ]
        },
        {
            path:'/users',
            name:'用户中心',
            iconClass:'fa fa-user',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/user',
                    name:'用户概览',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/users/User'),

                }
            ]

        },
        {
            path:'*',
            name:'NotFound',
            component:()=>import('@/components/NotFound')
        }
    ],
    mode:'history'
})

Print it in the menu to see if you can get the configured index.js content:

<script>
export default {
  data() {
    return {
      menus:[]
    };
  },
  created(){
    console.log(this.$router.options.routes);
  }
};
</script>

You can see that there is data. If there is data, it will be easy to handle:

Just traverse the menu to get the data and bind it to the menu bar:

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <template v-for="(item,index) in  menus">
            <el-submenu :index="index + ''" :key="index">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{
   
   {item.name}}</span>
            </template>
            <el-menu-item-group>
              <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-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]
  }
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

You can see that the navigation menu we configured has been obtained:

You will find that there is another problem. The Login, User Center, and 404 pages are not what we want to display. Here we need to add a hidden attribute to the menu item, and judge the attribute during traversal to decide whether to display it:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            redirect:'/login',
            hidden:true,
            component: ()=>import('@/components/Login')
        },
        {
            path:'/login',
            name:'Login',
            hidden:true,
            component: ()=>import('@/components/Login')
        },
        {
            path:'/home',
            name:'学生管理',
            iconClass:'fa fa-users',
            //默认转跳到学生管理页
            redirect:'/home/student',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/student',
                    name:'学生列表',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/StudentList'),

                },
                {
                    path:'/home/info',
                    name:'信息列表',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoList'),

                },
                {
                    path:'/home/info',
                    name:'信息管理',
                    iconClass:'fa fa-list-alt',
                    component: ()=>import('@/components/students/InfoLists'),

                },
                {
                    path:'/home/work',
                    name:'作业列表',
                    iconClass:'fa fa-list-ul',
                    component: ()=>import('@/components/students/WorkList'),

                },
                {
                    path:'/home/info',
                    name:'作业管理',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/students/WorkMent'),

                }
            ]
        },
        {
            path:'/home/dataview',
            name:'数据分析',
            iconClass:'fa fa-bar-chart',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/dataview',
                    name:'数据概览',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/dataAnalysis/DataView'),

                },
                {
                    path:'/home/mapview',
                    name:'地图概览',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/DataView'),

                },
                {
                    path:'/home/travel',
                    name:'旅游地图',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/ScoreMap'),

                },
                {
                    path:'/home/score',
                    name:'分数地图',
                    iconClass:'fa fa-line-chart',
                    component: ()=>import('@/components/dataAnalysis/TravelMap'),

                }
            ]
        },
        {
            path:'/users',
            name:'用户中心',
            iconClass:'fa fa-user',
            component: ()=>import('@/components/Home'),
            children:[
                {
                    path:'/home/user',
                    name:'用户概览',
                    iconClass:'fa fa-list',
                    component: ()=>import('@/components/users/User'),

                }
            ]

        },
        {
            path:'*',
            name:'NotFound',
            hidden:true,
            component:()=>import('@/components/NotFound')
        }
    ],
    mode:'history'
})

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <template v-for="(item,index) in  menus">
            <el-submenu :index="index + ''" :key="index" v-if="!item.hidden">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{
   
   {item.name}}</span>
            </template>
            <el-menu-item-group>
              <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-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]
  }
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

Effect:

Adjust the secondary menu together:

<template>
  <div class="menu">
    <el-aside width="200px">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <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">{
   
   {child.name}}</i>
              </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]
  }
};
</script>
<style lang="less" scoped>
.menu{
    .el-aside{
        height: 100%;
        .el-menu{
            height:100%;
            .fa{
              margin-right: 10px;
            }
        }
        .el-submenu .el-menu-item{
            min-width: 0;
        }
    }
}
</style>

5.2.2. Enable routing function

First enable the routing function for the elementUI navigation bar on the meun component, so that when you click on the navigation bar, the path will jump accordingly:

<el-menu
          router
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#2578b5"
          text-color="#fff"
          active-text-color="#ffd04b"
        >

Then give the routing exit on home:

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

You can see that the routing is working normally:

6. Breadcrumb navigation

The entire homepage shelf has been set up, and the menu jump has been completed, but one detail that is still missing is the breadcrumb navigation bar:

Go to the elementUI official website to find a breadcrumb navigation component:

Create a new breadcrumb component under common and adjust the content from the official website so that it can get the content of our real menu:

Just introduce it in Home and use it:

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

<script>
import Footer from './common/Footer.vue'
import Header from './common/Header.vue'
import Menu from './common/Menu.vue'
import Breadcrumb from './common/Breadcrumb.vue'
export default {
  components:{
    Footer,
    Menu,
    Header,
    Breadcrumb
  },
  data(){
    return{}
  }
}
</script>

<style lang="less">
.home{
  width: 100%;
  height: 100%;
  .content{
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
  }
}
</style>