vue - Vue中的ajax

10發表於2022-05-09
Vue

只有在ajax才能找回一點點主場了，vue中的ajax一天整完，內容還行，主要是對axios的運用。
明天按理說要開始vuex了，這個從來都是隻耳聞沒有眼見過，明天來看看看看是個什麼神奇的東西。

一. 解決開發環境ajax跨域問題

1.配置代理（方法一）

首先我們能發起ajax請求的，xhr原生不推薦、jQuery也不封裝得有但是也不推薦，因為要操作DOM，然後就是axios，它的體積比jQuery而且他是專門處理資料請求的，他還是promise風格的，jq和axios都是基於xhr來封裝的，如果沒有了xhr他們就沒有了，但是這個fetch是跟xhr同級的也是原生的，不基於xhr，而且也是promise風格的，他的問題是相容性差

image-20220509121202018

開啟兩個本地的node伺服器，通過axios來獲取資料，先下載axios並匯入，注意一下，axios的使用，呼叫get、post以及ajax綜合請求等，還有後面then回撥會有返回成功或者失敗的函式

image-20220509121911720

image-20220509121939489

果不其然，當我們點選直接就跨域了，我們解決跨域一般三種方法，

cors是配置在後端node裡面的，但是它的缺點就是，不能隨便使用響應頭，要配置本公司內容能請求的響應頭，不然用它預設的是個人都可以請求我們伺服器的資料了

然後jsonp就不用說了，雖然可以配置在前端，但是隻限於get，侷限性太大了

最後還剩下一種，以前沒有學過的-代理，它的原理是這樣的，在前端和伺服器之間來一箇中間代理伺服器，保持跟前端一樣的協議埠號等，這樣一來前端從代理伺服器請求發起資源都沒問題了，為什麼代理伺服器和伺服器不一樣卻可以互相拿資源？因為同源策略使我們瀏覽器的策略，伺服器之間沒得這種協議，隨便訪問

image-20220509141743702

我們這裡通過vue-cli來開啟代理伺服器，通過配置vue.config.js也就是前面說過的，vue-cli的配置檔案，所以需要在vue-cli官網的配置參考找到 devServer.proxy,直接拿過來配置即可，這裡要注意，這個地址是寫的你要請求的api伺服器地址，而且不用寫具體下面哪個路徑，寫到埠號就夠了，因為它是自動代理伺服器的埠號為我們vue-cli伺服器的埠號

image-20220509142441273

還有最後一步別忘記改了，在我們axios請求那裡將請求的伺服器改為代理伺服器其實也相當於就是自己的vue-cli這個伺服器，以為他們兩個是一樣的，同時你可以理解為代理伺服器現在有了api伺服器的資源，所以真正要請求的路徑在這裡填寫

image-20220509143917223

但是這個方法有兩個問題

  • 一個是我們轉發的伺服器只能設定一個，多個不行

    image-20220509145423034

  • 一個這個代理伺服器，如果本身伺服器身上有會預設去拿自身伺服器上的，什麼叫做自身伺服器上的，在我們public資料夾下面的都是8080伺服器埠上掛載的檔案

    image-20220509145619782

    那麼問題來了，我如果自己也有個student的檔案

    image-20220509145659961

    這個時候再去拿就是我們自己伺服器上的這個students的資源了

    image-20220509145747017

2.配置代理（方法二）

同樣是參照官網cli的devServer.proxy第二段程式碼，他那裡複製過來是這樣的，後面會增刪一些內容

image-20220509151032134

首先/api相當於給你掛字首了，但是隻是拿來繞開vue-cli的本地伺服器的查詢機制，我有字首就不是找你public下面的東西了，就算你也有students，也不關我的事，然後target就為我們的伺服器地址，下面ws表示支援websocket，changeOrigin表示控制請求頭中的host值（其實就是要不要撒謊的意思，為fasle，當我們代理伺服器訪問api伺服器，代理伺服器的埠號就為8080，如果為true，那麼他就會跟著api伺服器的埠號走，假裝告訴你我也是5000，以防有些api伺服器開啟限制，必須同埠號的伺服器才能訪問），後面這兩個配置不寫也預設為true，當然這樣還沒完，還有一個關鍵配置，cli官網沒給我們寫出來，要配置一個pathRewrite的屬性，值為一個物件，裡面內容表示把以什麼字首開頭的這個欄位轉換為空字串，為什麼要這麼做，因為我剛才說的，我們新增這個字首只是為了繞過前端這一塊，解決那個本地伺服器和api伺服器都有相同的資源，會先去找本地伺服器的情況，如果進入api伺服器還去找這麼一個地址，那他下面根本沒得我們的heymar字首，所以就會報錯，需要注意的是這裡的正則並不需要字面量來包裹，直接引號包起就可以了

