【Vue.js】使用Element中的Mock.js搭建首页导航&左侧菜单---【超高级教学】

一，Mock.js

1.1 认识Mock.js

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

总结来说，Element中的Mock.js是一个用于前端开发中生成随机数据、模拟接口响应的库。它可以帮助你快速开发和调试前端项目，而无需依赖后端接口

1.2 安装mockjs

npm i mockjs -D

注意：在SPA项目工作区间使用cmd执行该命令

-D表示只在开发环境中使用

执行完毕之后，在devDependencies下会发现已下载好mockjs插件，证明已经安装好了

1.3 引入mockjs

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在config目录中的dev.env.js和prod.env.js做一个配置，如下：

dev.env.js(开发坏境):

加入Mock:'true'  如下

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
	MOCK: 'true'
})

prod.env.js(生产坏境):

加入Mock:'flase'  如下

module.exports = {
  NODE_ENV: '"production"',
	MOCK: 'false'
}

mian.js导入Mock动态依赖：

//开发环境下才会引入mockjs
process.env.MOCK && require('@/mock') 

二 mockjs使用

导入两个js：

login-mock:

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

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

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)

登入Login.vue：

效果：

三，Bus事物总线

3.1.首页导航栏与左侧菜单搭建

①组件(3个)

• AppMain.vue：布局容器组件

• LeftAside.vue：左侧菜单组件

• TopNav.vue：首页导航组件

APPMian.vue:

LeftNav.vue:

TopNav.vue

② 给组件配置路由关系

index.js:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'
import Login from '@/views/Login'
import Register from '@/views/Register'


Vue.use(Router)

export default new Router({
	routes: [{
		path: '/',
		name: 'Login',
		component: Login
	
	},{path: '/Register',
		name: 'Register',
		component: Register,
		
	},{path: '/AppMain',
		name: 'AppMain',
		component: AppMain,
		children:[
			{path: '/LeftNav',
				name: 'LeftNav',
				component: LeftNav,
				
			},{path: '/TopNav',
				name: 'TopNav',
				component: TopNav
			}
		]
	}
	]
})

Login.vue跳转到AppMain(登入跳到主界面)

this.$router.push('/AppMian');

3.2 结合总线完成组件通讯

 Bus事件适用于父子组件、非父子组件等之间的通信

定义Bus总线：main.js

new Vue({
  el: '#app',
  data(){
    return{
      Bus:new Vue()
    }
  },
  router,
  components: { App },
  template: ''
})

TopNav.vue:

methods:{
      doToggle(){//收起左侧菜单事件
        this.collapsed=!this.collapsed;
        //将是否折叠的变量放入总线
        this.$root.Bus.$emit('aaa',this.collapsed);
      },
      exit(){//退出事件
        this.$router.push("/")
      }
    }

 collapsed默认flase,当我们点击的时候就会取反，flase就会变为true,并把是否折叠的变量放入总线中方便其他组件调取

LeftNav.vue:

              created(){
		      this.$root.Bus.$on('aaa',r=>{
		        this.collapsed=r;
		      });
		    }

在组件创建时订阅了一个名为 'aaa' 的事件，并在事件触发时将接收到的数据赋值给 collapsed 属性。

AppMain.vue:

created(){
      this.$root.Bus.$on('aaa',r=>{
        this.asideClass=r ? 'main-aside-collapsed':'main-aside';
      });
    }

效果图：