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

本文涉及的产品
数据传输服务 DTS,数据同步 small 3个月
推荐场景:
数据库上云
数据传输服务 DTS,数据迁移 small 3个月
推荐场景:
MySQL数据库上云
数据传输服务 DTS,同步至SelectDB 1个月
简介: Vue中开发中Mock和总线了解以及应用

一.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.最终效果图

 

 

相关实践学习
自建数据库迁移到云数据库
本场景将引导您将网站的自建数据库平滑迁移至云数据库RDS。通过使用RDS,您可以获得稳定、可靠和安全的企业级数据库服务,可以更加专注于发展核心业务,无需过多担心数据库的管理和维护。
Sqoop 企业级大数据迁移方案实战
Sqoop是一个用于在Hadoop和关系数据库服务器之间传输数据的工具。它用于从关系数据库(如MySQL,Oracle)导入数据到Hadoop HDFS,并从Hadoop文件系统导出到关系数据库。 本课程主要讲解了Sqoop的设计思想及原理、部署安装及配置、详细具体的使用方法技巧与实操案例、企业级任务管理等。结合日常工作实践,培养解决实际问题的能力。本课程由黑马程序员提供。
相关文章
|
18天前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
150 2
|
4月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
583 0
|
4月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
2月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
281 1
|
3月前
|
JavaScript 安全
在 Vue 中,如何在回调函数中正确使用 this?
在 Vue 中,如何在回调函数中正确使用 this?
121 0
|
3月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎,秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」,成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构,实现设计到代码全流程自动化,效率提升300%,助力企业降本增效,引领“设计即生产”新时代。
251 1
|
4月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
378 17
|
4月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
215 1
|
4月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中,实现文件批量下载是常见需求。例如文档管理系统或图片库应用中,用户可能需要一次性下载多个文件。本文介绍了三种技术方案:1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载;2) 借助后端接口完成文件压缩与传输;3) 使用`StreamSaver`解决大文件下载问题。同时,通过在线教育平台的实例详细说明了前后端的具体实现步骤,帮助开发者根据项目需求选择合适方案。
324 0
|
4月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
141 0