• Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建

    一、Mock

    第一部分：Vue Mock.js介绍与使用

    1 什么是Vue Mock.js

    Mock.js 是一个用于生成随机数据和模拟API请求响应的 JavaScript 库。它通常用于前端开发中，特别是在开发过程中需要模拟后端API响应的情况下。Mock.js可以帮助前端开发人员独立于后端开发工作，并测试前端代码的各种情况，以确保应用程序在不同情况下表现良好。

    Mock.js的主要功能包括：

    1. 生成随机数据：Mock.js可以生成各种类型的随机数据，如字符串、数字、日期、布尔值等。这对于填充页面上的测试数据非常有用。

    2. 模拟API响应：开发人员可以使用Mock.js来模拟后端API的响应，包括GET请求、POST请求等。这使得前端开发可以继续进行，而无需等待后端开发完成。

    3. 定义数据结构：Mock.js允许开发人员定义数据结构和模板，以生成复杂的模拟数据。这对于测试不同数据结构的前端组件非常有用。

    4. 支持拦截器：Mock.js支持拦截器，可以在请求和响应之间进行预处理或后处理。这使得可以实现一些高级功能，如模拟延迟或错误响应。

    5. 与前端框架集成：Mock.js可以与常见的前端框架（如Vue.js、React、Angular等）集成，以便在组件级别或路由级别模拟数据和API请求。

    在前端开发中，Mock.js通常用于开发和测试阶段，以便快速迭代和调试前端代码。然后，在后端API可用时，开发人员可以轻松地切换到真实的后端数据源。这有助于提高开发效率并减少前后端集成的难度。

    1.2 安装和配置Mock.js

    1.Win+R输入cmd打开命令提示符，执行以下命令进行mock.js安装，如下：

    npm i mockjs -D

    安装成功后package.json中有以下代码即安装成功，如下：

    引入mock.js

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

    dev.env.js：

    1. 'use strict'
    2. const merge = require('webpack-merge')
    3. const prodEnv = require('./prod.env')
    4.  
    5. module.exports = merge(prodEnv, {
    6.   NODE_ENV: '"development"',
    7.   MOCK: 'true'
    8. })

     prod.env.js：

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

     main.js：

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

     mock.js使用

    定义测试数据文件

    在src目录下新建一个mock包，在mock包下定义测试数据文件，目录如下：

     login-mock.js：

    1. // const loginInfo = {
    2. // 	code: -1,
    3. // 	message: '密码错误'
    4. // }
    5.  
    6. //使用mockjs的模板生成随机数据
    7. const loginInfo = {
    8. 	'code|-1-0': 0,
    9. 	'message|3-10': 'msg'
    10. }
    11. export default loginInfo;
    mock拦截Ajax请求

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

    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. let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
    13. Mock.mock(s1, "post", loginInfo)
    14. // Mock.mock(s1, /post|get/i, loginInfo)

    登录

    1. <template>
    2. 	<div class="login-wrap">
    3. 		<el-form class="login-container">
    4. 			<h1 class="title">用户登录</h1>
    5. 			<el-form-item label="">
    6. 				<el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
    7. 			</el-form-item>
    8. 			<el-form-item label="">
    9. 				<el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
    10. 			</el-form-item>
    11. 			<el-form-item>
    12. 				<el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
    13. 			</el-form-item>
    14. 			<el-row style="text-align: center;margin-top:-10px">
    15. 				<el-link type="primary">忘记密码</el-link>
    16. 				<el-link type="primary" @click="gotoRegister()">用户注册</el-link>
    17. 			</el-row>
    18. 		</el-form>
    19. 	</div>
    20. </template>
    21.  
    22. <script>
    23.   import axios from 'axios'
    24.   import qs from 'qs'
    25. export default {
    26.   name: 'Login',
    27.   data () {
    28.     return {
    29.       username: '',
    30.       password: ''
    31.     }
    32.   },
    33.   methods:{
    34.     gotoRegister(){
    35.       this.$router.push('/Register');
    36.     },
    37.     doSubmit(){
    38.       let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
    39.       let params = {
    40.         username: this.username,
    41.         password: this.password
    42.       };
    43.  
    44.       // axios.get(url, {
    45.       //   params: params
    46.       // }).then(r => {
    47.       //   console.log(r);
    48.       //   if (r.data.success) {
    49.       //     this.$message({
    50.       //       message: r.data.msg,
    51.       //       type: 'success'
    52.       //     });
    53.       //   } else {
    54.       //     this.$message.error(r.data.msg);
    55.       //   }
    56.       // }).catch(e => {
    57.       // });
    58.  
    59.       axios.post(url,params).then(r => {
    60.         console.log(r);
    61.         // if (r.data.success) {
    62.         //   this.$message({
    63.         //     message: r.data.msg,
    64.         //     type: 'success'
    65.         //   });
    66.         // } else {
    67.         //   this.$message.error(r.data.msg);
    68.         // }
    69.         this.$message({
    70.           message: r.data.message,
    71.           type: r.data.code == 0 ? 'success' : 'error'
    72.         });
    73.       }).catch(e => {
    74.       });
    75.     }
    76.   }
    77. }
    78. </script>
    79.  
    80.  
    81. <style scoped>
    82. 	.login-wrap {
    83. 		box-sizing: border-box;
    84. 		width: 100%;
    85. 		height: 100%;
    86. 		padding-top: 10%;
    87.  
    88. 		background-repeat: no-repeat;
    89. 		background-position: center right;
    90. 		background-size: 100%;
    91. 	}
    92. .login-container {
    93. 	border-radius: 10px;
    94. 	margin: 0px auto;
    95. 	width: 350px;
    96. 	padding: 30px 35px 15px 35px;
    97. 	background: #fff;
    98. 	border: 1px solid #eaeaea;
    99. 	text-align: left;
    100. 	box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
    101. }
    102.  
    103. .title {
    104. 	margin: 0px auto 40px auto;
    105. 	text-align: center;
    106. 	color: #505458;
    107. }
    108. </style>

    效果图：

    第二部分：首页导航栏左侧菜单搭建

    2.1 导航栏和菜单的重要性

    首页导航栏和左侧菜单在Web应用中被认为是关键的用户界面组件，这是因为它们在用户体验和应用导航中起着至关重要的作用，具有以下重要性：

    1. 导航和可用性：首页导航栏和左侧菜单是用户访问Web应用的主要入口点。它们提供了导航的起点，使用户能够轻松地访问应用中的不同部分。良好设计的导航栏和菜单可以提高用户的可用性，使用户快速找到所需的功能或内容。

    2. 信息架构：左侧菜单通常反映了Web应用的信息架构和层次结构。通过合理组织菜单项，用户可以更容易地理解应用的内容结构和组织方式。这有助于用户快速找到他们需要的信息，而不会感到困惑或迷失在应用中。

    3. 导航一致性：导航栏和左侧菜单为Web应用提供了一种一致性的导航模式。用户在不同页面之间切换时，可以依靠这些组件来保持导航一致性，从而降低学习曲线，提高用户的舒适感和信任感。

    4. 空间效率：左侧菜单通常允许在有限的屏幕空间内提供大量导航选项。这种垂直布局可以更好地利用屏幕空间，尤其适用于移动设备和小屏幕。

    5. 个性化和用户控制：一些Web应用允许用户自定义左侧菜单中的选项或导航栏的快捷方式。这为用户提供了个性化的体验，使他们可以根据自己的需求和偏好来定制导航。

    6. 重要功能的突出显示：首页导航栏通常包含最重要或最频繁使用的功能的快捷方式。这有助于将关键功能突出显示，让用户更容易找到并使用这些功能。

    7. 响应式设计：良好设计的导航栏和左侧菜单可以适应不同屏幕尺寸和设备，从桌面到移动设备都能够提供一致的导航体验。这对于实现响应式设计至关重要。

    总之，首页导航栏和左侧菜单在Web应用中是关键的用户界面组件，它们不仅提供了导航功能，还有助于用户理解应用的结构、提高可用性、提供一致性的导航体验，并支持个性化和响应式设计。它们的设计和实现需要特别关注，以确保用户能够轻松、高效地使用Web应用。

     前期准备

    依需用到案例展示，我们需要用到三个组件和部分图片搭建页面，如下：

    三个组件分别如下：

    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">Main</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.     },
    25. 		data(){
    26.       return{
    27.           asideClass:'main-aside'
    28.       }
    29.     },
    30.     created(){
    31.       this.$root.Bus.$on('xxx',v=>{
    32.         this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
    33.       });
    34.     }
    35. 	};
    36. </script>
    37. <style scoped>
    38. 	.main-container {
    39. 		height: 100%;
    40. 		width: 100%;
    41. 		box-sizing: border-box;
    42. 	}
    43.  
    44. 	.main-aside-collapsed {
    45. 		/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    46. 		width: 64px !important;
    47. 		height: 100%;
    48. 		background-color: #334157;
    49. 		margin: 0px;
    50. 	}
    51.  
    52. 	.main-aside {
    53. 		width: 240px !important;
    54. 		height: 100%;
    55. 		background-color: #334157;
    56. 		margin: 0px;
    57. 	}
    58.  
    59. 	.main-header,
    60. 	.main-center {
    61. 		padding: 0px;
    62. 		border-left: 2px solid #333;
    63. 	}
    64. </style>

    LeftNav.vue：

    1. <template>
    2. 	<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" 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.     created(){
    48.       this.$root.Bus.$on('xxx',v=>{
    49.         this.collapsed = v;
    50.       });
    51.     }
    52. 	}
    53. </script>
    54. <style>
    55. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    56. 		width: 240px;
    57. 		min-height: 400px;
    58. 	}
    59.  
    60. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    61. 		border: none;
    62. 		text-align: left;
    63. 	}
    64.  
    65. 	.el-menu-item-group__title {
    66. 		padding: 0px;
    67. 	}
    68.  
    69. 	.el-menu-bg {
    70. 		background-color: #1f2d3d !important;
    71. 	}
    72.  
    73. 	.el-menu {
    74. 		border: none;
    75. 	}
    76.  
    77. 	.logobox {
    78. 		height: 40px;
    79. 		line-height: 40px;
    80. 		color: #9d9d9d;
    81. 		font-size: 20px;
    82. 		text-align: center;
    83. 		padding: 20px 0px;
    84. 	}
    85.  
    86. 	.logoimg {
    87. 		height: 40px;
    88. 	}
    89. </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. 		<el-menu-item index="3" disabled>消息中心</el-menu-item>
    18. 		<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    19. 	</el-menu> -->
    20. 	<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
    21. 		<el-button class="buttonimg">
    22. 			<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
    23. 		</el-button>
    24. 		<el-submenu index="2" class="submenu">
    25. 			<template slot="title">超级管理员</template>
    26. 			<el-menu-item index="2-1">设置</el-menu-item>
    27. 			<el-menu-item index="2-2">个人中心</el-menu-item>
    28. 			<el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    29. 		</el-submenu>
    30. 	</el-menu>
    31. </template>
    32.  
    33. <script>
    34. 	export default {
    35. 		data(){
    36. 		  return {
    37. 		      collapsed:false,
    38.           imgshow:require('@/assets/img/show.png'),
    39.           imgsq:require('@/assets/img/sq.png')
    40. 		  }
    41. 		}
    42.     ,methods:{
    43.       doToggle(){
    44.         this.collapsed = ! this.collapsed;
    45.         //this.$emit()
    46.         //将是否折叠变量放入总线
    47.         this.$root.Bus.$emit('xxx',this.collapsed);
    48.       },
    49.       exit(){
    50.         this.$router.push("/");
    51.       }
    52.     }
    53. 	}
    54. </script>
    55.  
    56. <style scoped>
    57. 	.el-menu-vertical-demo:not(.el-menu--collapse) {
    58. 		border: none;
    59. 	}
    60.  
    61. 	.submenu {
    62. 		float: right;
    63. 	}
    64.  
    65. 	.buttonimg {
    66. 		height: 60px;
    67. 		background-color: transparent;
    68. 		border: none;
    69. 	}
    70.  
    71. 	.showimg {
    72. 		width: 26px;
    73. 		height: 26px;
    74. 		position: absolute;
    75. 		top: 17px;
    76. 		left: 17px;
    77. 	}
    78.  
    79. 	.showimg:active {
    80. 		border: none;
    81. 	}
    82. </style>

    配置组件与路由关系

    接下来就是要想让我们的组件能够成功展示，我们需要去配置他们路由的一些关系，如下，

     配置组件

    在router包下加入以下代码，如下：

    1. import AppMain from '@/components/AppMain'
    2. import LeftNav from '@/components/LeftNav'
    3. import TopNav from '@/components/TopNav'
    配置路由关系

    在router包下加入以下代码，如下：

    1. {
    2.     path: '/AppMain',
    3.     name: 'AppMain',
    4.     component: AppMain,
    5.     children: [
    6.       {
    7.         path: '/LeftNav',
    8.         name: 'LeftNav',
    9.         component: LeftNav
    10.       },
    11.       {
    12.         path: '/TopNav',
    13.         name: 'TopNav',
    14.         component: TopNav
    15.       }
    16.     ]
    17.   }]

    main.js：

    1. // The Vue build version to load with the `import` command
    2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    3. import Vue from 'vue'
    4. //开发环境下才会引入mockjs
    5. process.env.MOCK && require('@/mock')
    6. // 新添加1
    7. import ElementUI from 'element-ui'
    8. // 新添加2，避免后期打包样式不同，要放在import App from './App';之前
    9. import 'element-ui/lib/theme-chalk/index.css'
    10.  
    11. import App from './App'
    12. import router from './router'
    13.  
    14. import axios from '@/api/http'
    15. import VueAxios from 'vue-axios'
    16.  
    17. Vue.use(VueAxios,axios)
    18. // 新添加3
    19. Vue.use(ElementUI)
    20. Vue.config.productionTip = false
    21.  
    22. /* eslint-disable no-new */
    23. new Vue({
    24.   el: '#app',
    25.   router,
    26.   data(){
    27.     return{
    28.       Bus:new Vue()
    29.     }
    30.   },
    31.   components: { App },
    32.   template: ''
    33. })

    效果图：

  • 相关阅读:
    Spring之Bean生命周期之二--- Instantiation阶段
    SQL数据库使用方法
    Office project 2007安装
    excel表格转pdf格式的方法介绍
    策略模式(Strategy)
    bp神经网络的应用领域,BP神经网络能够做什么
    讨论面向对象及方法学的特点？为什么要用面向对象方法开发软件？
    流程记录：
    Python教程：读取文件有三种方法：（read、readline、readlines）详细用法
    Mall电商实战项目全面升级！支持最新版SpringBoot，干掉循环依赖...
  • 原文地址：https://blog.csdn.net/liaozhixiangjava/article/details/133286133