SPA项目之主页面--Mock.js以及组件通信(总线)的运用

🥳🥳Welcome Huihui's Code World ! !🥳🥳

接下来看看由辉辉所写的关于Vue+ElementUI的相关操作吧

目录

🥳🥳Welcome Huihui's Code World ! !🥳🥳

一.Mock.js是什么

二.为什么要使用

三.使用Mock.js的步骤 

0.下载Mock.js 库

​编辑

1.配置环境

①配置开发环境--dev.env.js

②配置生产环境--prod.env.js

③src》main.js

2.定义 Mock 默认接口数据

3.绑定接口数据

①src》api》action.js(被绑定的接口【登陆】)

②src》mock》index.js(与接口相绑定)

4.发起 AJAX 请求并拦截响应

四.主界面的搭建

1.组件通信中的总线是什么

2.为什么要使用

3.怎么使用

①创建一个全局的事件总线实例

②在需要发送事件的组件中,使用$emit方法触发事件,并传递数据

③在需要接收事件的组件中,使用$on方法监听事件,并处理数据​编辑

4.案例:主界面搭建

①定义组件

AppMain.Vue

LeftNav.Vue

TopNav.Vue

②定义组件的和路由的关系

③效果预览


一.Mock.js是什么

        Mock.js 是一款用于生成随机数据的 JavaScript 库。它可以模拟接口请求,生成模拟数据,用于前端开发和测试。通过定义接口的请求和响应数据结构,Mock.js 可以根据这些规则自动生成符合要求的随机数据。这样可以方便前端开发人员在后端接口还没有完全实现的情况下进行前端开发和测试工作。Mock.js 提供了丰富的语法和功能,可以灵活地定义模拟数据的类型、格式和规则,支持生成随机字符串、数字、数组、对象等各种类型的数据。它也可以模拟 HTTP 请求的响应,支持模拟延迟和错误状态码,以方便前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率【 Mock.js是一个模拟数据的生成器,用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率

二.为什么要使用

        自前后端分离之后,前端迫切需要一种机制,不再需要依赖后端接口开发,如果还是依赖于后端的数据,那么将会导致项目的工期拉长,前端需要等待后端产出数据才能够进行工作,这非常不符合企业想要实现高效率的需求,那么运用mock.js便能够很好的解决这一个痛点

  1. 配置灵活:Mock.js 提供了简洁而灵活的语法来定义数据结构和规则。你可以根据需要定义模拟数据的类型、格式、范围等,以生成符合预期的数据

  2. 支持拦截请求:Mock.js 可以拦截 AJAX 请求,模拟后端的数据响应。这样就可以在前端开发过程中独立进行,而不依赖于后端接口的实现

  3. 支持动态数据:Mock.js 提供了一些动态数据生成的能力,比如在生成数据时可以根据规则计算、处理数据,从而生成更加复杂和灵活的模拟数据

  4. 扩展性强:Mock.js 提供了插件机制,可以根据实际需求进行扩展,比如扩展更多的数据类型、自定义规则等

  5. 文档友好:Mock.js 提供了详细的文档和示例,方便开发人员学习和使用。文档中包含了丰富的示例和用法,解释了每个特性的用途和用法

三.使用Mock.js的步骤 

0.下载Mock.js 库

npm i mockjs -D

1.配置环境

①配置开发环境--dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')module.exports = merge(prodEnv, {NODE_ENV: '"development"',MOCK: 'true'
})

②配置生产环境--prod.env.js

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

③src》main.js

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

2.定义 Mock 默认接口数据

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

3.绑定接口数据

①src》api》action.js(被绑定的接口【登陆】)

/*** 对后台请求的地址的封装,URL格式如下:* 模块名_实体名_操作*/
export default {'SERVER': 'http://localhost:8080', //服务器'SYSTEM_USER_DOLOGIN': '/user/userLogin', //登陆'SYSTEM_USER_DOREG': '/user/userRegister', //注册'getFullPath': k => { //获得请求的完整地址,用于mockjs测试时使用return this.SERVER + this[k];}
}

②src》mock》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)

4.发起 AJAX 请求并拦截响应

模拟响应ajax请求,后台没有启动,并且是随机的,可能成功和失败,就类似于调用接口,可能成功也可能失败

四.主界面的搭建

1.组件通信中的总线是什么

        总线是一种通信方式,两个非父子关系组件和兄弟组件之间的组件想要进行通信,那么可以使用事件总线这种方法。事件总线中通过中心控制不同的节点来对事件进行集中管理,我们可以将它看做是我们生活中通信网络中的基站

2.为什么要使用

🔺以下是一个常规的主界面业务需求

当点击顶部上面的按钮时,需要控制左侧树形菜单收起与展开

当点击左侧树形菜单时,需要在右侧显示出相应选项卡以及内容区域显示出相应的内容

当点击右侧中的选项卡时,需要需要在左侧定位到相应的菜单选项

