结合Mockjs与Bus事件总线搭建首页导航和左侧菜单

欢迎来到我的CSDN主页！

我是Java方文山，一个在CSDN分享笔记的博主。

推荐给大家我的专栏《ELement》。

点击这里，就可以查看我的主页啦！

Java方文山的个人主页

如果感觉还不错的话请给我点赞吧！

期待你的加入，一起学习，一起进步！

目录

一、前言

二、Mock.js的使用

2.1.什么是Mock.js

2.2.安装与配置

2.2.引入Mock.js

2.4.Mock.js的使用

2.4.1.定义测试数据文件

2.4.2.mock拦截ajax请求

2.4.3.mock数据模板定义规则

三、Bus事物总线

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

3.2.结合总线完成组件通讯

---

一、前言

我们写前端的时候，肯定会遇到这两个比较大的问题：

①前端因为后端的接口没写好不能进行测试；

②使用Vue开发，组件写的太多，组件与组件之间的传值问题太过麻烦；

为了解决以上两个问题，我们就会用到我今天所讲内容Mock.js与Bus事件总线的两个知识点，结合这两个知识点搭建我们的首页导航与左侧菜单。

二、Mock.js的使用

2.1.什么是Mock.js

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

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

• 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

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

mock官网的文档了解更多地址：

Mock.js官网http://mockjs.com/

2.2.安装与配置

npm i mockjs -D

"-D" 是 "--save-dev" 的简写，表示将该包作为开发环境的依赖进行安装。

2.2.引入Mock.js

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

dev.env.js

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

prod.env.js

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

main.js

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

2.4.Mock.js的使用

2.4.1.定义测试数据文件

在src下创建一个名为mock的目录下面继续创建文件index.js和目录json和文件login-mock.js

如图所示：

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)

这个文件就是将我们利用mock造的数据绑定到‘SYSTEM_USER_DOLOGIN’里面，并设置请求方式为POST请求。

login-mock.js 

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

2.4.2.mock拦截ajax请求

 因为我刚刚的数据是为了登录测试做准备的所以我们在登录提交的事件里面编写响应的方法

Login.Vue

效果演示：

因为login-mock.js的code值与message值是随机的，所以登录有的时候会成功也会失败，取决于给出的code是否等于0，利用了Mock.js我们前端的小伙伴再也不用等后端的接口写好才能进行测试了。

2.4.3.mock数据模板定义规则

• 生成随机id值

使用Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数])

let uid1 = Mock.Random.guid();
//使用占位符的方式
let uid2 = Mock.mock("@guid");
console.log(uid1);
console.log(uid2);

• string

let obj1 = Mock.mock({
  'star|1-5':"★",//生成指定范围长度的字符串
  info:'静态的字符串',//静态字符串
  name:'@cname'//使用规定占位符@cname，随机生成中国人的名字
})
console.log(obj1);

• number 自增

+1 是指，在id的起始值每次调用+1

// +1 是指，在id的起始值每次调用+1
let temp = {
    "id|+1":1000001
}
console.log(Mock.mock(temp)); // 1000001
console.log(Mock.mock(temp)); // 1000002
console.log(Mock.mock(temp)); // 1000003
console.log(Mock.mock(temp)); // 1000004
console.log(Mock.mock(temp)); // 1000005
console.log(Mock.mock(temp)); // 1000006

• number随机生成

小数生成 |min-max.dmin(小数最小位数)-dmax(小数最大位数)

let obj2 = Mock.mock({
    'age|1-100':0,//随机生成0-100整数
    'price|1-100.1-4':0,//随机生成整数部分1-100，小数位数1-4位
    'num|.2-4':0,//整数部分省略不写，默认是0(js的默认规则)
    'num2|100.3-3':0//整数部分保持100不变，小数位数恒定3位数，小数值随机生成
})
console.log(obj2);

• boolean值

let flag = {
    'flag1|0':true, //模板规则：0数值是0时，表示布尔值恒定是false
    'flag2|1':false,//值位>=1时，boolean随机取值
    "flag3|1-2":true
}
console.log(Mock.mock(flag));

