Vue事件委托-跨域请求

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/marko_zheng/article/details/80852501

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