🔺如果我们按照以前的组件通信(父子相传)来编写代码的话,那么我们需要编写一大串重复且冗余的代码(多层嵌套关系需要一层一层的进行传递),这样一想着实是麻烦,且后期还不便于维护...

🔺组件通信中事件总线就不一样了,事件总线是一种用于实现组件间跨级通信的机制。它允许我们在Vue应用中创建一个全局的事件中心,组件可以通过该事件中心来发送和接收事件,实现数据的传递和共享。使用事件总线,我们可以实现组件间的松耦合通信,提高代码的可维护性和可扩展性(说白了就是所有的组件都只需要和总线打交道。于是便不存在之前那样的层级传递了)

3.怎么使用

①创建一个全局的事件总线实例

src》main.js

②在需要发送事件的组件中,使用$emit方法触发事件,并传递数据

③在需要接收事件的组件中,使用$on方法监听事件,并处理数据

4.案例:主界面搭建

①定义组件

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'}},created() {this.$root.Bus.$on("wh", (v) => {this.asideClass = v ? 'main-aside-collapsed' : '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>
LeftNav.Vue

<template><el-menu default-active="2" class="el-menu-vertical-demo" background-color="#334157"text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed" ><!-- <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}},created(){this.$root.Bus.$on("wh", (v)=>{this.collapsed= v ;});}}
</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>
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,imgsq: require('@/assets/img/sq.png'),imgshow: require('@/assets/img/show.png')}},methods: {doToggle() {this.collapsed = !this.collapsed;//将是否折叠的变量放入到总线中this.$root.Bus.$emit("wh", this.collapsed);},exit() {this.$router.push({path: '/Login'})}}}
</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>

②定义组件的和路由的关系

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/views/Login'
import Register from '@/views/Register'
import AppMain from '@/components/AppMain'
import LeftNav from '@/components/LeftNav'
import TopNav from '@/components/TopNav'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'Login',component: Login},{path: '/Login',name: 'Login',component: Login},{path: '/Register',name: 'Register',component: Register}, {path: '/AppMain',name: 'AppMain',component: AppMain,children:[{path: '/LeftNav',name: 'LeftNav',component: LeftNav},{path: '/TopNav',name: 'TopNav',component: TopNav}]} ]
})

③效果预览

因为还没有数据,只是模拟,所有右侧的内容显示区域暂时是定死的

好啦,今天的分享就到这了,希望能够帮到你呢!😊😊   

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全流量安全分析之服务器非法外连

服务器非法外连监控的重要性在于保护服务器的安全性和防止被黑客利用&#xff0c;以下是几个重要的理由&#xff1a; 1、发现恶意活动&#xff1a;通过监控服务器的外连流量&#xff0c;可以及时发现是否有未经授权或可疑的连接尝试。这可能包括入侵攻击、数据泄露、恶意软件传…

RobotFramework自动化测试框架系列学习----(三)Web自动化原理+实操

1.目的&#xff1a; 模拟一些基本的网页点击跳转、页面登陆退出等 2.需要安装扩展库&#xff1a; pip install robotframework-seleniumlibrary 或pip install robotframework-selenium2library3.元素定位 用xpath和css定位 4.原理 我们采用rf框架中的三层架构去做测试…

阿里云服务器怎么使用?网站上线全教程参考

阿里云服务器使用教程包括云服务器购买、云服务器配置选择、云服务器开通端口号、搭建网站所需Web环境、安装网站程序、域名解析到云服务器公网IP地址&#xff0c;最后网站上线全流程&#xff0c;阿小云分享阿里云服务器详细使用教程&#xff1a; 目录 阿里云服务器使用教程 …

SQL注入——预编译CASE注入

文章目录 预编译 CASE 注入1. SQL注入漏洞防御2. WEBGOAT SQL注入2.1 WebGoat 8.02.2 Order by 注入2.2.1 构造 when 的条件2.2.2 代码审计 预编译 CASE 注入 预编译 CASE&#xff08;Prepared CASE&#xff09;是一种数据库查询语言&#xff08;如SQL&#xff09;中的控制语句…

Windows10关闭小娜最好方法是什么?

Windows10关闭小娜最好方法是什么&#xff1f;Windows10系统内的小娜可以帮助大家实现各种操作和提供一系列的便捷功能。但是&#xff0c;有些用户并不需要小娜的帮助&#xff0c;所以想要关闭小娜功能&#xff0c;下面小编给大家介绍关闭Windows10系统内小娜的最好方法&#x…

【LeetCode-简单题】501. 二叉搜索树中的众数

文章目录 题目方法一&#xff1a;暴力哈希方法二&#xff1a;利用二叉搜索树的特性&#xff08;递归双指针&#xff09; 题目 方法一&#xff1a;暴力哈希 这是针对于普通二叉树的解法 统计number出现次数 然后将次数最大的众数集 取出来 Map<Integer , Integer > map …

体验亚马逊的 CodeWhisperer 感觉

