Implementation of the homepage of the e-commerce background management project

Implementation of the homepage of the e-commerce background management project

1. page layout

<template> < div class = "home" > < el-container class = "home-conatiner" > <!-- Header area--> < el-header > < div > < img src = "../assets/logo.png" alt = ""/> < span > E-commerce background management system </span > </div > < el-button type = "info"@ click = "outlogin" > Sign out</el-button > </el-header > <!-- Main page area--> < el-container > <!-- Sidebar (left) --> < el-aside width = "200px" > <!-- Menu area--> < el-menu background-color = "#333744" text-color = "#fff" active-text-color = "#ffd04b" > <!-- First level menu--> < el-submenu index = "1" > <!-- First level menu template area --> <template slot = "title" > <i class = "el-icon-location" > </i > < span > Navigation One </span > </template > <!-- Secondary menu--> < el-menu-item index = "1-4 -1" > <!-- Secondary menu template area--> < template slot = "title" > < i class = "el-icon-location" > </i > < span > Navigation One </span > </template > </el-menu-item > </el-submenu > </el-menu > </el-aside > <!-- The right content main body --> < el-main > Main </el-main > </el-container > </el-container > </div > </template> < script > export default { data : () => ({}), methods : { //log outoutlogin ( ) { // token window.sessionStorage.clear() // this.$router.push('/login') } } } </script> <style lang="less" scoped> .home { height: 100%; .home-conatiner { height: 100%; .el-header { background-color: #373d41; align-items: center; display: flex; justify-content: space-between; div { display: flex; justify-content: start; align-items: center; img { width: 60px; height: 60px; background-color: white; border-radius: 50%; } span { font-size: 20px; color: white; padding-left: 30px; } } .el-button { } } .el-aside { background-color: #333744; } .el-main { background-color: #eaedf1; } } } </style>

axios token

  • token token

  • main.js

  • token

  • Authorization

  • 1.
created() { this.getMenuList() },
  • 2.
// async getMenuList() { // data res const { data: res } = await this.$http.get('menus') console.log(res) if (res.meta.status !== 200) return this.$message.error(res.meta.msg) this.menulist = res.data console.log(this.menulist) } }
  • 3. data
data: () => ({ menulist: [] }),

for

  • ':index' index
<!-- First-level menu--> < el-submenu :index = "item.id +''" v-for = "item in menulist" :key = "item.id" > <!-- First-level menu Template area--> < template slot = "title" > < i class = "el-icon-location" > </i > < span > {{ item.authName }} </span > </template > <!- -Secondary menu --> <el-menu-item :index = "subitem.id +''" v-for = "subitem in item.children" :key = "subitem.id" > <!-- Secondary menu template area--> < template slot = "title" > < i class = "el-icon-location " > </i > < span > {{ subitem.authName }} </span > </template > </el-menu-item > </el-submenu > Copy code

5. set the font color for the selected item and add a category icon

  • 1. Set the color of the selected secondary menu

  • 2. Set the icon of the secondary menu

  • 3. Settings and menu icons
    • 1. id
    data: () => ({ menulist: [], iconlist: { 125: 'el-icon-user-solid', 103: 'el-icon-present', 101: 'el-icon-s-goods', 102: 'el-icon-s-order', 145: 'el-icon-monitor' } }),
    • 2. inconlist
    <!-- --> <template slot="title"> <i :class="iconlist[item.id]"></i> <span>{{ item.authName }}</span> </template>

  • 1. menu unique-opened
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened >
  • 2.

  • el-meun border:none
.el-menu { border: none; }

  • 1. div
<div class="toggle-button" @click="toggle">|||</div>
  • 2.collapse mode vertical collapse-transition , menu collapse collapse-transition
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened :collapse="isCollapse" :collapse-transition="false" > data: () => ({ menulist: [], iconlist: { 125: 'el-icon-user-solid', 103: 'el-icon-present', 101: 'el-icon-s-goods', 102: 'el-icon-s-order', 145: 'el-icon-monitor' }, isCollapse: false }),
// toggle() { this.isCollapse = !this.isCollapse }
  • 3.
<el-aside :width="isCollapse ? '64px' : '200px'">

  • 1. Welcome.vue
<template> <div>Welcome</div> </template> <script> export default { data: () => ({}) } </script> <style lang="less" scoped> </style>
  • 2. home
import Vue from 'vue' import VueRouter from 'vue-router' import Login from '../components/Login.vue' import Home from '../components/Home.vue' import Welcome from '../components/Welcome.vue' Vue.use(VueRouter) const routes = [ // { path: '/', redirect: '/login' }, { path: '/login', component: Login }, { path: '/home', component: Home, redirect: '/welcome', children: [ { path: '/welcome', component: Welcome } ] } ] const router = new VueRouter({ routes }) //to //from //next //next() next('/login') router.beforeEach((to, from, next) => { // login if (to.path === '/login') return next() // token const token = window.sessionStorage.getItem('token') // token if (!token) return next('/login') // token next() }) export default router
  • 3. Home.vue Welcome home
<!-- --> <el-main> <!-- --> <router-view></router-view> </el-main>

  • 1. menu router :router="true"
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened :collapse="isCollapse" :collapse-transition="false" router >
  • id

  • 2.
<!-- Secondary menu--> < el-menu-item :index = "'/' + subitem.path" v-for = "subitem in item.children" :key = "subitem.id" > Copy code