Students, we have already completed the setup and configuration of the front-end and back-end projects. Next, we will first build the front-end page framework, then create the back-end interface framework, and finally implement each functional module through front-end and back-end interaction. Step by step, I will guide you to create your own graduation project. This class marks the start of the project development course, mainly focusing on using ElementUI to build the layout of the back-end management system.
ElementUI Chinese official website: https://element.eleme.cn/#/zh-CN
Learning Objectives
(1) Integrate ElementUI
(2) Use the elementUI el-container component to implement the layout of the back-end page
Requirements Analysis
(1) Complete the page layout with ElementUI
(2) Debug the style of the menu bar and header component
Implementation Process
What is ElementUI
A desktop component library based on Vue 2.0
Install ElementUI
npm i element-ui -S
Import ElementUI
In main.js, import ElementUI, add the three lines of code in the red box in the existing code. To save time, you can directly copy the following code to replace the original code in main.js.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
router,
render: h => h(App)
}).$mount('#app')
Use ElementUI components for page layout
Clear existing page styles
The final style of each page is as follows; you can directly copy the code to replace the existing styles.
<template>
<div id="app">
<router-view/>
</div>
</template>
<template>
<div class="home">
</div>
</template>
<script>
export default {
name: 'HomeView',
}
</script>
<template>
<div class="about">
</div>
</template>
Copy ElementUI layout style to App.vue
Go to the ElementUI official website and find the style and corresponding code. Website: https://element.eleme.cn/#/zh-CN/component/container
(1) Find a preferred style, such as the one below:
(2) Find the corresponding code:
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>
The style effect is as follows: this is because we only copied the HTML of the page without copying the style.
(3) Copy the style to the page
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
Create a global style file and import it
(1) Create a global.css file
The above style has gaps with the browser, so we create a global.css to write global styles. The screenshot is as follows:
The code is as follows:
body {
/*Set the margin from the screen*/
margin: 0;
padding: 0;
/*Hide overflow and clear floats*/
overflow: hidden;
}
/*Make all elements into box model: applying "box-sizing: border-box;" style, the parameters of border and padding are included within width and height.*/
* {
/*Outer margin does not occupy an extra 1px pixel*/
box-sizing: border-box;
}
(2) Import this CSS file in main.js
The code screenshot is as follows:
The code is as follows:
import '@/assets/global.css'
Page style as follows
Debug sidebar, header, and table component styles
At this point, our page layout is ready. Next, we will fill in the aside, header, and main parts with components.
Sidebar and table style links:
Sidebar style: https://element.eleme.cn/#/zh-CN/component/menu
Table style: https://element.eleme.cn/#/zh-CN/component/table
You can find the style you like and paste it into the corresponding module. If not, we can write it ourselves.
Here, the official website provides an example style. We won't go into too much detail now. You can use it directly. First, do it, then understand. Follow me to copy the code here.
- Copy container HTML style to code
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>Navigation One</template>
<el-menu-item-group>
<template slot="title">Group One</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="1-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">Option 4</template>
<el-menu-item index="1-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>Navigation Two</template>
<el-menu-item-group>
<template slot="title">Group One</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="2-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">Option 4</template>
<el-menu-item index="2-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>Navigation Three</template>
<el-menu-item-group>
<template slot="title">Group One</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="Group Two">
<el-menu-item index="3-3">Option 3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">Option 4</template>
<el-menu-item index="3-4-1">Option 4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>View</el-dropdown-item>
<el-dropdown-item>Add</el-dropdown-item>
<el-dropdown-item>Delete</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>Wang Xiaohu</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140">
</el-table-column>
<el-table-column prop="name" label="Name" width="120">
</el-table-column>
<el-table-column prop="address" label="Address">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
After copying, the code looks like this, note that the position where it is placed is above.
Copy the ElementUI style to the code
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 160px;
}
body > .el-container {
margin-bottom: 40px;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
line-height: 260px;
}
.el-container:nth-child(7) .el-aside {
line-height: 320px;
}
</style>
After doing the above steps, the page display looks like this:
However, this style is not very satisfactory. Now let's start debugging the style.
(1) Remove the default expanded menu bar style
Code that highlights the selected area in blue
(2) Make the left sidebar stretch down
Find the line of code in the screenshot and add the code in the red box
The code is as follows, which you can directly copy and replace. vh is a percentage of the viewport height.
<el-aside width="200px" style="background-color: rgb(255,255,255);overflow: hidden;min-height: 100vh">
(3) Remove the border of the layout component
Delete the blue highlighted code, making everything fuly screen-filling.
Otherwise, when setting the sidebar background color, there will be gaps between the page and the screen.
(4) Create a manager.css file
Used to write page styles, same as importing this css file in main.js.
How to adjust the style? For beginners who are unsure which container to add styles, you can first debug the style in the html file, then copy it to the css file after debugging.
Change Sidebar Icons
Go to this website https://element.eleme.cn/#/zh-CN/component/icon
Find a favorite icon
Copy the icon class name and change the value in the red box below
Final Code
Follow my video to debug the sidebar and header step by step. If you don't want to debug, you can directly copy the following code and replace the code in your file. After replacement, see what changes occur on the page. The final debugged page is as follows:
Below is the final code. If you don't understand any part, think and debug repeatedly. The style is the process of debugging, don't be afraid of being slow.
<template>
<div>
<el-container style="height: 500px;">
<!-- Sidebar -->
<el-aside class="m-aside">
<!-- Logo and system name -->
<div class="m-sysName" >
<img src="@/assets/logo.png" alt="" width="10%">
<span class="m-nameText">Doing Graduation Project with Spring</span>
</div>
<!-- Sidebar menu -->
<el-menu class="el-menu" >
<el-submenu index="1">
<template slot="title"><i class="el-icon-user"></i>User Management</template>
<el-menu-item index="1-1">Option 1</el-menu-item>
<el-menu-item index="1-2">Option 2</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-news"></i>Information Management</template>
<el-menu-item index="2-1">Option 1</el-menu-item>
<el-menu-item index="2-2">Option 2</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-set-up"></i>System Settings</template>
<el-menu-item index="3-1">Option 1</el-menu-item>
<el-menu-item index="3-2">Option 2</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- Right side -->
<el-container class="right-container">
<!-- Top menu bar -->
<el-header class="top-header">
<img src="@/assets/avtar.jpg" alt="" style="width: 40px;border-radius: 50%;margin-right: 10px;">
<span style="color: #4c5a73;font-weight: bold;font-size: 14px;margin-right: 20px">Wang Xiaohu</span>
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>Personal Center</el-dropdown-item>
<el-dropdown-item>Log Out</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<!-- Form -->
<el-main >
<el-table :data="tableData">
<el-table-column prop="date" label="Date" width="140">
</el-table-column>
<el-table-column prop="name" label="Name" width="120">
</el-table-column>
<el-table-column prop="address" label="Address">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
<router-view/>
</div>
</template>
<script>
export default {
data() {
const item = {
date: '2016-05-02',
name: 'Wang Xiaohu',
address: 'No. 1518 Jinshajiang Road, Putuo District, Shanghai City'
};
return {
tableData: Array(20).fill(item)
}
}
};
</script>
All style code is as follows, each class specifies where the style is set. Students with weak foundations can first modify parameters like color and height to see how the page style changes.
/* Left sidebar */
.m-aside{
width:270px;
background-color: #39465C;
overflow: hidden;
min-height: 100vh;
}
/* Top logo of the sidebar */
.m-sysName{
height:70px;
display:flex;
align-items: center;
padding-left: 20px;
border-bottom: 1px solid #4c5a73;
}
/* Text on the top of the sidebar */
.m-nameText{
color: #e4e7e6;
margin-left: 10px;
font-size: 18px;
font-weight: bold;
}
/* Sidebar menu */
.el-menu{
background-color: #39465C;
border-right:none !important;
}
/* Header style */
.el-header {
background-color: #ffffff;
border-bottom: 1px solid gainsboro;
color: #333;
height: 70px !important;
line-height: 70px;
}
/* Right side background color */
.right-container{
background-color: #EFF3F6;
height: 100vh;
}
/* Centered top */
.top-header{
font-size: 12px;
/* Vertical centering, first set display:flex; then vertical centering, horizontal right alignment */
display: flex;
align-items: center;
justify-content: right;
}
/* Color of the first-level menu items in the sidebar */
.el-submenu__title{
color: #e9e9e9;
}
/* Background color on hover for sidebar menu items */
.el-menu-item:hover, .el-submenu__title:hover {
background: rgba(92, 113, 147, 0.24);
}
/* Color of the second-level menu items in the sidebar */
.el-menu-item {
color: #e9e9e9;
}
/* Background and color settings for selected second-level menus */
.el-menu-item.is-active {
color: #11cfd2;
font-size: 14px;
background: rgba(92, 113, 147, 0.24);
}