Vue中开发中Mock和总线了解以及应用

news2024/11/19 17:23:11

🏅我是默，一个在CSDN分享笔记的博主。📚📚

🌟在这里，我要推荐给大家我的专栏《Vue》。🎯🎯

🚀无论你是编程小白，还是有一定基础的程序员，这个专栏都能满足你的需求。我会用最简单易懂的语言，带你走进Vue的世界，让你从零开始，一步步成为JAVA大师。🚀🏆

🌈让我们在Vue的世界里畅游吧！🌈

🎁如果感觉还不错的话请记得给我点赞哦！🎁🎁

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

一.Mock

1.什么是Mock.js

前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景：

  • 老大，接口文档还没输出，我的好多活干不下去啊！

  • 后端小哥，接口写好了没，我要测试啊！

前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点。

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

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

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

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

更多内容，可查看Mockjs官方

2.Mock 在软件开发中一些常见的使用场景：

  1. 单元测试：在单元测试中，当需要隔离被测试组件和外部依赖时，可以使用 Mock 对象来替代真实的依赖对象。这样可以确保测试的稳定性和可重复性，同时可以精确控制依赖对象的行为和返回值。

  2. 模拟网络请求：在开发需要与外部 API 或网络服务交互的应用程序时，可以使用 Mock 对象来模拟网络请求的响应。这样可以在没有真实网络请求的情况下进行开发和测试，提高开发效率并减少对外部资源的依赖。

  3. 数据库测试：在进行数据库相关操作的测试时，可以使用 Mock 对象来模拟数据库连接和查询的结果。这样可以避免对真实数据库进行操作，提高测试的速度和独立性。

  4. 异步任务测试：当涉及异步任务、消息队列或定时器等机制时，可以使用 Mock 对象来模拟这些机制的行为。这样可以在测试中快速并可控地触发异步任务，并验证任务的正确性和执行情况。

  5. 接口开发：在开发接口时，可以使用 Mock 对象作为临时实现，用于模拟尚未实现的接口的行为。这样可以并行开发前后端，快速迭代和调试接口。

  6. 故障注入：通过使用 Mock 对象，可以模拟系统中的故障情况，如网络错误、服务不可用等。这样可以测试应用程序对于异常情况的处理能力以及容错机制的正确性。

  7. 性能测试：在进行性能测试时，可以使用 Mock 对象替代部分依赖，以便更好地控制测试环境和测试条件，从而更准确地评估系统的性能指标。

Mock 的应用场景很多，以上只是一些常见的示例。在实际开发中，根据具体需求和情况，可以灵活运用 Mock 技术来辅助软件开发和测试工作。

二.将mock部署到Vue项目中  

1.下载mock依赖

npm i mockjs -D

 

 

2.配置环境

开发环境配置（dev.env.js ）

  MOCK: 'true'

 

生产环境配置 （prod.env.js ）

MOCK: 'false'

 

在main.js动态加载

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

 

3.准备造假数据

引入生成模拟数据的包

 

4. 连接接口，用于模拟假数据生成

在login.vue中添加这样一个方法

   this.$message({
               message:r.data.message,
               type:r.data.code==0 ? 'success ' :'error'
             });

效果展示

三.总线

1.传统定义

总线（Bus）是计算机系统中负责数据传输、控制信号传递和电源供应等作用的一组共享的电路线路。它是计算机中重要的组成部分，用于连接计算机各个部件，包括CPU、内存、输入输出设备等，使这些部件能够互相通信和交换数据。

总线在现代计算机中被广泛使用，不同类型的总线根据其数据传输速率、传输距离、数据长度和电压等特性进行分类。常见的总线包括系统总线、扩展总线、I/O总线、PCI总线、USB总线等。

总线的作用是使得各个部件之间能够协调工作，共同完成计算机的各项任务，同时也为计算机的升级和扩展提供了方便。由于总线的重要作用和发展潜力，目前也面临着安全性、带宽和延迟等问题，需要不断进行技术升级和优化。

2.组件通信总线

组件通信总线通常分为两类：

  1. 系统总线（System Bus）：用于连接CPU、内存和主板上其他主要组件的总线。它由地址总线、数据总线和控制总线组成，用于CPU与内存或其他外设之间的数据传输。

  2. 扩展总线（Expansion Bus）：用于连接各种扩展设备和接口卡，例如PCI总线、USB总线、PCIe总线等。扩展总线允许计算机系统通过插槽或端口来扩展功能，如添加显卡、声卡、网络适配器等。