image-20220509152353067

然後記得將我們的axios的請求新增字首

image-20220509152419562

這個時候就算我們public下面有同名的檔案，也不會訪問到他了

如果我們有多個伺服器，直接接著配置在下面即可

image-20220509152812529

二.github使用者搜尋案例

搜尋關鍵字可以把github的使用者名稱字及頭像顯示出來

image-20220509153830053

元件化程式設計先拆元件，搜尋為一個元件search，下面列表展示為一個組價list,我們這裡引入了bootstrap.css,引入這些外部的檔案有兩種方式，一種是在我們src下面建立一個資料夾，assets專門來放這些，通過import引入

image-20220509155159635

可以看到用這種方式引入，頁面編譯報錯了，找不到這些字型檔案，因為我就單純引入了一個bootstrap.css也用不到這些字型檔案，這裡就要說到import的規則了，import匯入是嚴格匯入，他會去找你這個檔案所有的依賴都要準備完畢才會給你編譯成功，所以這裡我們還有第二個方法，在public下面建立一個css資料夾，然後通過index.html我們link方式來匯入，link就不會給你檢查這麼多了，這裡也要尊重他的一個語法規則，前面要新增上一些引數

image-20220509155535339

依照前面的思想，靜態頁面建立完畢，元件劃分好後，第二步應該開始建立動態資料了，在這個案例，input輸入的值是我們的資料，list每一個展示出來的使用者資訊是我們的資料，先把input的值搞好，用v-model繫結資料

image-20220509162007491

當我們點選就去傳送請求，通過關鍵字回來的引數再通過全域性事件匯流排將資料發給我們的list

image-20220509174944151

我們只要這三個資料，頭像地址，使用者github網址，使用者名稱字

image-20220509162751903

收到資料通過v-for渲染到頁面

image-20220509164007036

1.完善案例

我們整個案例list介面其實要分為四個介面才完善，搜尋出來的使用者列表只是其中一個，還有剛開始進來的歡迎介面，點選搜尋的loading介面，以及失敗後的錯誤介面，很明顯這裡要用條件渲染，寫上四個介面

image-20220509170203316

主要是他們的條件是什麼？結合前面的案例，一般條件渲染要控制幾個頁面的顯示隱藏，至少都得有一個開關也就是變數，來判斷他該顯示還是隱藏，那麼這裡應該有四個開關，來表示四種不同的介面，首先welcome這個介面簡單，一上來就為true，當我們點選搜尋就將loading改為true，直到獲取到請求，將它改為false，將使用者列表的頁面改為true也可以，但為了保險起見最好改為userInfo的長度，要有長度才是真正的得到資料了，錯誤資訊這裡一直都是false，知道進入錯誤的回撥才為true

image-20220509171115352

由於我們要一點選就將wel改為false，將loading改為true，所以需要將資料傳到search這個介面，一旦點選就會觸發這個自定義時間，會傳送過來一個物件資料

image-20220509175245075

list接受這邊，為了能夠直接賦值最好也將剛才定義的資料都裝到一個物件裡面去，接收到search傳過來的物件就可以直接賦值，這樣的好處不僅是方便，而且傳過來的資料也語義化一點，不然就只能是傳過來true，false等，我這邊讓每一個值等於這些值

image-20220509175435934

一直到我們獲取到資料，又傳過來一個新的物件，重新賦值新的物件

image-20220509175510681

image-20220509175523364

這裡有一個小注意點：因為我們的wel介面是一重新整理就有，後面不可能再出現了，所以後面傳過來的資料都不帶wel這個引數的，你又以物件賦的值，所以只會導致一種情況