• 城市随机取值

let city = Mock.mock({
    "city1|2":{//数字2表示随机取2个值
        addr1:'@city',//占位符@city表示随机生成城市
        addr2:'@city',//占位符@city表示随机生成城市
        addr3:'@city',//占位符@city表示随机生成城市
        addr4:'@city',//占位符@city表示随机生成城市
    },
    "city2|1-3":{//数字1-3表示随机取1-3个值
        addr1:'@city',//占位符@city表示随机生成城市
        addr2:'@city',//占位符@city表示随机生成城市
        addr3:'@city',//占位符@city表示随机生成城市
        addr4:'@city',//占位符@city表示随机生成城市
    }
})
console.log(city);

• 枚举取值,从数组中随机取值

let gender = Mock.mock({
    'sex|1':['男','女','不知道'],//数字1表示随机取数组中的一个值
    'sex2|+1':['男','女','不知道']//+1表示循环一次取数组中的值
})
console.log(gender);

• 正则表达式规则

let obj7 = Mock.mock({
    user:{
        name:'@cname',
    },
    tel:/1[0-9]{10}/,
    //正则表达式可以使用插件
    email:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
    //函数表达式
    info:function(){
        //注意：这里的this指向是数据模板对象，所以可以在函数表达式里使用this来获取已有值；
        return `我的手机号码是:${this.tel},我的邮箱是:${this.email},我的身份证号码是:${this.cardId}`
    },
    // (8)路径规则中： @表示启动关键字(注意：@前面不能有除了空格的任何其他字符)
    //          ==>   / 表示在模板数据中的层级关系，上下级
    message:"我的名字是: @/user/name ,我的手机号码是: @/tel,我的邮箱是: @/email,我的身份证号码是: @/cardId"
})
console.log(obj7);

• 日期生成

let timer = Mock.mock({
    day1:'@date',// @date占位符表示随机生成mock默认格式的年月日
    day2:'@date("yyyy年MM月dd日")',//@date()可以传参，自定义时间格式,
    time1:'@time',//@time占位符可以随机生成mock格式的时分秒
    time2:'@time("HH时mm分ss秒SS毫秒")',//同样可以在@time()中传参数自定义格式
    daytime1:'@datetime("yyyy年MM月dd日 HH:mm:ss:SS")',//@daytime生成完整的时间
    nowTime:'@now'
})
console.log(timer);

• 图片生成

生成的是带参数的图片地址，可以根据地址获取图片

let imgs = Mock.mock({
    img:"@image('200x100', '#894FC4', '#FFF', 'png', '!')",
    img1:"@image('200x100', '#aaaaa', '#FFF', 'png', '!')",
    img2:"@image('200x100', '#bbbbb', '#FFF', 'png', '!')",
    // mock占位符调用时，需要传递参数，参数也可以是占位符
    img3:"@image('200x100', '@color', '#FFF', 'png', '!')",
    //可以使用随机生成图片的网址，但是注意，统一网址的请求图片地址时，如果不加参数，那么浏览器默认地址一样的会使用浏览器的缓存，那么所请求的图片只有一种；一般加一个时间戳作为参数，保持参数的唯一，图片可以请求到不同的值
    img4:"https://api.ixiaowai.cn/mcapi/mcapi.php?_=@time('T')"
});
console.log(imgs);

三、Bus事物总线

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

这里代码过于简单大家之间观看就好（涉及到的图片会放在最后）

AppMain.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 Registered from '@/views/Registered'


Vue.use(Router)

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

我们结合上面的Mock.js测试一下，只需在Login.Vue的提交事件中多添加下列代码即可

 this.$router.push('/AppMain')

搭建完你就会得到以下的效果

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';
      });
    }

在组件创建时订阅了一个名为 'aaa' 的事件，并在事件触发时将接收到的数据赋值给 asideClass属性（通过true或false赋予相应的样式）。

下面看一下效果吧！

涉及到的图片

到这里我的分享就结束了，欢迎到评论区探讨交流！！

如果觉得有用的话还请点个赞吧