组件通信总线的特点包括带宽、速度、传输协议、可扩展性、电气特性等。它的设计需要考虑不同组件之间的数据传输需求，并根据系统的性能要求进行优化。

总之，组件通信总线在计算机系统中扮演着连接不同组件、实现数据传输和通信的重要角色，为计算机的各个部件协同工作提供了基础设施。

3.实例展示

1.导入组件

2.配置路由关系

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: '/TopNav',
          name: 'TopNav',
          component: TopNav
        },
        {
          path: '/LeftNav',
          name: 'LeftNav',
          component: LeftNav
        }
      ]

    }
  ]
})

3.展示静态页面

AppMain.vue
<template>
	<el-container class="main-container">
		<el-aside v-bind:class="asideClass">
			<LeftNav></LeftNav>
		</el-aside>
		<el-container>
			<el-header class="main-header">
				<TopNav></TopNav>
			</el-header>
			<el-main class="main-center">Main</el-main>
		</el-container>
	</el-container>
</template>

<script>
	// 导入组件
	import TopNav from '@/components/TopNav.vue'
	import LeftNav from '@/components/LeftNav.vue'

	// 导出模块
	export default {
      components:{
        TopNav,LeftNav
      },
		data(){
      return{
        asideClass:'main-aside'
      };
    }
	};
