Vue中信息订阅与发布和配置代理服务器的使用和原理

信息订阅与发布

  • 全局事件总线和信息订阅与发布一样都是实现任意组件的通信。常用的是全局事件总线

  • 信息订阅与发布借用第三方库pubsub实现任意组件的通信

  • 安装pubsub

  • npm i pubsub-js
  • 下列代码为MyHeader组件订阅了一份信息,MyFooter负责传递信息给MyHeader

  • <template><div><h2>名字:{{ name }}</h2><h2>地址:{{ address }}</h2>     </div>
    </template>
    ​
    <script>
    // 引入第三方的库pubsub。引入之前需要npm i pubsub-js
    import PubSub from 'pubsub-js';
    export default {name: 'MyHeader',data(){return {name:'李四',address:'花果山',}},mounted(){// subscribe有订阅的意思。此处为订阅hello信息,data可以理解为邮箱等待信息的传入// PubSub.subscribe()结果是一个id和定时器输出的结果一致,用变量接收PubSub.subscribe()的结果。// PubSub.subscribe()括号内的函数需要写成箭头函数,这样this才是VueComponent。普通函数输出的this是第三方库的,vue不承认// 回调函数有两个值,第二个值才是传过来的值。也就是(msgName,data)括号中第一个参数是事件名hello,第二个参数才是等待传过来的值this.pubId = PubSub.subscribe('hello', (msgName,data) => {console.log('有人发布hello的消息,hello信息的回调执行了,', msgName, data);})},//用this.pubId来获取该订阅,用于销毁。beforeDestroy(){//通过unsubscribe来取消订阅PubSub.unsubscribe(this.pubId)}
    }
    </script>
  • 触发点击事件发布信息给MyHeader

  • <template><div><h2>名字:{{ name  }}</h2><h2>地址:{{ address  }}</h2><button @click="sendHeaderMag">发送信息给head</button></div>
    </template>
    ​
    <script>
    import PubSub from 'pubsub-js';
    export default {name: 'MyFooter',data(){return {name:'张三',address: '魔仙堡'}},methods:{// 发送信息给MyHeadersendHeaderMag(){//此处发布hello信息,将值name传递给MyFooter。因为MyFooter订阅了hello信息PubSub.publish('hello', this.name)}}
    }
    </script>
     

配置代理服务器

  • 配置单个代理服务器发出请求有两种情况 1、发出请求的xxx在脚手架文件中的public已经存在时,则不会向5000服务器发出请求 2、发出请求的xxx在脚手架文件中的public未存在时,才向5000服务器发出请求

  • 配置单个代理服务器的缺点:不能配置多个代理服务器,不能灵活的控制请求是否走代理

  • 假设目前有两个端口的服务器,一个为前端的8080另一个为后端的5000。

  • 下面整段代码在vue.config.js中。方式一为配置单个代理服务器的代码,方式二为配置多个代理服务器的代码

  • 在脚手架中vue.config.js文件开启代理服务器

  • //module.exports 的意思是允许从一个文件中导出内容,以便其他文件可以引入并使用这些内容。
    module.exports = {pages: {index: {entry: 'src/main.js',}},/*方式一//开启代理的服务器,开启后代理服务器需要重新启动脚手架devServer: {// proxy有代理的意思,开启代理服务器之后直接干活。故代理的端口写的是5000而不是8080proxy: 'http://localhost:5000'}*///方式二devServer: {// '/boyboy'为地址前缀。// 地址前缀作用:1、用于判断是否请求5000服务器 2、用于创建多个代理服务器。例如再开启一个demo代理服务器:'/demo':{}'/boyboy': {// 当代理服务器向5000服务器请求数据时,8000服务器和代理服务器都知道/boyboy,但5000服务器是不知道的。// 在代理服务器向5000服务器请求数据时,用pathRewrite将/boyboy去掉传给5000服务器。target: 'http://localhost:5000',pathRewrite: {'^/boyboy':''},//ws用于支持websocketws: true,//changeOrigin用于改变代理服务器的端口号。当5000服务器问代理服务器的端口号时,true代理服务器和5000的端口号一致,false端口号不一致changeOrigin: true}}}
    ​
  • 设置代理服务器的原因:

    如果8080直接向5000请求数据会出现跨域的问题。故设置了可以和5000的服务器通信的代理服务器8080。因为代理服务器和5000服务器通信用http请求即可,没有使用axios不会出现跨域问题

  • 8000服务器请求数据的过程:

    8080服务器向代理服务器请求,代理服务器向5000服务器请求,5000服务器就可以返回数据给代理服务器,代理服务器再返回给8080服务器

  • 下面为App组件需要引入axios异步通信

  • <template><div id="app"><router-view/></div>
    </template>
    <script>
    import axios from 'axios';
    export default {name: 'App',components: {MyFooter,MyHeader},methods:{getMyfooter(){/* 方式一//axios.get()可以理解为8080服务器找谁请求数据,那肯定找8080代理服务器。xxx的位置为代理服务器请求5000服务器的数据。如果请求的是5000服务器的数组,xxx就是数组名axios.get('http://lolcalhost:8080/xxx').then(response => {console.log('请求成功',response.data);},error => {console.log('请求失败',error.message);})*/// 方式二// “/boyboy”放置的位置在8080端口名的后面即可,如果需要请求5000服务器则加上地址前缀,不请求5000服务器则不用加上地址前缀。方式二解决方式一访问服务器不灵活的问题。axios.get('http://localhost:8080/boyboy/xxx').then(response => {console.log('请求成功',response.data);},error => {console.log('请求失败',error.message);})}}
    }
    </script>

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

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

相关文章

基于Java课堂签到系统

基于Java课堂签到系统 功能需求 1、用户登录&#xff1a;学生需要使用学号或手机号等唯一标识登录系统。 2、签到功能&#xff1a;在课堂开始时&#xff0c;学生可以通过系统进行签到&#xff0c;以证明出席。 3、签出功能&#xff1a;在课堂结束时&#xff0c;学生可以通过…

vite + javascript 创建纯 javascript项目

1、环境搭建&#xff1a;需要安装 node 管理器命令&#xff1a;安装了node的后&#xff0c;可以使用 npm &#xff0c;也可以安装使用 cnpm / pnpm 下载 cnpm npm install -g cnpm --registryhttps://registry.npm.taobao.org 下载 pnpm npm i -g pnpm pnpm config set r…

条款16:成对使用 new 和 delete 时要采用相同形式

下面程序的行为是未定义的。至少&#xff0c;stringArray指向的100个string对象中有99个不太可能被正确地析构。 被delete的指针指向单个对象还是一个对象数组&#xff1f;内存数组通常包括数组的大小&#xff0c;delete可以知道需要调用多少个析构函数。 使用delete时使用了方…

Crow:run的流程4 准备接收http请求

完成tcp的accept后,下一步需要接收tcp的数据,同时完成http的分析 class Connection { public:void start(){adaptor_.start([this](const asio::error_code& ec) {if (!ec){start_deadline();parser_.clear();do_read();}else{CROW_LOG_ERROR << "Could not …

Java后端开发——Spring实验

文章目录 Java后端开发——Spring实验一、Spring入门1.创建项目&#xff0c;Spring依赖包。2.创建JavaBean&#xff1a;HelloSpring3.编写applicationContext.xml配置文件4.测试&#xff1a;启动Spring&#xff0c;获取Hello示例。 二、Spring基于XML装配实验1.创建JavaBean类&…

CSS 顶部位置翻转动画

<template><div class"container" mouseenter"startAnimation" mouseleave"stopAnimation"><!-- 旋方块 --><div class"box" :class"{ rotate-hor-top: isAnimating }"><!-- 元素内容 --><…

【快速全面掌握 WAMPServer】12.WAMPServer 故障排除经验大总结

网管小贾 / sysadm.cc 众所周知&#xff0c;搞开发需要先搭建相应的编程和调试环境。 对于 PHPer 来说&#xff0c;很多像我一样的新手小白们入门的时候&#xff0c;通常会选择一些集成开发环境包&#xff0c;其中就有 WampServer 。 集成环境包被许多人所诟病&#xff0c;说…

C++ 代码中如何使用互斥锁std::mutex和独占锁std::unique_lock

创建一个C线程需要传入几个参数&#xff1f; 如何理解和使用C线程循环 C 类 函数 变量 进程 线程 C关于锁和互斥量你真的理解了吗&#xff1f; 在这个例子中&#xff0c;我们将创建一个简单的类&#xff0c;该类包含一个共享数据成员和两个方法&#xff0c;这两个方法将通过互…

Node.js本地搭建简单页面小游戏

文章目录 前言1.安装Node.js环境2.创建node.js服务3. 访问node.js 服务4.内网穿透4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5.固定公网地址 前言 Node.js 是能够在服务器端运行 JavaScript 的开放源代码、跨平台运行环境。Node.js 由 OpenJS Foundation&#xff0…

后台管理项目的多数据源方案

引言 在互联网开发公司中&#xff0c;往往伴随着业务的快速迭代&#xff0c;程序员可能没有过多的时间去思考技术扩展的相关问题&#xff0c;长久下来导致技术过于单一。为此最近在学习互联网思维&#xff0c;从相对简单的功能开始做总结&#xff0c;比如非常常见的基础数据的…

第二百四十三回 再分享一个Json工具

文章目录 1. 概念介绍2. 分析与比较2.1 分析问题2.2 比较差异 3. 使用方法4. 内容总结 我们在上一章回中介绍了"分享三个使用TextField的细节"相关的内容&#xff0c;本章回中将再 分享一个Json插件.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我…

案例087:基于微信小程序的社区养老服务平台设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

python | PYTHON正则表达式

操作符说明实例.表示任何单个字符[]字符集&#xff0c;对单个字符给出取值范围[abc]表示a、b、c&#xff0c;[a-z]表示a到z单个字符[^ ]非字符集&#xff0c;对单个字符给出排除范围[^abc]表示非a或b或c的单个字符*前一个字符0次或无限次扩充abc* 表示ab&#xff0c;abc&#x…

阿里云免费证书SSL三个月的解决方法

阿里云免费SSL证书签发有效期从12个月缩短至3个月&#xff1a;尊敬的用户&#xff0c;根据供应商变更要求&#xff0c;免费证书&#xff08;默认证书&#xff09;的签发有效期将由12个月缩短至3个月。 免费证书&#xff08;升级证书&#xff09;的有效期不会改变。 没错&#…

Linux iptables实现(SNAT)源地址转换

实验要求一&#xff08;实验要求SNAT:内网主机访问外网主机&#xff0c;通过iptables进行源地址转换&#xff0c;允许访问外网的httpd和ping&#xff09; 1、开启防火墙转发功能&#xff08;两个方法二选一即可&#xff09; 方法一&#xff1a; [rootiptabels ~]#echo net.ipv…

Java 17 中的 Switch 表达式模式匹配与记录类型

Switch 表达式模式匹配 在 Java 17 中&#xff0c;switch 表达式得到了增强&#xff0c;引入了模式匹配&#xff0c;使得代码编写更加简洁。以下是一个简单的例子&#xff1a; package com.lfsun.newswitch;import static com.lfsun.newswitch.ShapeExample.ShapeType.CIRCLE…

小秋SLAM入门实战C++所有文章汇总

文章目录 线程和锁用法 线程和锁用法 C中互斥量、锁有什么用&#xff1f; 创建一个C线程需要传入几个参数&#xff1f; 如何理解和使用C线程循环 C 类 函数 变量 进程 线程 C关于锁和互斥量你真的理解了吗 C 代码中如何使用互斥锁std::mutex和独占锁std::unique_lock 如何更好…

自学路上的绊脚石---没有方向

现在我描述一个目前碰到的问题点&#xff0c;比较困扰我 我觉得我现在的事情特别多&#xff0c; 1.整理十套源码&#xff0c;然后看看能不能买卖看 2.完成自己的博客系统&#xff0c;使用之前的新经资讯的模板&#xff0c;这样才能够融汇贯通 3.继续将爬虫的课程学完&#x…

polar CTF 简单rce

一、题目 <?php /*PolarD&N CTF*/ highlight_file(__FILE__); function no($txt){if(!preg_match("/cat|more|less|head|tac|tail|nl|od|vim|uniq|system|proc_open|shell_exec|popen| /i", $txt)){return $txt;}else{ die("whats up");}} $yyds(…

B端产品经理学习-B端产品系统调研的工具

系统性调研目标的工具 系统性调研的目标 相对于背景调研&#xff0c;系统行调研是对公司可控因素&#xff08;公司内部&#xff09;和直接作用力&#xff08;消费者、竞争者&#xff09;进行的调研。系统性调研需要输出结论&#xff0c;为达成产品或公司的战略目标而制定行动的…