image-20220509175802082

image-20220509175818321

結構被改了，這裡可以用到，es6的擴充套件運算子，主要是把這個要用起來，用處還是蠻多的

image-20220509180055603

三.vue 專案中常用的 2 個 Ajax 庫

1.axios

2.vue-resource（瞭解）

是比較老的一個ajax請求庫，除了xhr、jq、axios、fetch後有多出了一個，它是vue的一個 外掛庫，所以說要在入口檔案匯入並註冊

image-20220509180932294

前面也說過，只要外掛一註冊，那麼下面的vm、vc都可以使用了，使用$http即可，使用方法跟axios一模一樣，就連返回值都一樣，也是promise風格

image-20220509181243711

四.slot插槽

可以讓父元件向子元件指定位置插入html結構

1.無插槽

image-20220509182216442

要完成這樣一個介面，是不是得把其中一個拿來作為元件後面的直接複用即可

這裡傳值有一個注意點，因為我們每個元件標籤都是一個元件收到的資料也是不一樣的，所以可以取一樣的名字，到時候遍歷出來各是各的

image-20220509183509574

props接收資料，渲染即可

image-20220509183906863

2.預設插槽

現在更新需求，我們有兩個廣告商美食這邊只放他的圖片，電影這邊只放他的電影

image-20220509184713940

這個時候就要用到插槽了，以前從沒有在元件標籤裡面寫過標籤體吧，插槽就是要在這裡面寫

image-20220509184932068

先不要管其他的，如果在組建標籤裡面寫了標籤體，還需要一個關鍵步驟，因為vue能夠解析你的標籤，但是他不知道放在哪裡，也就是放在list這個元件的哪裡，所以需要我們在元件模板裡面用一個標籤 slot來佔位

image-20220509185128476

這就是我們的slot插槽，但是由於元件裡面的內容改動，後面也不能直接傳資料進去了，也要把對應的位置內容提到元件標籤這裡來寫

image-20220509185806192

注意當我們slot部分沒有內容傳進來的時候，slot標籤裡面的內容就是預設值

image-20220509190009540

3.具名插槽

就是具有名字的插槽，我們上面是一個插槽，可能不需要名字，但是如果有多個插槽，要插往不同的地方呢

首先給slot新增name屬性

image-20220509190648475

然後在我們標籤體這邊，誰要往哪個插槽新增資訊，就把他的 slot屬性寫為誰

image-20220509190748381

注意

當我想把一大段程式碼加入到一個slot插槽，但是我又不能一個一個去寫，就有點耗時間了，可以將他們都包在一個div裡面然後給div洗衣歌slot，但是這樣就影響頁面佈局了，我們也可以寫一個template標籤包在這裡面就不會影響佈局了

image-20220509191914243

如果用到了template，那麼vue2.6很新的的一個更新，template可以這樣來寫slot名字，鍵值對，而且沒有引號

image-20220509191852149

這個寫法只能應用於template標籤

4.作用域插槽

什麼時候要用到這個作用域插槽

資料在元件的自身，但根據資料生成的資料結構需要組建的使用者來決定

就是資料沒有在我們的插槽的使用者這裡，什麼叫做插槽的使用者，就是我們slot不是等著標籤來填充嗎，誰來填充這個插槽誰就是使用者，就比如說上面這個案例，這個template就是插槽的使用者

我把資料轉移到list裡面去，那麼app裡面定義的這些games，這些list標籤也就是插槽的使用者都用不到資料了，資料轉移到list裡面去了，現在的情況就很像作用域發生了變化，list這個作用域裡面可以使用games，但是插槽使用者在app裡面就用不到，這個時候就要用到作用域插槽了

image-20220509194439682

怎麼來用，首先要知道一句話，插槽的動態繫結，是把這個資料送到他的使用者，注意是使用者，並不是平時這樣是送到下級

image-20220509194752571

我們使用者這邊怎麼來接受這個引數呢？必須使用template標籤，並且裡面寫一個屬性scope沒有d，他的值隨便取，就是一個物件，這裡麵包含了slot傳過來的所有資料，如果就傳過來了一個data那就是值.data就可以取到