</script>
<style scoped>
	.main-container {
		height: 100%;
		width: 100%;
		box-sizing: border-box;
	}

	.main-aside-collapsed {
		/* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
		width: 64px !important;
		height: 100%;
		background-color: #334157;
		margin: 0px;
	}

	.main-aside {
		width: 240px !important;
		height: 100%;
		background-color: #334157;
		margin: 0px;
	}

	.main-header,
	.main-center {
		padding: 0px;
		border-left: 2px solid #333;
	}
</style>
TopNav.Vue
<template>
	<!-- <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
	 text-color="#fff" active-text-color="#ffd04b">
		<el-menu-item index="1">处理中心</el-menu-item>
		<el-submenu index="2">
			<template slot="title">我的工作台</template>
			<el-menu-item index="2-1">选项1</el-menu-item>
			<el-menu-item index="2-2">选项2</el-menu-item>
			<el-menu-item index="2-3">选项3</el-menu-item>
			<el-submenu index="2-4">
				<template slot="title">选项4</template>
				<el-menu-item index="2-4-1">选项1</el-menu-item>
				<el-menu-item index="2-4-2">选项2</el-menu-item>
				<el-menu-item index="2-4-3">选项3</el-menu-item>
			</el-submenu>
		</el-submenu>

		<el-menu-item index="3" disabled>消息中心</el-menu-item>
		<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
	</el-menu> -->
	<el-menu class="el-menu-demo" mode="horizontal" background-color="#334157" text-color="#fff" active-text-color="#fff">
		<el-button class="buttonimg">
			<img class="showimg" :src="collapsed?imgshow:imgsq" @click="doToggle()">
		</el-button>
		<el-submenu index="2" class="submenu">
			<template slot="title">超级管理员</template>
			<el-menu-item index="2-1">设置</el-menu-item>
			<el-menu-item index="2-2">个人中心</el-menu-item>
			<el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
		</el-submenu>
	</el-menu>
</template>

<script>
	export default {
		data(){
		  return{
		    collapsed:false,
       imgshow:require('@/assets/img/show.png'),
       imgsq:require('@/assets/img/sq.png')
		  };
		}
	}
</script>

<style scoped>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		border: none;
	}

	.submenu {
		float: right;
	}

	.buttonimg {
		height: 60px;
		background-color: transparent;
		border: none;
	}

	.showimg {
		width: 26px;
		height: 26px;
		position: absolute;
		top: 17px;
		left: 17px;
	}

	.showimg:active {
		border: none;
	}
</style>
Left.vue
<template>
	<el-menu default-active="2" class="el-menu-vertical-demo" background-color="#334157"
	 text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" :collapse-transition="bb">
		<!-- <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"> -->
		<div class="logobox">
			<img class="logoimg" src="../assets/img/logo.png" alt="">
		</div>
		<el-submenu index="1">
			<template slot="title">
				<i class="el-icon-location"></i>
				<span>导航一</span>
			</template>
			<el-menu-item-group>
				<template slot="title">分组一</template>
				<el-menu-item index="1-1">选项1</el-menu-item>
				<el-menu-item index="1-2">选项2</el-menu-item>
			</el-menu-item-group>
			<el-menu-item-group title="分组2">
				<el-menu-item index="1-3">选项3</el-menu-item>
			</el-menu-item-group>
			<el-submenu index="1-4">
				<template slot="title">选项4</template>
				<el-menu-item index="1-4-1">选项1</el-menu-item>
			</el-submenu>
		</el-submenu>
		<el-menu-item index="2">
			<i class="el-icon-menu"></i>
			<span slot="title">导航二</span>
		</el-menu-item>
		<el-menu-item index="3" disabled>
			<i class="el-icon-document"></i>
			<span slot="title">导航三</span>
		</el-menu-item>
		<el-menu-item index="4">
			<i class="el-icon-setting"></i>
			<span slot="title">导航四</span>
		</el-menu-item>
	</el-menu>
</template>
<script>
	export default {
		data(){
		  return{
		    collapsed:false
		  };
		}
	}
</script>
<style>
	.el-menu-vertical-demo:not(.el-menu--collapse) {
		width: 240px;
		min-height: 400px;
	}

	.el-menu-vertical-demo:not(.el-menu--collapse) {
		border: none;
		text-align: left;
	}

	.el-menu-item-group__title {
		padding: 0px;
	}

	.el-menu-bg {
		background-color: #1f2d3d !important;
	}

	.el-menu {
		border: none;
	}

	.logobox {
		height: 40px;
		line-height: 40px;
		color: #9d9d9d;
		font-size: 20px;
		text-align: center;
		padding: 20px 0px;
	}

	.logoimg {
		height: 40px;
	}
</style>
 页面展示效果

4.展示动态效果 

1.构建总线

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'

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

// 新添加1
import ElementUI from 'element-ui'
// 新添加2，避免后期打包样式不同，要放在import App from './App';之前
import 'element-ui/lib/theme-chalk/index.css'

import App from './App'
import router from './router'

// 新添加3
Vue.use(ElementUI)
Vue.config.productionTip = false

  import axios from '@/api/http'
  import VueAxios from 'vue-axios'

  Vue.use(VueAxios,axios)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  data(){
     return {
       Bus:new  Vue()
     }
  },
  components: { App },
  template: '<App/>'
})

2.优化的界面

AppMain.vue
	export default {
      components:{
        TopNav,LeftNav
      },
		data(){
      return{
        asideClass:'main-aside'
      };
    },
      created() {
        this.$root.Bus.$on('aaa',v=>{
          this.asideClass=v ? 'main-aside-collapsed' : 'main-aside';
        });
      }
	};

TopNav.vue
export default {
		data(){
		  return{
		    collapsed:false,
       imgshow:require('@/assets/img/show.png'),
       imgsq:require('@/assets/img/sq.png')
		  };
		},
     methods:{
       doToggle(){
         this.collapsed =!this.collapsed;
         //是否折叠 变量放入总线
         this.$root.Bus.$emit('aaa',this.collapsed);
       },
       exit(){
         this.$router.push("/");
       }
     }
	}
left.vue
	export default {
		data(){
		  return{
		    collapsed:false
		  };
		},
      created() {
        this.$root.Bus.$on('aaa',v=>{
          this.collapsed=v;
        });
      }
	}

3.最终效果图

 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1039368.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

[补题记录] Atcoder Beginner Contest 321（E）

[补题记录] Atcoder Beginner Contest 321（E）

URL&#xff1a;https://atcoder.jp/contests/abc321 目录 E Problem/题意 Thought/思路 Code/代码 E Problem/题意 有一颗 N 个节点的完全二叉树&#xff0c;现在给出节点 X&#xff0c;一个整数 K&#xff0c;问举例节点 X 的长度为 K 的点有多少个&#xff1f; Thoug…
阅读更多...
25436-2010 热封型茶叶滤纸 阅读笔记

25436-2010 热封型茶叶滤纸 阅读笔记

声明 本文是学习GB-T 25436-2010 热封型茶叶滤纸. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了热封型茶叶滤纸的产品分类、技术要求、试验方法、检验规则及标志、包装、运输、 贮存。 本标准适用于热封型包装机包装茶叶、咖…
阅读更多...
LLM - Make Causal Mask 构造因果关系掩码

LLM - Make Causal Mask 构造因果关系掩码

目录 一.引言 二.make_causal_mask 1.完整代码 2.Torch.full 3.torch.view 4.torch.masked_fill_ 5.past_key_values_length 6.Test Main 三.总结 一.引言 Causal Mask 主要用于限定模型的可视范围&#xff0c;防止模型看到未来的数据。在具体应用中&#xff0c;Caus…
阅读更多...
中国核动力研究设计院使用 DolphinDB 替换 MySQL 实时监控仪表

中国核动力研究设计院使用 DolphinDB 替换 MySQL 实时监控仪表

随着仪表测点的大幅增多和采样频率的增加&#xff0c;中国核动力研究设计院仪控团队原本基于 MySQL 搭建的旧系统已经无法满足大量数据并发写入、实时查询和聚合计算的需求。他们在研究 DB-Engines 时序数据库榜单时了解到国内排名第一的 DolphinDB。经过测试&#xff0c;发现其…
阅读更多...
瞄准核心因素：Boruta特征选择算法助力精准决策

瞄准核心因素：Boruta特征选择算法助力精准决策

一、引言 特征选择在机器学习和数据挖掘中扮演着重要的角色。通过选择最相关和最有信息量的特征&#xff0c;可以降低维度&#xff0c;减少数据复杂性&#xff0c;并提高模型的预测性能和解释能力。在实际应用中&#xff0c;特征选择有助于识别最具影响力的因素&#xff0c;提供…
阅读更多...
【内网穿透】在Ubuntu搭建Web小游戏网站，并将其发布到公网访问

【内网穿透】在Ubuntu搭建Web小游戏网站，并将其发布到公网访问

目录 前言 1. 本地环境服务搭建 2. 局域网测试访问 3. 内网穿透 3.1 ubuntu本地安装cpolar 3.2 创建隧道 3.3 测试公网访问 4. 配置固定二级子域名 4.1 保留一个二级子域名 4.2 配置二级子域名 4.3 测试访问公网固定二级子域名 前言 网&#xff1a;我们通常说的是互…
阅读更多...
复亚智能落地江苏化工，安防巡逻无人机守牢“安全线”

复亚智能落地江苏化工，安防巡逻无人机守牢“安全线”

化工业是国民经济的重要组成部分&#xff0c;但其生产环境和条件充满了挑战。大部分化学反应发生在高温、高压且有毒的环境中&#xff0c;而近70%的原料、中间体和终产品都带有易燃、易爆、有毒、有害以及腐蚀性的特性。在这样的情境下&#xff0c;安全生产不仅仅是一项日常任务…
阅读更多...
leetCode 968.监控二叉树（利用状态转移+贪心）

leetCode 968.监控二叉树（利用状态转移+贪心）

968. 监控二叉树 - 力扣&#xff08;LeetCode&#xff09; 给定一个二叉树&#xff0c;我们在树的节点上安装摄像头。节点上的每个摄影头都可以监视其父对象、自身及其直接子对象。计算监控树的所有节点所需的最小摄像头数量。 >>解题思路: 重要线索->题目示例中的摄…
阅读更多...
AP5126 降压恒流 PIN对PIN替LN2566 LED汽车大灯车灯驱动芯片

AP5126 降压恒流 PIN对PIN替LN2566 LED汽车大灯车灯驱动芯片

产品描述 AP5126 是一款 PWM 工作模式,高效率、外 围简单、内置功率管&#xff0c;适用于 12-80V 输入的高 精度降压 LED 恒流驱动芯片。输出最大功率可达 15W&#xff0c;最大电流 1.2A。 AP5126 可实现全亮/半亮功能切换&#xff0c;通过 MODE 切换&#xff1a;全亮/半…
阅读更多...
YZ09: VBA_Excel之读心术

YZ09: VBA_Excel之读心术

【分享成果&#xff0c;随喜正能量】多要求自己&#xff0c;你会更加独立&#xff0c;少要求别人&#xff0c;你会减少失望&#xff0c;宁愿花时间去修炼 不完美的自己&#xff0c;也不要浪费时间去期待完美的别人&#xff01;。 我给VBA下的定义&#xff1a;VBA是个人小型自动…
阅读更多...
SolidJs节点级响应性

SolidJs节点级响应性

前言 随着组件化、响应式、虚拟DOM等技术思想引领着前端开发的潮流&#xff0c;相关的技术框架大行其道&#xff0c;就以目前主流的Vue、React框架来说&#xff0c;它们都基于组件化、响应式、虚拟DOM等技术思想的实现&#xff0c;但是具有不同开发使用方式以及实现原理&#…
阅读更多...
Elasticsearch：与多个 PDF 聊天 | LangChain Python 应用教程（免费 LLMs 和嵌入）

Elasticsearch：与多个 PDF 聊天 | LangChain Python 应用教程（免费 LLMs 和嵌入）

在本博客中&#xff0c;你将学习创建一个 LangChain 应用程序&#xff0c;以使用 ChatGPT API 和 Huggingface 语言模型与多个 PDF 文件聊天。 如上所示&#xff0c;我们在最最左边摄入 PDF 文件&#xff0c;并它们连成一起&#xff0c;并分为不同的 chunks。我们可以通过使用 …
阅读更多...
在线商城项目EShop【ListView、adapter】

在线商城项目EShop【ListView、adapter】

要求如下&#xff1a; 1、创建在线商城项目EShop&#xff1b; 2、修改布局文件activity_main.xml&#xff0c;使用LineaLayout和ListView创建商品列表UI&#xff1b; 3、创建列表项布局list_item.xml&#xff0c;设计UI用于显示商品图标、名称和价格信息&#xff1b; 4、创…
阅读更多...
IT监控制度，IT监控体系如何分层

IT监控制度，IT监控体系如何分层

IT监控系统是指监控和管理it服务管理的软件。它涵盖了监控管理、服务台管理、问题管理和变更管理&#xff0c;旨在帮助组织更有效的运营信息系统&#xff0c;提高运营事故的响应速度。　　通过建立集中监控平台&#xff0c;IT监控系统与信息系统的融合可以完成统一的展示和管理…
阅读更多...
ICMP差错包

ICMP差错包

ICMP报文分类 Type Code 描述 查询/差错 0-Echo响应 0 Echo响应报文 查询 3-目的不可达 0 目标网络不可达报文 差错 1 目标主机不可达报文 差错 2 目标协议不可达报文 差错 3 目标端口不可达报文 差错 4 要求分段并设置DF flag标志报文 差错 5 源路由…
阅读更多...
【从0学习Solidity】 50. 多签钱包

【从0学习Solidity】 50. 多签钱包

【从0学习Solidity】50. 多签钱包 博主简介&#xff1a;不写代码没饭吃&#xff0c;一名全栈领域的创作者&#xff0c;专注于研究互联网产品的解决方案和技术。熟悉云原生、微服务架构&#xff0c;分享一些项目实战经验以及前沿技术的见解。关注我们的主页&#xff0c;探索全栈…
阅读更多...
Mac磁盘空间满了怎么办？Mac如何清理磁盘空间

Mac磁盘空间满了怎么办？Mac如何清理磁盘空间

你是不是发现你的Mac电脑存储越来越满&#xff0c;甚至操作系统本身就占了100多G的空间&#xff1f;这不仅影响了电脑的性能&#xff0c;而且也让你无法存储更多的重要文件和软件。别担心&#xff0c;今天这篇文章将告诉你如何清除多余的文件&#xff0c;让你的Mac重获新生。 一…
阅读更多...
【kafka实战】01 3分钟在Linux上安装kafka

【kafka实战】01 3分钟在Linux上安装kafka

本节采用docker安装Kafka。采用的是bitnami的镜像。Bitnami是一个提供各种流行应用的Docker镜像和软件包的公司。采用docker的方式3分钟就可以把我们想安装的程序运行起来&#xff0c;不得不说真的很方便啊&#xff0c;好了&#xff0c;开搞。使用前提&#xff1a;Linux虚拟机&…
阅读更多...
找不到msvcp110dll,无法继续执行代码，msvcp110dll丢失是什么意思

找不到msvcp110dll,无法继续执行代码，msvcp110dll丢失是什么意思

MSVCP110.dll是一个动态链接库文件&#xff0c;它是Microsoft Visual C 2012 Redistributable package的一部分。这个文件通常用于支持许多Microsoft Visual Studio 2012开发的应用程序。当您在运行某些程序时遇到“找不到msvcp110.dll”的错误时&#xff0c;这意味着您的计算机…
阅读更多...
PHY6230低成本遥控灯控芯片国产蓝牙BLE5.2 2.4G SoC

PHY6230低成本遥控灯控芯片国产蓝牙BLE5.2 2.4G SoC

高性价比的低功耗高性能蓝牙5.2系统级芯片&#xff0c;适用多种PC/手机外设连接场景。 高性能多模射频收发机&#xff1a; 通过硬件模块的充分复用实现高性能多模数字收发机。发射机&#xff0c;最大发射功率10dBm&#xff1b;BLE 1Mbps速率接收机灵敏度达到-96dBm&#xff1…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023