spa项目之首页导航+mock.js模拟数据的左侧菜单

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

1.0 mock.js

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

mock.js两个重要的特性：

数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
拦截Ajax请求
不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

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

1.1安装mockjs依赖

打开文件目录，shift+右键打开命令窗口，执行

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

运行完后，package.json文件中会出现它的版本，如果下载失败，需重新下载spa项目

1.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

一定放在css样式,App之前
注1：import是ES6标准中的模块化解决方案，require是node中遵循CommonJS规范的模块化解决方案
后者支持动态引入，也就是require(${path}/xx.js)

1.3 引入一个mock的帮助包

mock/json/login-mock.js

// const loginInfo = {
// 	code: -1,
// 	message: '密码错误'
// }

//使用mockjs的模板生成随机数据
const loginInfo = {
	'code|0-1': 0,
	'msg|3-10': 'msg'
}
export default loginInfo;

mock/index.js

import Mock from 'mockjs' //引入mockjs，npm已安装
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)

1.4 引入所需图片

bg.png logo.png
show.png
sq.png

2.显示主界面

导入三个组件

AppMain.vue

AppMain.vue 包含了 LeftNav.vue和 TopNav.vue
所以Appmain.vue 在 router/index.js 引入一下

import AppMain from '@/components/AppMain'

{
			path: '/AppMain',
			name: 'AppMain',
			component: AppMain
		}	

而 LeftNav.vue和 TopNav.vue 在 Appmain.vue组件中导入

LeftNav.vue

TopNav.vue

页面效果为：

3.退出

在TopNav.vue中，点击退出时， 跳到Login组件去

methods:{
			exit(){
				this.$router.push({path:'/Login'});
			}

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

点击那个图标时，TopNav.vue会换一个图标，LeftNav.vue左侧菜单会收缩，所以要用到vue总线 Bus

4.1现在 main.js定义一个vue总线

将一个空的Vue实例放到根组件下，所有的子组件都能调用

 data(){
	  return{
		  Bus:new Vue({  //自定义的事件总线对象，用于父子组件的通信
			  
		  })
	  }
  }

4.2 在A组件触发事件

     this.$root.Bus.$emit("事件名", 参数1, 参数2, ...);

     注1：关键点-->this.$root
              以前父子组件间触发事件是：this.$emit("事件名", 参数1, 参数2, ...);

4.3 在B组件监听事件

    this.$root.Bus.$on("事件名", 回调函数);

点击图标时，触发到TopNav.vue的 doToggle事件

doToggle(){
				this.collapsed=!this.collapsed;
				this.$root.Bus.$emit('collapsed-side-click',this.collapsed);
			}

在Appmain.vue中监听

	created(){
			//v 是从vue总线获取的变量值
			this.$root.Bus.$on('collapsed-side-click',(v)=>{
				this.asideClass=v?'main-aside-collapsed':'main-aside';
			});
				
			}

在LeftNav.vue中监听

created(){
			//v 是从vue总线获取的变量值
			this.$root.Bus.$on('collapsed-side-click',(v)=>{
				this.collapsed=v;
			});
				
			}

最后可实现左侧菜单收缩，图片也变化
注1：有时候会发生事件只被emit触发了一次，但是回调函数却被执行了多次的现象。这种现象往往发生在页面跳转退出后重新进入的时候。
产生原因：
this.$root.Bus.$on实际是向Bus容器中添加一个事件监听器，当页面跳转时，原来的vue组件被注销，但是原来vue组件向Bus容器中添加的事件监听器并不会被移除。
因此，当下次进入这个vue组件对应的页面时，执行到this.$root.Bus.$on时，又会向Bus容器中添加一个重复的事件监听器，以此类推