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