學生資訊管理系統（第三天）技識訓總及問題解決-有解無憂

1. 關于 Vue.use() 理解

當我們要使用插件進行開發時, 我們常常在main.js 里面看到 Vue.use（插件名），如下圖： Vue.use(Echarts)
在這里插入圖片描述
但是為什么 axios 的引入不需要 Vue.use(axios)，而是直接參考即可

解釋：簡單來說就是 Echarts，Element 插件里都是依賴于 Vue，所以全域定義是需要 Vue.use（），而 axios 是一個一個基于 Promise 的 HTTP 庫，它并不依賴于 Vue，所以引入時不需要 Vue.use

在這里插入圖片描述

2. 關于 Vue 如何引入天氣組件方法

中國天氣網： https://cj.weather.com.cn/plugin/standard
Vue 中的使用：
1. 首先我們進入中國天氣網選擇自己喜歡的天氣樣式，點擊生成一段代碼，根據需要設定天氣樣式
2. Vue 專案中代碼撰寫：（新建一個 weather 組件）
3. 在需要使用天氣預報功能的地方，引入 Weather 組件即可，效果如下：

3. 前端布局神器 display: flex 詳細講解

這里直接跳轉至一位博主寫的文章，個人認為總結的很好：前端布局神器 display: flex，讀完此篇文章，能更深入的理解 display: flex 彈性布局的優點，

4. Jquery Ajax 解決跨域問題的缺點

jquery Ajax 解決跨域問題基礎代碼如下：

$.ajax({
    type:"get",    //請求方式
    async:true,    //是否異步
    url:"http://www.baidu.com/",
    dataType:"jsonp",//跨域json請求一定是jsonp
    data:{},    //請求引數
    beforeSend: function() {
        //請求前的處理
    },
    success: function(data) {
        //請求成功處理，和本地回呼完全一樣
    },
    complete: function() {
        //請求完成的處理
    },
    error: function() {
        //請求出錯處理
    }
});

由上述代碼可知：Jq 解決跨域問題的原理是使用 JSONP 格式資料進行請求，實作跨域請求

Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取資料，

基本原理：

瀏覽器端：
動態生成<script>來請求后臺提供資料的介面然后定義好用于接收回應資料的函式（fn），并將函式名通過請求引數提交給后臺（如 callback=fn）
服務器端：
接收到請求處理產生結果資料后，回傳一個函式呼叫的js代碼，并將結果資料作為實參傳入到回呼函式中，呼叫回呼函式
瀏覽器端：
收到回應自動執行函式呼叫的js代碼，即執行了提前定義好的回呼函式，便得到了所需要的結果資料

缺點：

只能解決GET型別的ajax跨域請求，其他型別的跨域請求并不能處理，即jsonp請求指示一般的get請求
jsonp跨域請求遠程介面時會出現SyntaxError: expected expression, got ‘<’ 錯誤， jsonp 對回應資料格式有要求，（本人在vue專案中引入Jq，實作跨域請求學校教務系統資料時出現此報錯，雖然跨域成功，但是導致請求以后的代碼無法再繼續運行，弄了幾個小時，也還是不行，棄坑）
由于jsonp存在安全性問題，惡意跨站請求，XSS攻擊

實在不建議使用 jsonp 解決跨域問題，真的差勁

5. axios與proxy反向代理配置，解決前端跨域問題

. Vue Cli 腳手架在之前2.x版本的時候可以通過修改config檔案夾下的config.js ,但是3.x版本的沒有這個檔案夾，就需要自己來新建了，在根目錄新建 vue.config.js 檔案

在這里插入圖片描述

vue.config.js 反向代理配置如下

注意事項 ①：不能再在main.js 中全域配置請求根路徑 axios.defaults.baseURL ，應在封裝 axios 請求的檔案中配置 axios.defaults.baseURL

注意事項②：配置完記得要（npm run serve）重啟專案，否則無效

效果展示：

6. Vue 如何深度監聽一個物件

大家都知道，Vue專案中對資料的監聽，提供了一個很好的鉤子watch，watch可以極其方便的監聽我們常用資料型別值的變化，但通常當我們想監聽一個物件中，某個屬性值的變化時，很難達到我們預期的效果，那么如何實作物件屬性的深度監聽呢？

利用 computed 配合 watch 實作單個屬性的深度監聽\

<template>
  <div>
    <ul>
      <li v-for="(item,key) in person">{{key}}---{{item}}</li>
    </ul>
    <Button @click='hadnleupdata'>修改名字</Button>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        person:{
          name:'xxw',
          age:19
        }
      }
    },
    methods:{
      hadnleupdata(){
        this.person.name='ly';
      }
    },
    computed:{
      name(){
        return this.person.name;
      }
    },
    watch:{
      name(newV,oldV){
        console.log('新name為：',newV)
      }
    }
  }
</script>

點擊進入測驗地點

7. vue中使用refs定位Dom節點出現undefined解決辦法

先看官方一張圖片：

在這里插入圖片描述

由圖可知： ref 只有等頁面加載完成好之后你才能呼叫 this.$refs ，如果你使用v-if 、v-for、v-show動態渲染頁面的話，那么在剛開始頁面沒渲染之前你是拿不到 this. $refs 的，所以要等到頁面渲染之后拿才可以，如果不是動態渲染頁面，則mounted 階段是可以拿到 this. $refs的，如下圖：
在這里插入圖片描述
那如果是v-if 、v-for、v-show動態渲染頁面，該如何獲取 this. $refs 呢？

如果說mounted階段是加載階段，那么updated階段則是完成了資料更新到DOM的階段( 對加載回來的資料進行處理 )，此時，ref、資料等等全部都掛載到DOM結構上去，在update階段使用this.$ refs.xxx ，就100%能找到該DOM節點，updated與mounted不同的是，在每一次的DOM結構更新，vue都會呼叫一次updated(){}鉤子函式！，而mounted僅僅只執行一次而已，簡單來說，只要在除錯的時候，能看到元素的存在，在updated階段都可以使用this.$refs.xxx找到對應的DOM節點

在這里插入圖片描述