Home page navigation + left menu of SPA project development

1, mock.js simulates responding to Ajax requests

① Install mockjs dependencies

npm install mockjs -D # Use only in the development environment

Configure development environment and production environment

In order to use mock only in the development environment and not automatically when packaging to the production environment, we can make a configuration in env

(1)dev.env.js

module.exports = merge(prodEnv, {

NODE_ENV: '"development"',

MOCK: 'true'

})

(2)prod.env.js

module.exports = {

NODE_ENV: '"production"',

MOCK: 'false'

}

Then go to main.js for configuration

//mockjs will be introduced in the development environment

process.env.MOCK && require('@/mock')

Import mock file into Hbuilder

login-mock.js (for creating data)

// const loginInfo = { // code: -1, // message: 'password error' // } //Generate random data using mockjs template const loginInfo = { 'code|0-1': 0, 'msg|3-10': 'msg' } export default loginInfo;

index.js (used to reference data) bind the request to the result

import Mock from 'mockjs' //Introducing mockjs, npm installed import action from '@/api/action' //Import request address //Global setting: set the timeout of all ajax requests to simulate the time-consuming of network transmission Mock.setup({ // timeout: 400 / / data is requested after a delay of 400s timeout: 200 - 400 //Delay 200-400s to request data }) //Introduce the logged in test data and add it to mockjs import loginInfo from '@/mock/json/login-mock.js' let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN') Mock.mock(s1, "post", loginInfo) // Mock.mock(s1, /post|get/i, loginInfo)

Result display

It can be seen that the results of the message box are random, with success and failure

A real simulation of the actual development scenario. If it is developed according to the previous jason, it will either succeed or fail, which is not in line with the development logic

2, Construction of front desk main interface

① Import the vue file into the public file compos

AppMain.vue interface

<template> <el-container> <el-aside v-bind:class="asideClass"> <LeftNav></LeftNav> </el-aside> <el-container> <el-header> <TopNav></TopNav> </el-header> <el-main>Main</el-main> </el-container> </el-container> </template> <script> // Import components import TopNav from '@/components/TopNav.vue' import LeftNav from '@/components/LeftNav.vue' // Export module export default { data(){ return{ asideClass:'main-aside' } }, components:{ LeftNav,TopNav } }; </script> <style scoped> .main-container { height: 100%; width: 100%; box-sizing: border-box; } .main-aside-collapsed { /* In CSS, by declaring a style! important, you can change the default CSS style priority rule to make the style property declaration have the highest priority */ width: 64px !important; height: 100%; background-color: #334157; margin: 0px; } .main-aside { width: 240px !important; height: 100%; background-color: #334157; margin: 0px; } .main-header, .main-center { padding: 0px; border-left: 2px solid #333; } </style>

LeftNav.vue interface

<template> <el-menu default-active="2" background-color="#334157" text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">  <div> <img src="../assets/img/logo.png" alt=""> </div> <el-submenu index="1"> <template slot="title"> <i></i> <span>Navigation one</span> </template> <el-menu-item-group> <template slot="title">Group I</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 2"> <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 1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i></i> <span slot="title">Navigation II</span> </el-menu-item> <el-menu-item index="3" disabled> <i></i> <span slot="title">Navigation III</span> </el-menu-item> <el-menu-item index="4"> <i></i> <span slot="title">Navigation IV</span> </el-menu-item> </el-menu> </template> <script> export default { data(){ return{ collapsed:false } } } </script> <style> .el-menu-vertical-demo:not(.el-menu--collapse) { width: 240px; min-height: 400px; } .el-menu-vertical-demo:not(.el-menu--collapse) { border: none; text-align: left; } .el-menu-item-group__title { padding: 0px; } .el-menu-bg { background-color: #1f2d3d !important; } .el-menu { border: none; } .logobox { height: 40px; line-height: 40px; color: #9d9d9d; font-size: 20px; text-align: center; padding: 20px 0px; } .logoimg { height: 40px; } </style>

TopNav.vue interface

<template>  <el-menu mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff"> <el-button> <img :src="collapsed?imgshow:imgsq" @click="doToggle()"> </el-button> <el-submenu index="2"> <template slot="title">Super administrator</template> <el-menu-item index="2-1">set up</el-menu-item> <el-menu-item index="2-2">Personal Center</el-menu-item> <el-menu-item @click="exit()" index="2-3">sign out</el-menu-item> </el-submenu> </el-menu> </template> <script> export default { data(){ return{ collapsed:false, imgshow:require('@/assets/img/show.png'), imgsq:require('@/assets/img/sq.png') } } } </script> <style scoped> .el-menu-vertical-demo:not(.el-menu--collapse) { border: none; } .submenu { float: right; } .buttonimg { height: 60px; background-color: transparent; border: none; } .showimg { width: 26px; height: 26px; position: absolute; top: 17px; left: 17px; } .showimg:active { border: none; } </style>

② Import the img file into the assets file

bg.png

logo.png

show.png

sq.png

③ Configure the route to index.js for the interface

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Login from '@/views/Login' import Reg from '@/views/Reg' import AppMain from '@/components/AppMain' import LeftNav from '@/components/LeftNav' import TopNav from '@/components/TopNav' Vue.use(Router) export default new Router({ routes: [{ path: '/', name: 'Login', component: Login }, { path: '/Login', name: 'Login', component: Login }, { path: '/Reg', name: 'Reg', component: Reg }, , { path: '/AppMain', name: 'AppMain', component: AppMain, children:[{ path: '/LeftNav', name: 'LeftNav', component: LeftNav, },{ path: '/TopNav', name: 'TopNav', component: TopNav }] } ] })

Then go to Login.vue for interface jump

this.$router.push();

Result display

3. Left tree shrinkage function (vue bus concept)

Concept of bus:

Parameters that are specifically used to handle variables

1. Define bus

① . add instance

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//mockjs will be introduced in the development environment
//Development environment: true & & require ('@ / mock') The following code will be executed, that is, mock.js will be imported into the current environment
//Production environment: false & & require ('@ / mock') will not execute the following code, that is, mock.js will not boot to the current environment
process.env.MOCK && require('@/mock')
import 'element-ui/lib/theme-chalk/index.css' // New addition two
import App from './App'
import router from './router'
import ElementUI from 'element-ui' // New addition one
import axios from '@/api/http' //# Global configuration of Axios by vue project
//import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(ElementUI) // New addition three
Vue.use(VueAxios,axios)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
data(){
return {
// Bus is an instance of vue
Bus:new Vue({

})
}
},
router,
components: { App },
template: '<App/>'
})

② Click the icon to switch

TopNav.vue

2. Complete the contraction function

TopNav.vue

②,LeftNav.vue

③,AppMain.vue

// Export module
export default {
data() {
return {
asideClass: 'main-aside'
}
},
components: {
LeftNav,
TopNav
},

Listen for trigger events

// Hook function Execute when the component is accessed on("event name", callback function)
// Listen to the collapsed aside method defined in TopNav.vue v is the parameter passed from the method
created() {
this.$root.Bus.$on("collapsed-aside", (v) => {
this.asideClass = v ? 'main-aside-collapsed':'main-aside';
});
}
};
</script>

Result display