• Element UI搭建首页导航和左侧菜单以及Mock.js和（组件通信）总线的运用

    目录

    前言

    一、Mock.js简介及使用

    1.Mock.js简介

    1.1.什么是Mock.js

    1.2.Mock.js的两大特性

    1.3.Mock.js使用的优势

    1.4.Mock.js的基本用法

    1.5.Mock.js与前端框架的集成

    2.Mock.js的使用

    2.1安装Mock.js

    2.2.引入mockjs

    2.3.mockjs使用

    2.3.1.定义测试数据文件

    2.3.2.mock拦截ajax请求

    ​2.3.3.mock.js拦截ajax请求

    2.4.数据模板定义规则

    二、通信组件Bus（总线）的使用

    1.首页导航栏与左侧菜单前端搭建

    2.通过总线实现左侧组件的折叠与显示

    前言

    Mock.js是一个轻量级的JavaScript库，用于模拟数据和接口。它可以帮助开发人员在开发过程中快速创建虚拟数据和API响应，以便更好地测试和调试应用程序。而Bus总线则是一种设计模式，用于在应用程序的不同组件之间传递消息和事件。

    一、Mock.js简介及使用

    1.Mock.js简介

    1.1.什么是Mock.js

            Mock.js是一个轻量级的JavaScript库，用于模拟和生成数据。它可以帮助你在开发过程中创建逼真的模拟数据，而无需依赖后端。Mock.js的核心API有两个：Mock.mock和Mock.Random。Mock.mock允许你定义数据类型和返回值，以及过滤和排序选项。Mock.Random允许你生成随机数据、数组和对象。

    1.2.Mock.js的两大特性

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

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

    1.3.Mock.js使用的优势

    1. 提高开发效率：通过使用Mock.js，前端开发人员可以在后端接口未完成之前，模拟数据进行开发和测试，从而提高开发效率。
    2. 减少对后端接口的依赖：Mock.js可以模拟接口请求，生成随机数据，减少对后端接口的依赖，使前端开发人员能够独立进行开发。
    3. 方便接口测试：Mock.js可以模拟各种接口请求，方便进行接口测试，验证前端代码的正确性和稳定性。
    4. 提供丰富的数据模板语法：Mock.js提供了丰富的数据模板语法，可以根据需求生成各种类型的数据，满足不同场景的开发需求。

    1.4.Mock.js的基本用法

    1. 定义数据模板：使用Mock.js提供的语法定义数据模板，如Mock.mock('@string')可以生成一个随机字符串。
    2. 生成随机数据：使用Mock.js提供的方法，如Mock.mock('@string')可以生成一个随机字符串。
    3. 拦截请求：使用Mock.js提供的拦截器，可以拦截请求并返回模拟数据，实现前端与后端的解耦。

    1.5.Mock.js与前端框架的集成

            Mock.js可以与主流的前端框架（如Vue、React等）无缝集成，方便开发人员进行接口测试和数据模拟。通过与前端框架的集成，可以更好地模拟真实的业务场景，提高开发效率和代码质量。

    2.Mock.js的使用

    2.1安装Mock.js

    npm i mockjs -D

    在SPA项目中，通过-G,-S,-D安装的区别

    1. 全局数据绑定（-g）：全局数据绑定是指将数据定义在Vue实例的data属性中，这样的数据可以在整个Vue实例中被访问和使用。全局数据绑定适用于多个组件之间需要共享的数据，可以在任何组件中直接使用该数据，无需传递或引入。

    2. 局部数据绑定（-s）：局部数据绑定是指将数据定义在组件的data属性中，这样的数据只能在当前组件内部被访问和使用。局部数据绑定适用于组件内部需要使用的数据，不会被其他组件访问到，可以避免数据冲突和污染。

    3. 动态数据绑定（-d）：动态数据绑定是指将数据通过props属性传递给子组件，在父组件中动态改变数据的值。动态数据绑定适用于父子组件之间需要传递数据的场景，父组件可以通过改变传递给子组件的数据来实现动态更新。

    2.2.引入mockjs

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

    dev.env.js---开发环境

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

    prod.env.js---生产环境

    1. module.exports = {
    2.   NODE_ENV: '"production"',
    3. 	MOCK: 'false'
    4. }

    main.js---动态加载Mock.js

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

    2.3.mockjs使用

    2.3.1.定义测试数据文件

    为每个*.vue定义单独的xxx-mock.js文件，并在其中添加自定义的json数据，还可以通过mockjs的模块生成随机数据信息，动态测试ajax请求效果。

    创建src/mock/json目录，定义登录测试数据文件login-mock.js：

    1. //定义静态json数据
    2. /* const loginInfo={
    3. 	success:false,
    4. 	msg:'账号或者密码错误'
    5. } */
    6.  
    7. //通过mockjs生成随机json数据
    8. const loginInfo={
    9. 	'success|1':true,
    10. 	'msg|3-10':'msg'
    11. }
    12.  
    13. export default loginInfo;
    2.3.2.mock拦截ajax请求

    在src/mock目录下创建index.js，定义拦截路由配置：

    1. import Mock from 'mockjs' 		  //引入mockjs，npm已安装
    2. import action from '@/api/action' //引入封装的请求地址
    3.  
    4. //全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
    5. Mock.setup({
    6. 	// timeout: 400    //延时400s请求到数据
    7. 	timeout: 200 - 400 //延时200-400s请求到数据
    8. })
    9.  
    10. //引入登录的测试数据，并添加到mockjs
    11. import loginInfo from '@/mock/json/login-mock.js'
    12.  
    13. //数据请求地址
    14. let url = action.getFullPath('SYSTEM_USER_DOLOGIN');
    15.  
    16. //使用mockjs模拟发送请求
    17. // Mock.mock(url,'post',loginInfo);
    18. Mock.mock(url,/post|get/i,loginInfo);
    19. /* Mock.mock(url, /post|get/i, (options) => {
    20. 	// 最佳实践，
    21. 	console.debug(url, options);
    22. 	return Mock.mock(loginInfo);
    23. }); */

    配置完成之后，直接使用axios配置post或get请求，模拟测试效果。  

    2.3.3.mock.js拦截ajax请求

    先在Login.vue中导入Mock模块

    import Mock from 'mockjs'

    Login.vue---模拟数据随机测试

    1.  //post请求
    2.       axios.post(url,params).then(r => {
    3.         console.log(r);
    4.         // if (r.data.success) {
    5.         //   this.$message({
    6.         //     message: r.data.msg,
    7.         //     type: 'success'
    8.         //   });
    9.         // } else {
    10.         //   this.$message.error(r.data.msg);
    11.         // }
    12.         this.$message({
    13.           message: r.data.message,
    14.           type: r.data.code == 0 ? 'success' : 'error',
    15.           });
    16.       }).catch(e => {
    17.       });

    2.4.数据模板定义规则

    在使用的Vue组件中，先导入Mock模块

    import Mock from 'mockjs'

    • 生成随机id值

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

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

    • string

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

    • number 自增

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

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

    • number随机生成

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

    1. let obj2 = Mock.mock({
    2.     'age|1-100':0,//随机生成0-100整数
    3.     'price|1-100.1-4':0,//随机生成整数部分1-100，小数位数1-4位
    4.     'num|.2-4':0,//整数部分省略不写，默认是0(js的默认规则)
    5.     'num2|100.3-3':0//整数部分保持100不变，小数位数恒定3位数，小数值随机生成
    6. })
    7. console.log(obj2);
    • boolean值
    1. let flag = {
    2.     'flag1|0':true, //模板规则：0数值是0时，表示布尔值恒定是false
    3.     'flag2|1':false,//值位>=1时，boolean随机取值
    4.     "flag3|1-2":true
    5. }
    6. console.log(Mock.mock(flag));

    • 城市随机取值

    1. let city = Mock.mock({
    2.     "city1|2":{//数字2表示随机取2个值
    3.         addr1:'@city',//占位符@city表示随机生成城市
    4.         addr2:'@city',//占位符@city表示随机生成城市
    5.         addr3:'@city',//占位符@city表示随机生成城市
    6.         addr4:'@city',//占位符@city表示随机生成城市
    7.     },
    8.     "city2|1-3":{//数字1-3表示随机取1-3个值
    9.         addr1:'@city',//占位符@city表示随机生成城市
    10.         addr2:'@city',//占位符@city表示随机生成城市
    11.         addr3:'@city',//占位符@city表示随机生成城市
    12.         addr4:'@city',//占位符@city表示随机生成城市
    13.     }
    14. })
    15. console.log(city);

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

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

    • 正则表达式规则

    1. let obj7 = Mock.mock({
    2.     user:{
    3.         name:'@cname',
    4.     },
    5.     tel:/1[0-9]{10}/,
    6.     //正则表达式可以使用插件
    7.     email:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
    8.     //函数表达式
    9.     info:function(){
    10.         //注意：这里的this指向是数据模板对象，所以可以在函数表达式里使用this来获取已有值；
    11.         return `我的手机号码是:${this.tel},我的邮箱是:${this.email},我的身份证号码是:${this.cardId}`
    12.     },
    13.     // (8)路径规则中： @表示启动关键字(注意：@前面不能有除了空格的任何其他字符)
    14.     //          ==>   / 表示在模板数据中的层级关系，上下级
    15.     message:"我的名字是: @/user/name ,我的手机号码是: @/tel,我的邮箱是: @/email,我的身份证号码是: @/cardId"
    16. })
    17. console.log(obj7);
    • 日期生成
    1. let timer = Mock.mock({
    2.     day1:'@date',// @date占位符表示随机生成mock默认格式的年月日
    3.     day2:'@date("yyyy年MM月dd日")',//@date()可以传参，自定义时间格式,
    4.     time1:'@time',//@time占位符可以随机生成mock格式的时分秒
    5.     time2:'@time("HH时mm分ss秒SS毫秒")',//同样可以在@time()中传参数自定义格式
    6.     daytime1:'@datetime("yyyy年MM月dd日 HH:mm:ss:SS")',//@daytime生成完整的时间
    7.     nowTime:'@now'
    8. })
    9. console.log(timer);

    • 图片生成

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

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

    二、通信组件Bus（总线）的使用

    1.首页导航栏与左侧菜单前端搭建

    AppMain.vue---首页

    1. <template>
    2.   <el-container class="main-container">
    3.     <el-aside v-bind:class="asideClass">
    4.       <LeftNav></LeftNav>
    5.     </el-aside>
    6.     <el-container>
    7.       <el-header class="main-header">
    8.         <TopNav></TopNav>
    9.       </el-header>
    10.       <el-main class="main-center">我是首页</el-main>
    11.     </el-container>
    12.   </el-container>
    13. </template>
    14.  
    15. <script>
    16.   // 导入组件
    17.   import TopNav from '@/components/TopNav.vue'
    18.   import LeftNav from '@/components/LeftNav.vue'
    19.  
    20.   // 导出模块
    21.   export default {
    22.     components: {
    23.       TopNav,LeftNav
    24.     },data() {
    25.       return {
    26.         asideClass: "main-aside"
    27.       }
    28.     }
    29.   };
    30. </script>
    31. <style scoped>
    32.   .main-container {
    33.     height: 100%;
    34.     width: 100%;
    35.     box-sizing: border-box;
    36.   }
    37.  
    38.   .main-aside-collapsed {
    39.     /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    40.     width: 64px !important;
    41.     height: 100%;
    42.     background-color: #334157;
    43.     margin: 0px;
    44.   }
    45.  
    46.   .main-aside {
    47.     width: 240px !important;
    48.     height: 100%;
    49.     background-color: #334157;
    50.     margin: 0px;
    51.   }
    52.  
    53.   .main-header,
    54.   .main-center {
    55.     padding: 0px;
    56.     border-left: 2px solid #333;
    57.   }
    58. </style>

    LeftNav.vue---左侧菜单

    1. <template>
    2. 	<el-menu default-active="2" class="el-menu-vertical-demo"  background-color="#334157"
    3. 	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" >
    4. 		<!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
    5. 		<div class="logobox">
    6. 			<img class="logoimg" src="../assets/img/logo.png" alt="">
    7. 		</div>
    8. 		<el-submenu index="1">
    9. 			<template slot="title">
    10. 				<i class="el-icon-location"></i>
    11. 				<span>导航一</span>
    12. 			</template>
    13. 			<el-menu-item-group>
    14. 				<template slot="title">分组一</template>
    15. 				<el-menu-item index="1-1">选项1</el-menu-item>
    16. 				<el-menu-item index="1-2">选项2</el-menu-item>
    17. 			</el-menu-item-group>
    18. 			<el-menu-item-group title="分组2">
    19. 				<el-menu-item index="1-3">选项3</el-menu-item>
    20. 			</el-menu-item-group>
    21. 			<el-submenu index="1-4">
    22. 				<template slot="title">选项4</template>
    23. 				<el-menu-item index="1-4-1">选项1</el-menu-item>
    24. 			</el-submenu>
    25. 		</el-submenu>
    26. 		<el-menu-item index="2">
    27. 			<i class="el-icon-menu"></i>
    28. 			<span slot="title">导航二</span>
    29. 		</el-menu-item>
    30. 		<el-menu-item index="3" disabled>
    31. 			<i class="el-icon-document"></i>
    32. 			<span slot="title">导航三</span>
    33. 		</el-menu-item>
    34. 		<el-menu-item index="4">
    35. 			<i class="el-icon-setting"></i>
    36. 			<span slot="title">导航四</span>
    37. 		</el-menu-item>
    38. 	</el-menu>
    39. </template>
    40. <script>
    41. 	export default {
    42. 		data(){
    43. 		  return{
    44. 		    collapsed:false
    45. 		  }
    46. 		}
    47. 	}
    48. </script>
    49. <style>
    50. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    51. 		width: 240px;
    52. 		min-height: 400px;
    53. 	}
    54.  
    55. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    56. 		border: none;
    57. 		text-align: left;
    58. 	}
    59.  
    60. 	.el-menu-item-group__title {
    61. 		padding: 0px;
    62. 	}
    63.  
    64. 	.el-menu-bg {
    65. 		background-color: #1f2d3d !important;
    66. 	}
    67.  
    68. 	.el-menu {
    69. 		border: none;
    70. 	}
    71.  
    72. 	.logobox {
    73. 		height: 40px;
    74. 		line-height: 40px;
    75. 		color: #9d9d9d;
    76. 		font-size: 20px;
    77. 		text-align: center;
    78. 		padding: 20px 0px;
    79. 	}
    80.  
    81. 	.logoimg {
    82. 		height: 40px;
    83. 	}
    84. </style>

    TopNav.vue---顶部导航栏

    1. <template>
    2. 	<!-- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
    3. 	 text-color="#fff" active-text-color="#ffd04b">
    4. 		<el-menu-item index="1">处理中心</el-menu-item>
    5. 		<el-submenu index="2">
    6. 			<template slot="title">我的工作台</template>
    7. 			<el-menu-item index="2-1">选项1</el-menu-item>
    8. 			<el-menu-item index="2-2">选项2</el-menu-item>
    9. 			<el-menu-item index="2-3">选项3</el-menu-item>
    10. 			<el-submenu index="2-4">
    11. 				<template slot="title">选项4</template>
    12. 				<el-menu-item index="2-4-1">选项1</el-menu-item>
    13. 				<el-menu-item index="2-4-2">选项2</el-menu-item>
    14. 				<el-menu-item index="2-4-3">选项3</el-menu-item>
    15. 			</el-submenu>
    16. 		</el-submenu>
    17.  
    18. 		<el-menu-item index="3" disabled>消息中心</el-menu-item>
    19. 		<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    20. 	</el-menu> -->
    21. 	<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
    22. 		<el-button class="buttonimg">
    23. 			<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
    24. 		</el-button>
    25. 		<el-submenu index="2" class="submenu">
    26. 			<template slot="title">超级管理员</template>
    27. 			<el-menu-item index="2-1">设置</el-menu-item>
    28. 			<el-menu-item index="2-2">个人中心</el-menu-item>
    29. 			<el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    30. 		</el-submenu>
    31. 	</el-menu>
    32. </template>
    33.  
    34. <script>
    35. 	export default {
    36. 		data(){
    37. 		  return{
    38. 		    collapsed:false,
    39.         imgshow:require('@/assets/img/show.png'),
    40.          imgsq:require('@/assets/img/sq.png')
    41. 		  }
    42. 		}
    43. 	}
    44. </script>
    45.  
    46. <style scoped>
    47. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    48. 		border: none;
    49. 	}
    50.  
    51. 	.submenu {
    52. 		float: right;
    53. 	}
    54.  
    55. 	.buttonimg {
    56. 		height: 60px;
    57. 		background-color: transparent;
    58. 		border: none;
    59. 	}
    60.  
    61. 	.showimg {
    62. 		width: 26px;
    63. 		height: 26px;
    64. 		position: absolute;
    65. 		top: 17px;
    66. 		left: 17px;
    67. 	}
    68.  
    69. 	.showimg:active {
    70. 		border: none;
    71. 	}
    72. </style>

    定义首页导航栏与左侧菜单组件与路由的对应关系 ---router/index.js

    1. import Vue from 'vue'
    2. import Router from 'vue-router'
    3. import HelloWorld from '@/components/HelloWorld'
    4. import AppMain from '@/components/AppMain'
    5. import LeftNav from '@/components/LeftNav'
    6. import TopNav from '@/components/TopNav'
    7.  
    8. import Login from '@/views/Login'
    9. import Registered from '@/views/Registered'
    10.  
    11.  
    12. Vue.use(Router)
    13.  
    14. export default new Router({
    15.   routes: [{
    16.     path: '/',
    17.     name: 'Login',
    18.     component: Login
    19.   }, {
    20.     path: '/Registered',
    21.     name: 'Registered',
    22.     component: Registered
    23.   }, {
    24.     path: '/AppMain',
    25.     name: 'AppMain',
    26.     component: AppMain,
    27.     children: [{
    28.       path: '/LeftNav',
    29.       name: 'LeftNav',
    30.       component: LeftNav
    31.     }, {
    32.       path: '/TopNav',
    33.       name: 'TopNav',
    34.       component: TopNav
    35.     }]
    36.   }]
    37. })

    2.通过总线实现左侧组件的折叠与显示

    通过定义总线将父组件（AppMain）与子组件进行通信

    在main.js中定义Bus总线

    1. new Vue({
    2.   el: '#app',
    3.   data(){
    4.     return{
    5.       Bus:new Vue()
    6.     }
    7.   },
    8.   router,
    9.   components: { App },
    10.   template: ''
    11. })

    TopNav.vue

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

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

    LeftNav.vue 

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

    1. created(){
    2.           this.$root.Bus.$on('aaa',r=>{
    3.             this.collapsed=r;
    4.           });
    5.         }

    AppMain.vue

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

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

    效果演示

  • 相关阅读:
    PMP考试3A通过学员:如何备考PMP？
    【20230921】关于sing-box命令行程序开机自启动运行（Windows、Linux）
    SQL游戏行业实战案例5：玩家在线分布（自定义排序，条件求和）
    【环境搭建】ubuntu工作站搭建全流程（显卡4090）
    Recorder 实现语音录制并上传到后端（兼容PC和移动端）
    pve安装ubuntu 调整 逻辑卷全在根目录
    罕见病 对称性脂肪瘤(MSL) 马德龙病
    springboot14:整合mybatisPlus操作数据库
    Colour metric颜色度量
    Java的反射应用(Method和Class)
  • 原文地址：https://blog.csdn.net/weixin_74268571/article/details/133276719