CodeWhisperer 是亚马逊推出的辅助编程工具&#xff0c;在程序员写代码时&#xff0c;它能根据其内容生成多种代码建议。 CodeWhisperer 目前已支持近10几种语言&#xff0c;我是用 java 语言&#xff0c;用的开发工具是 idea&#xff0c;说一下我用的情况。 亚马逊云科技开发…

96.不同的二叉搜索树

​ 题目&#xff1a; 96. 不同的二叉搜索树 中等 2.4K 相关企业 给你一个整数 n &#xff0c;求恰由 n 个节点组成且节点值从 1 到 n 互不相同的 二叉搜索树 有多少种&#xff1f;返回满足题意的二叉搜索树的种数。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xf…

数据结构-----树和二叉树必知必会知识

目录 前言 思维导图 一.树 树的定义 二.二叉树 1.二叉树的定义 2.二叉树的形态&#xff08;图&#xff09; 3.二叉树的性质 三.满二叉树 1.定义 2.特点和性质 四.完全二叉树 1.定义 2.特点和性质 前言 今天开始我们就学习新的数据结构类型啦&#xff01;没错它就是…

python安全工具开发笔记(四)——python网络编程

一、C/S架构 什么是C/S架构 C : Client S : Server。客户机和服务器结构。 Server 唯一的目的就是等待Client 的请求&#xff0c;Client 连上 Server 发送必要的数据&#xff0c;然后等待Server端完成请求的反馈。 C/S网络编程 Server端进行设置&#xff0c;首先创建一个通信…

【LeetCode75】第六十三题 不同路径

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们返回地图的长和宽。问我们从地图的左上走到右下有几种方法。我们只能往下走或是往右走。 这个算是简单的二维动态规划题了。 …

RabbitMQ生产故障问题分析

1. 问题引发 由某个服务BI-collector-xx队列出现阻塞&#xff0c;影响很整个rabbitMQ集群服务不可用&#xff0c;多个应用MQ生产者服务出现假死状态&#xff0c;系统影响面较广&#xff0c;业务影响很大。当时为了应急处理&#xff0c;恢复系统可用&#xff0c;运维相对粗暴的把…

华为OD机试 - 相同数字组成图形的周长 - 矩阵(Java 2023 B卷 100分)

目录 专栏导读一、题目描述二、输入描述三、输出描述四、Java算法源码五、效果展示1、输入2、输出 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷&#xff09;》。 刷的越多…

docker容器

虚拟化产品 1.奇居架构 2.原生架构 1.支持仿真虚拟化&#xff08;对系统硬件没有要求&#xff0c;性能最低&#xff09;vmware个人在windows支持 vmware workstationvmware fusion MAC2.全虚拟化产品&#xff0c;直接使用物理硬件、性能高 exic&#xff08;操作系统&#xff0…

CentOS 7 制作openssl 1.1.1w 版本rpm包 —— 筑梦之路

源码下载地址&#xff1a; https://www.openssl.org/source/openssl-1.1.1w.tar.gz 参考之前的文章&#xff1a; openssl 1.1.1L /1.1.1o/1.1.1t rpm包制作——筑梦之路_openssl的rpm包_筑梦之路的博客-CSDN博客 直接上spec文件&#xff1a; Name: openssl Version: 1.1…

【差旅游记】初见乌海湖

哈喽&#xff0c;大家好&#xff0c;我是雷工。 最近在乌海出差&#xff0c;有幸见到了传说中在沙漠中看海的“黄河明珠”——乌海湖。 前段时间一直有点忙&#xff0c;现在有点时间&#xff0c;趁还没忘光&#xff0c;简单整理记录下。 那是在上个月&#xff0c;2023年8月8号…

【大虾送书第十一期】适合新手自学的网络安全基础技能“蓝宝书”:《CTF那些事儿》

目录 &#x1f96e;写在前面 &#x1f96e;内容简介 &#x1f96e;读者对象 &#x1f96e;专家推荐 &#x1f96e;目录 &#x1f96e;文末福利 &#x1f990;博客主页&#xff1a;大虾好吃吗的博客 &#x1f990;专栏地址&#xff1a;免费送书活动专栏地址 写在前面 CTF比赛是快…

Leetcode 887. 鸡蛋掉落

文章目录 题目代码&#xff08;9.25 首刷看解析&#xff09; 题目 Leetcode 887. 鸡蛋掉落 代码&#xff08;9.25 首刷看解析&#xff09; class Solution { public:unordered_map<int, int> memo;int superEggDrop(int K, int N) {return dp(K, N);}int dp(int k, int…

【从入门到起飞】JavaSE—方法引用

&#x1f38a;专栏【JavaSE】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【The truth that you leave】 &#x1f970;欢迎并且感谢大家指出我的问题 文章目录 &#x1f354;概述&#x1f354;注意&#x1f388;如何确定是否是…

Java实现byte数组与Hex互转

十六进制字符的输出大写字符&#xff1a;0123456789ABCDEF 十六进制字符的输出小写字符&#xff1a;0123456789abcdef下面使用十六进制大写字符。 1、方式1 public class HexStringUtils {private static final char[] HEX_CHAR_TABLE {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B,…