SPA项目开发之首页导航+左侧菜单

内容：

详解接着以上博客：https://blog.csdn.net/LIN_17970/article/details/99059542

1. mock.js模拟响应ajax请求

2. 通过js代码完成路由的跳转

3. 后台主界面的搭建

4. 退出功能

5. 左侧树收缩功能（vue总线的概念）

1. Mock.js

前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景：

1. 老大，接口文档还没输出，我的好多活干不下去啊！

2. 后端小哥，接口写好了没，我要测试啊！

前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点

Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。

众所周知Mock.js因为两个重要的特性风靡前端:

数据类型丰富

支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

拦截Ajax请求

不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

更多内容，可以云Mockjs官方查看“http://mockjs.com/”

注1：easy-mock，一个在线模拟后台的数据平台

2. Mock.js使用步骤

2.1 安装mockjs依赖

  npm install mockjs -D              #只在开发环境使用

2.2 引入

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置

  (1)dev.env

  module.exports = merge(prodEnv, {

NODE_ENV: '"development"',

MOCK: 'true'

  })

  

  (2)prod.env

  module.exports = {

NODE_ENV: '"production"',

MOCK: 'false'

  }

(3)main.js

  //开发环境下才会引入mockjs

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

• 在src目录下创建mock目录，定义mock主文件index.js，并在该文件中定义拦截路由配置
• index.js

import action from '@/api/action' //引入请求地址

//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
	// timeout: 400  //延时400s请求到数据
	timeout: 200 - 400 //延时200-400s请求到数据
})

//引登陆的测试数据，并添加至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)

主页面中引入我们的左边树形菜单和顶部导航

• AppMain.vue

<template>
	<el-container class="main-container">
		<el-aside v-bind:class="asideClass">
			<LeftNav></LeftNav>
		</el-aside>
		<el-container>
			<el-header class="main-header">
				<TopNav></TopNav>
			</el-header>
			<el-main class="main-center">Main</el-main>
		</el-container>
	</el-container>
</template>

<script>
	// 导入组件
	import TopNav from '@/components/TopNav.vue'
	import LeftNav from '@/components/LeftNav.vue'

	// 导出模块
	export default {
   
		data(){
   
		  return{
   
		    asideClass:'main-aside'
		  };
		},
    components:{
   
      TopNav,LeftNav
    },
    created(){
   
      this.$root.Bus.$on("collapsed-side",(v)=>{
   
        this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
      })
    }
	};
</script>
<style scoped>
	.main-container {
   
		height: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	.main-aside-collapsed {
   
		/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
		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