image-20220509195043429
------------恢復內容開始------------
只有在ajax才能找回一點點主場了，vue中的ajax一天整完，內容還行，主要是對axios的運用。
明天按理說要開始vuex了，這個從來都是隻耳聞沒有眼見過，明天來看看看看是個什麼神奇的東西。

一. 解決開發環境ajax跨域問題

1.配置代理（方法一）

首先我們能發起ajax請求的，xhr原生不推薦、jQuery也不封裝得有但是也不推薦，因為要操作DOM，然後就是axios，它的體積比jQuery而且他是專門處理資料請求的，他還是promise風格的，jq和axios都是基於xhr來封裝的，如果沒有了xhr他們就沒有了，但是這個fetch是跟xhr同級的也是原生的，不基於xhr，而且也是promise風格的，他的問題是相容性差

image-20220509121202018

開啟兩個本地的node伺服器，通過axios來獲取資料，先下載axios並匯入，注意一下，axios的使用，呼叫get、post以及ajax綜合請求等，還有後面then回撥會有返回成功或者失敗的函式

image-20220509121911720

image-20220509121939489

果不其然，當我們點選直接就跨域了，我們解決跨域一般三種方法，

cors是配置在後端node裡面的，但是它的缺點就是，不能隨便使用響應頭，要配置本公司內容能請求的響應頭，不然用它預設的是個人都可以請求我們伺服器的資料了

然後jsonp就不用說了，雖然可以配置在前端，但是隻限於get，侷限性太大了

最後還剩下一種，以前沒有學過的-代理，它的原理是這樣的，在前端和伺服器之間來一箇中間代理伺服器，保持跟前端一樣的協議埠號等，這樣一來前端從代理伺服器請求發起資源都沒問題了，為什麼代理伺服器和伺服器不一樣卻可以互相拿資源？因為同源策略使我們瀏覽器的策略，伺服器之間沒得這種協議，隨便訪問

image-20220509141743702

我們這裡通過vue-cli來開啟代理伺服器，通過配置vue.config.js也就是前面說過的，vue-cli的配置檔案，所以需要在vue-cli官網的配置參考找到 devServer.proxy,直接拿過來配置即可，這裡要注意，這個地址是寫的你要請求的api伺服器地址，而且不用寫具體下面哪個路徑，寫到埠號就夠了，因為它是自動代理伺服器的埠號為我們vue-cli伺服器的埠號

image-20220509142441273

還有最後一步別忘記改了，在我們axios請求那裡將請求的伺服器改為代理伺服器其實也相當於就是自己的vue-cli這個伺服器，以為他們兩個是一樣的，同時你可以理解為代理伺服器現在有了api伺服器的資源，所以真正要請求的路徑在這裡填寫

image-20220509143917223

但是這個方法有兩個問題

  • 一個是我們轉發的伺服器只能設定一個，多個不行

    image-20220509145423034

  • 一個這個代理伺服器，如果本身伺服器身上有會預設去拿自身伺服器上的，什麼叫做自身伺服器上的，在我們public資料夾下面的都是8080伺服器埠上掛載的檔案

    image-20220509145619782

    那麼問題來了，我如果自己也有個student的檔案

    image-20220509145659961

    這個時候再去拿就是我們自己伺服器上的這個students的資源了

    image-20220509145747017

2.配置代理（方法二）

同樣是參照官網cli的devServer.proxy第二段程式碼，他那裡複製過來是這樣的，後面會增刪一些內容

image-20220509151032134

首先/api相當於給你掛字首了，但是隻是拿來繞開vue-cli的本地伺服器的查詢機制，我有字首就不是找你public下面的東西了，就算你也有students，也不關我的事，然後target就為我們的伺服器地址，下面ws表示支援websocket，changeOrigin表示控制請求頭中的host值（其實就是要不要撒謊的意思，為fasle，當我們代理伺服器訪問api伺服器，代理伺服器的埠號就為8080，如果為true，那麼他就會跟著api伺服器的埠號走，假裝告訴你我也是5000，以防有些api伺服器開啟限制，必須同埠號的伺服器才能訪問），後面這兩個配置不寫也預設為true，當然這樣還沒完，還有一個關鍵配置，cli官網沒給我們寫出來，要配置一個pathRewrite的屬性，值為一個物件，裡面內容表示把以什麼字首開頭的這個欄位轉換為空字串，為什麼要這麼做，因為我剛才說的，我們新增這個字首只是為了繞過前端這一塊，解決那個本地伺服器和api伺服器都有相同的資源，會先去找本地伺服器的情況，如果進入api伺服器還去找這麼一個地址，那他下面根本沒得我們的heymar字首，所以就會報錯，需要注意的是這裡的正則並不需要字面量來包裹，直接引號包起就可以了

