公司无网站无平台怎么做外贸,网站新闻后台怎么做,高清无版权网站,网站建设购买信息订阅与发布 全局事件总线和信息订阅与发布一样都是实现任意组件的通信。常用的是全局事件总线 信息订阅与发布借用第三方库pubsub实现任意组件的通信 安装pubsub npm i pubsub-js 下列代码为MyHeader组件订阅了一份信息,MyFooter负责传递信息给MyHeader templatetemplatedivh2名字{{ name }}/h2h2地址{{ 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 templatedivh2名字{{ name }}/h2h2地址{{ address }}/h2button clicksendHeaderMag发送信息给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异步通信 templatediv idapprouter-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
