Vue实现事件委托
今天有一个需求,在Vue中实现事件委托
代码如下
<template>
<div class="hello">
<div class="head">
<img :src="Logo" alt="幼品汇" class="logo">
<div class="search">搜索框</div>
</div>
<div class="NavMain" @click = "clicks">
<div class="index">首页</div>
<div class="eveir">环境创设</div>
<div class="eveir1">装备材料</div>
<div class="eveir0">教育培训</div>
<div class="eveir2">股权加盟</div>
<div class="eveir3">行业资讯</div>
</div>
</div>
</template>
现在的需求是当点击不同的子分类,获取到不同的类名,并进行相关的操作,经过查阅,使用target可以实现
js代码如下
export default {
name: 'HelloWorld',
data () {
return {
Logo:Logo,
}
},
methods:{
clicks(e){
let e0 = e || window.event;
var target = e0.target || e0.srcElement;
console.log(target.className);
}
}
}
实现了功能但是需要对Vue中的target进行了解
target时间属性可以返回事件的目标节点
Event对象代表事件的状态比如事件在其中发生的元素,键盘按键的状态,鼠标的位置,鼠标按钮的状态等
console.log(e.target)
会在浏览器输出 <div class="eveir3">行业资讯</div>
e.currentTarget指的是注册了事件监听器的对象,换句话说也就是父元素,而e.target指的是该对象里的子对象, 也就是真正触发事件的子元素
Vue的跨域配置
背景:前端页面的构建是基于vue-cli,所要请求的数据在后台,请求的模式是fetch
假设大家对fetch vue相关知识有所了解,不做多赘述。
问题1:vue-cli的跨域的配置(proxyTable)
文件位置:config/index.js
找到proxyTable,添加如下代码
//假设要请求的API放在http://xxxxxx.com/paeend/
proxyTable: {
//重写地址
'/ajax': {
target: 'http://xxxxxx.com/paeend/', //请求这个地址
changeOrigin: true,//是否跨域
pathRewrite: {
'^/ajax': //地址重写,将 /ajax替换成 ''
}
}
},
调用的时候在HelloWorld.vue中
<template>
<div class="hello" @click='pox'>
{{msg}}
</div>
</template>
<style scoped>
</style>
<script>
export default {
data(){
return{
msg:"HelloWorld"
}
},
methods:{
pox(){
fetch("/ajax/me",{ //me代表方法名由于配置过跨域 /ajax/me 会被重写成http://xxxxxx.com/paeend/me
method:"post", //请求类型
headers:{ //设置头信息
"content-type":"application/x-www-form-urlencoded"
},
data:{
id:1002
}
}).then(function(e){ //将返回的数据转化成json格式
return e.json()
}).then(function(e){
console.log(e)
})
}
}
}
</script>
问题2:由于同源策略的限制,服务器端禁止访问
错误信息如下
POST http://xxxxxx.com/paeend/me (Internal Server Error)
Failed to load http://xxxxxx.com/paeend/me: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8081' is therefore not allowed access. The response had HTTP status code 500.
该错误代表不被放行,同源策略禁止读取位于htt p://xxxxxx.com/paeend / me的远程资源
服务器端解决方案
在服务器端的filter或者servlet里面添加 response.setHeader(“Access-Control-Allow-Origin”, “*”)
代表允许所有来源进行跨域访问,这里也可以替换为特定的域名或ip
客户端解决方案
这种方案是使用jsonp,默认使用get发送请求,即使设置post也会被处理成get,涉及敏感信息的话是十分不安全的,个人意见,慎用,两种方案视情况而使用
$.ajax({
url:'http://xxxxxx.com/paeend/me'
dataType:"jsonp",
success:function(e){
console.log(e)
}
})
Vue中发起请求的方式
vue-source
使用步骤
| npm install vue-source --save
| 在main.js中引入 import vueSource from “vue-source”
| 在使用一下 , Vue.use(VueSource)
| 在相对应的组件中
this.$http.post("http://xxxxxx.com/paeend/me",{product_id:1002}).then(res => {
console.log(res.body);
},err => {
console.log(err)
})
axios
安装
npm install axios --save
注意:安装其他插件可以在main.js中Vue.use(xxx),但是axios并不能use
解决方案:修改原型链
具体做法
import axios from "axios";
Vue.prototype.$http = axios
使用
在对应的方法中
this.$http({
method: 'get',
url: '/user',
data: {
name: 'virus'
}
})
设置hosts文件,让127.0.0.1对应localhost
hosts是系统文件文件位置:C:\Windows\System32\drivers\etc\hosts
在最后添加127.0.0.1 localhost