image-20220509152353067

然後記得將我們的axios的請求新增字首

image-20220509152419562

這個時候就算我們public下面有同名的檔案，也不會訪問到他了

如果我們有多個伺服器，直接接著配置在下面即可

image-20220509152812529

二.github使用者搜尋案例

搜尋關鍵字可以把github的使用者名稱字及頭像顯示出來

image-20220509153830053

元件化程式設計先拆元件，搜尋為一個元件search，下面列表展示為一個組價list,我們這裡引入了bootstrap.css,引入這些外部的檔案有兩種方式，一種是在我們src下面建立一個資料夾，assets專門來放這些，通過import引入

image-20220509155159635

可以看到用這種方式引入，頁面編譯報錯了，找不到這些字型檔案，因為我就單純引入了一個bootstrap.css也用不到這些字型檔案，這裡就要說到import的規則了，import匯入是嚴格匯入，他會去找你這個檔案所有的依賴都要準備完畢才會給你編譯成功，所以這裡我們還有第二個方法，在public下面建立一個css資料夾，然後通過index.html我們link方式來匯入，link就不會給你檢查這麼多了，這裡也要尊重他的一個語法規則，前面要新增上一些引數

image-20220509155535339

依照前面的思想，靜態頁面建立完畢，元件劃分好後，第二步應該開始建立動態資料了，在這個案例，input輸入的值是我們的資料，list每一個展示出來的使用者資訊是我們的資料，先把input的值搞好，用v-model繫結資料

image-20220509162007491

當我們點選就去傳送請求，通過關鍵字回來的引數再通過全域性事件匯流排將資料發給我們的list

image-20220509174944151

我們只要這三個資料，頭像地址，使用者github網址，使用者名稱字

image-20220509162751903

收到資料通過v-for渲染到頁面

image-20220509164007036

1.完善案例

我們整個案例list介面其實要分為四個介面才完善，搜尋出來的使用者列表只是其中一個，還有剛開始進來的歡迎介面，點選搜尋的loading介面，以及失敗後的錯誤介面，很明顯這裡要用條件渲染，寫上四個介面

image-20220509170203316

主要是他們的條件是什麼？結合前面的案例，一般條件渲染要控制幾個頁面的顯示隱藏，至少都得有一個開關也就是變數，來判斷他該顯示還是隱藏，那麼這裡應該有四個開關，來表示四種不同的介面，首先welcome這個介面簡單，一上來就為true，當我們點選搜尋就將loading改為true，直到獲取到請求，將它改為false，將使用者列表的頁面改為true也可以，但為了保險起見最好改為userInfo的長度，要有長度才是真正的得到資料了，錯誤資訊這裡一直都是false，知道進入錯誤的回撥才為true

image-20220509171115352

由於我們要一點選就將wel改為false，將loading改為true，所以需要將資料傳到search這個介面，一旦點選就會觸發這個自定義時間，會傳送過來一個物件資料

image-20220509175245075

list接受這邊，為了能夠直接賦值最好也將剛才定義的資料都裝到一個物件裡面去，接收到search傳過來的物件就可以直接賦值，這樣的好處不僅是方便，而且傳過來的資料也語義化一點，不然就只能是傳過來true，false等，我這邊讓每一個值等於這些值

image-20220509175435934

一直到我們獲取到資料，又傳過來一個新的物件，重新賦值新的物件

image-20220509175510681

image-20220509175523364

這裡有一個小注意點：因為我們的wel介面是一重新整理就有，後面不可能再出現了，所以後面傳過來的資料都不帶wel這個引數的，你又以物件賦的值，所以只會導致一種情況

image-20220509175802082

image-20220509175818321

結構被改了，這裡可以用到，es6的擴充套件運算子，主要是把這個要用起來，用處還是蠻多的

image-20220509180055603

三.vue 專案中常用的 2 個 Ajax 庫

1.axios

2.vue-resource（瞭解）

是比較老的一個ajax請求庫，除了xhr、jq、axios、fetch後有多出了一個，它是vue的一個 外掛庫，所以說要在入口檔案匯入並註冊

image-20220509180932294

前面也說過，只要外掛一註冊，那麼下面的vm、vc都可以使用了，使用$http即可，使用方法跟axios一模一樣，就連返回值都一樣，也是promise風格

image-20220509181243711

四.slot插槽

可以讓父元件向子元件指定位置插入html結構

1.無插槽

image-20220509182216442

要完成這樣一個介面，是不是得把其中一個拿來作為元件後面的直接複用即可

這裡傳值有一個注意點，因為我們每個元件標籤都是一個元件收到的資料也是不一樣的，所以可以取一樣的名字，到時候遍歷出來各是各的

image-20220509183509574

props接收資料，渲染即可

image-20220509183906863

2.預設插槽

現在更新需求，我們有兩個廣告商美食這邊只放他的圖片，電影這邊只放他的電影

image-20220509184713940

這個時候就要用到插槽了，以前從沒有在元件標籤裡面寫過標籤體吧，插槽就是要在這裡面寫

image-20220509184932068

先不要管其他的，如果在組建標籤裡面寫了標籤體，還需要一個關鍵步驟，因為vue能夠解析你的標籤，但是他不知道放在哪裡，也就是放在list這個元件的哪裡，所以需要我們在元件模板裡面用一個標籤 slot來佔位

image-20220509185128476

這就是我們的slot插槽，但是由於元件裡面的內容改動，後面也不能直接傳資料進去了，也要把對應的位置內容提到元件標籤這裡來寫

image-20220509185806192

注意當我們slot部分沒有內容傳進來的時候，slot標籤裡面的內容就是預設值

image-20220509190009540

3.具名插槽

就是具有名字的插槽，我們上面是一個插槽，可能不需要名字，但是如果有多個插槽，要插往不同的地方呢

首先給slot新增name屬性

image-20220509190648475

然後在我們標籤體這邊，誰要往哪個插槽新增資訊，就把他的 slot屬性寫為誰

image-20220509190748381

注意

當我想把一大段程式碼加入到一個slot插槽，但是我又不能一個一個去寫，就有點耗時間了，可以將他們都包在一個div裡面然後給div洗衣歌slot，但是這樣就影響頁面佈局了，我們也可以寫一個template標籤包在這裡面就不會影響佈局了

image-20220509191914243

如果用到了template，那麼vue2.6很新的的一個更新，template可以這樣來寫slot名字，鍵值對，而且沒有引號

image-20220509191852149

這個寫法只能應用於template標籤

4.作用域插槽

什麼時候要用到這個作用域插槽

資料在元件的自身，但根據資料生成的資料結構需要組建的使用者來決定

就是資料沒有在我們的插槽的使用者這裡，什麼叫做插槽的使用者，就是我們slot不是等著標籤來填充嗎，誰來填充這個插槽誰就是使用者，就比如說上面這個案例，這個template就是插槽的使用者

我把資料轉移到list裡面去，那麼app裡面定義的這些games，這些list標籤也就是插槽的使用者都用不到資料了，資料轉移到list裡面去了，現在的情況就很像作用域發生了變化，list這個作用域裡面可以使用games，但是插槽使用者在app裡面就用不到，這個時候就要用到作用域插槽了

image-20220509194439682

怎麼來用，首先要知道一句話，插槽的動態繫結，是把這個資料送到他的使用者，注意是使用者，並不是平時這樣是送到下級

image-20220509194752571

我們使用者這邊怎麼來接受這個引數呢？必須使用template標籤，並且裡面寫一個屬性scope沒有d，他的值隨便取，就是一個物件，這裡麵包含了slot傳過來的所有資料，如果就傳過來了一個data那就是值.data就可以取到

image-20220509195043429

------------恢復內容結束------------

相關文章