只有在ajax才能找回一點點主場了，vue中的ajax一天整完，內容還行，主要是對axios的運用，
明天按理說要開始vuex了，這個從來都是只耳聞沒有眼見過，明天來看看看看是個什么神奇的東西，
一. 解決開發環境ajax跨域問題
1.配置代理（方法一）
首先我們能發起ajax請求的，xhr原生不推薦、jQuery也不封裝得有但是也不推薦，因為要操作DOM，然后就是axios，它的體積比jQuery而且他是專門處理資料請求的，他還是promise風格的，jq和axios都是基于xhr來封裝的，如果沒有了xhr他們就沒有了，但是這個fetch是跟xhr同級的也是原生的，不基于xhr，而且也是promise風格的，他的問題是兼容性差
開啟兩個本地的node服務器，通過axios來獲取資料，先下載axios并匯入，注意一下，axios的使用，呼叫get、post以及ajax綜合請求等，還有后面then回呼會有回傳成功或者失敗的函式
果不其然，當我們點擊直接就跨域了，我們解決跨域一般三種方法，
cors是配置在后端node里面的，但是它的缺點就是，不能隨便使用回應頭，要配置本公司內容能請求的回應頭，不然用它默認的是個人都可以請求我們服務器的資料了
然后jsonp就不用說了，雖然可以配置在前端，但是只限于get，局限性太大了
最后還剩下一種，以前沒有學過的-代理，它的原理是這樣的，在前端和服務器之間來一個中間代理服務器，保持跟前端一樣的協議埠號等，這樣一來前端從代理服務器請求發起資源都沒問題了，為什么代理服務器和服務器不一樣卻可以互相拿資源？因為同源策略使我們瀏覽器的策略，服務器之間沒得這種協議，隨便訪問
我們這里通過vue-cli來開啟代理服務器，通過配置vue.config.js也就是前面說過的，vue-cli的組態檔，所以需要在vue-cli官網的配置參考找到 devServer.proxy,直接拿過來配置即可，這里要注意，這個地址是寫的你要請求的api服務器地址，而且不用寫具體下面哪個路徑，寫到埠號就夠了，因為它是自動代理服務器的埠號為我們vue-cli服務器的埠號
還有最后一步別忘記改了，在我們axios請求那里將請求的服務器改為代理服務器其實也相當于就是自己的vue-cli這個服務器，以為他們兩個是一樣的，同時你可以理解為代理服務器現在有了api服務器的資源，所以真正要請求的路徑在這里填寫
但是這個方法有兩個問題
-
一個是我們轉發的服務器只能設定一個，多個不行
-
一個這個代理服務器，如果本身服務器身上有會默認去拿自身服務器上的，什么叫做自身服務器上的，在我們public檔案夾下面的都是8080服務器埠上掛載的檔案
那么問題來了，我如果自己也有個student的檔案
這個時候再去拿就是我們自己服務器上的這個students的資源了
2.配置代理（方法二）
同樣是參照官網cli的devServer.proxy第二段代碼，他那里復制過來是這樣的，后面會增刪一些內容
首先/api相當于給你掛前綴了，但是只是拿來繞開vue-cli的本地服務器的查找機制，我有前綴就不是找你public下面的東西了，就算你也有students，也不關我的事，然后target就為我們的服務器地址，下面ws表示支持websocket，changeOrigin表示控制請求頭中的host值（其實就是要不要撒謊的意思，為fasle，當我們代理服務器訪問api服務器，代理服務器的埠號就為8080，如果為true，那么他就會跟著api服務器的埠號走，假裝告訴你我也是5000，以防有些api服務器開啟限制，必須同埠號的服務器才能訪問），后面這兩個配置不寫也默認為true，當然這樣還沒完，還有一個關鍵配置，cli官網沒給我們寫出來，要配置一個pathRewrite的屬性，值為一個物件，里面內容表示把以什么前綴開頭的這個欄位轉換為空字串，為什么要這么做，因為我剛才說的，我們添加這個前綴只是為了繞過前端這一塊，解決那個本地服務器和api服務器都有相同的資源，會先去找本地服務器的情況，如果進入api服務器還去找這么一個地址，那他下面根本沒得我們的heymar前綴，所以就會報錯，需要注意的是這里的正則并不需要字面量來包裹，直接引號包起就可以了
然后記得將我們的axios的請求添加前綴
這個時候就算我們public下面有同名的檔案，也不會訪問到他了
如果我們有多個服務器，直接接著配置在下面即可
二.github用戶搜索案例
搜索關鍵字可以把github的用戶名字及頭像顯示出來
組件化編程先拆組件，搜索為一個組件search，下面串列展示為一個組價list,我們這里引入了bootstrap.css,引入這些外部的檔案有兩種方式，一種是在我們src下面創建一個檔案夾，assets專門來放這些，通過import引入
可以看到用這種方式引入，頁面編譯報錯了，找不到這些字體檔案，因為我就單純引入了一個bootstrap.css也用不到這些字體檔案，這里就要說到import的規則了，import匯入是嚴格匯入，他會去找你這個檔案所有的依賴都要準備完畢才會給你編譯成功，所以這里我們還有第二個方法，在public下面創建一個css檔案夾，然后通過index.html我們link方式來匯入，link就不會給你檢查這么多了，這里也要尊重他的一個語法規則，前面要添加上一些引數
依照前面的思想，靜態頁面創建完畢，組件劃分好后，第二步應該開始創建動態資料了，在這個案例，input輸入的值是我們的資料，list每一個展示出來的用戶資訊是我們的資料，先把input的值搞好，用v-model系結資料
當我們點擊就去發送請求，通過關鍵字回來的引數再通過全域事件總線將資料發給我們的list
我們只要這三個資料，頭像地址，用戶github網址，用戶名字
收到資料通過v-for渲染到頁面
1.完善案例
我們整個案例list界面其實要分為四個界面才完善，搜索出來的用戶串列只是其中一個，還有剛開始進來的歡迎界面，點擊搜索的loading界面，以及失敗后的錯誤界面，很明顯這里要用條件渲染，寫上四個界面
主要是他們的條件是什么？結合前面的案例，一般條件渲染要控制幾個頁面的顯示隱藏，至少都得有一個開關也就是變數，來判斷他該顯示還是隱藏，那么這里應該有四個開關，來表示四種不同的界面，首先welcome這個界面簡單，一上來就為true，當我們點擊搜索就將loading改為true，直到獲取到請求，將它改為false，將用戶串列的頁面改為true也可以，但為了保險起見最好改為userInfo的長度，要有長度才是真正的得到資料了，錯誤資訊這里一直都是false，知道進入錯誤的回呼才為true
由于我們要一點擊就將wel改為false，將loading改為true，所以需要將資料傳到search這個界面，一旦點擊就會觸發這個自定義時間，會發送過來一個物件資料
list接受這邊，為了能夠直接賦值最好也將剛才定義的資料都裝到一個物件里面去，接收到search傳過來的物件就可以直接賦值，這樣的好處不僅是方便，而且傳過來的資料也語意化一點，不然就只能是傳過來true，false等，我這邊讓每一個值等于這些值
一直到我們獲取到資料，又傳過來一個新的物件，重新賦值新的物件
這里有一個小注意點：因為我們的wel界面是一重繪就有，后面不可能再出現了，所以后面傳過來的資料都不帶wel這個引數的，你又以物件賦的值，所以只會導致一種情況
結構被改了，這里可以用到，es6的擴展運算子，主要是把這個要用起來，用處還是蠻多的
三.vue 專案中常用的 2 個 Ajax 庫
1.axios
2.vue-resource（了解）
是比較老的一個ajax請求庫，除了xhr、jq、axios、fetch后有多出了一個，它是vue的一個 插件庫，所以說要在入口檔案匯入并注冊
前面也說過，只要插件一注冊，那么下面的vm、vc都可以使用了，使用$http即可，使用方法跟axios一模一樣，就連回傳值都一樣，也是promise風格
四.slot插槽
可以讓父組件向子組件指定位置插入html結構
1.無插槽
要完成這樣一個界面，是不是得把其中一個拿來作為組件后面的直接復用即可
這里傳值有一個注意點，因為我們每個組件標簽都是一個組件收到的資料也是不一樣的，所以可以取一樣的名字，到時候遍歷出來各是各的
props接收資料，渲染即可
2.默認插槽
現在更新需求，我們有兩個廣告商美食這邊只放他的圖片，電影這邊只放他的電影
這個時候就要用到插槽了，以前從沒有在組件標簽里面寫過標簽體吧，插槽就是要在這里面寫
先不要管其他的，如果在組建標簽里面寫了標簽體，還需要一個關鍵步驟，因為vue能夠決議你的標簽，但是他不知道放在哪里，也就是放在list這個組件的哪里，所以需要我們在組件模板里面用一個標簽 slot來占位
這就是我們的slot插槽，但是由于組件里面的內容改動，后面也不能直接傳資料進去了，也要把對應的位置內容提到組件標簽這里來寫
注意當我們slot部分沒有內容傳進來的時候，slot標簽里面的內容就是默認值
3.具名插槽
就是具有名字的插槽，我們上面是一個插槽，可能不需要名字，但是如果有多個插槽，要插往不同的地方呢
首先給slot添加name屬性
然后在我們標簽體這邊，誰要往哪個插槽添加資訊，就把他的 slot屬性寫為誰
注意
當我想把一大段代碼加入到一個slot插槽，但是我又不能一個一個去寫，就有點耗時間了，可以將他們都包在一個div里面然后給div洗衣歌slot，但是這樣就影響頁面布局了，我們也可以寫一個template標簽包在這里面就不會影響布局了
如果用到了template，那么vue2.6很新的的一個更新，template可以這樣來寫slot名字，鍵值對，而且沒有引號
這個寫法只能應用于template標簽
4.作用域插槽
什么時候要用到這個作用域插槽
資料在組件的自身，但根據資料生成的資料結構需要組建的使用者來決定
就是資料沒有在我們的插槽的使用者這里，什么叫做插槽的使用者，就是我們slot不是等著標簽來填充嗎，誰來填充這個插槽誰就是使用者，就比如說上面這個案例，這個template就是插槽的使用者
我把資料轉移到list里面去，那么app里面定義的這些games，這些list標簽也就是插槽的使用者都用不到資料了，資料轉移到list里面去了，現在的情況就很像作用域發生了變化，list這個作用域里面可以使用games，但是插槽使用者在app里面就用不到，這個時候就要用到作用域插槽了
怎么來用，首先要知道一句話，插槽的動態系結，是把這個資料送到他的使用者，注意是使用者，并不是平時這樣是送到下級
我們使用者這邊怎么來接受這個引數呢？必須使用template標簽，并且里面寫一個屬性scope沒有d，他的值隨便取，就是一個物件，這里面包含了slot傳過來的所有資料，如果就傳過來了一個data那就是值.data就可以取到
------------恢復內容開始------------
只有在ajax才能找回一點點主場了，vue中的ajax一天整完，內容還行，主要是對axios的運用，
明天按理說要開始vuex了，這個從來都是只耳聞沒有眼見過，明天來看看看看是個什么神奇的東西，
一. 解決開發環境ajax跨域問題
1.配置代理（方法一）
首先我們能發起ajax請求的，xhr原生不推薦、jQuery也不封裝得有但是也不推薦，因為要操作DOM，然后就是axios，它的體積比jQuery而且他是專門處理資料請求的，他還是promise風格的，jq和axios都是基于xhr來封裝的，如果沒有了xhr他們就沒有了，但是這個fetch是跟xhr同級的也是原生的，不基于xhr，而且也是promise風格的，他的問題是兼容性差
開啟兩個本地的node服務器，通過axios來獲取資料，先下載axios并匯入，注意一下，axios的使用，呼叫get、post以及ajax綜合請求等，還有后面then回呼會有回傳成功或者失敗的函式
果不其然，當我們點擊直接就跨域了，我們解決跨域一般三種方法，
cors是配置在后端node里面的，但是它的缺點就是，不能隨便使用回應頭，要配置本公司內容能請求的回應頭，不然用它默認的是個人都可以請求我們服務器的資料了
然后jsonp就不用說了，雖然可以配置在前端，但是只限于get，局限性太大了
最后還剩下一種，以前沒有學過的-代理，它的原理是這樣的，在前端和服務器之間來一個中間代理服務器，保持跟前端一樣的協議埠號等，這樣一來前端從代理服務器請求發起資源都沒問題了，為什么代理服務器和服務器不一樣卻可以互相拿資源？因為同源策略使我們瀏覽器的策略，服務器之間沒得這種協議，隨便訪問
我們這里通過vue-cli來開啟代理服務器，通過配置vue.config.js也就是前面說過的，vue-cli的組態檔，所以需要在vue-cli官網的配置參考找到 devServer.proxy,直接拿過來配置即可，這里要注意，這個地址是寫的你要請求的api服務器地址，而且不用寫具體下面哪個路徑，寫到埠號就夠了，因為它是自動代理服務器的埠號為我們vue-cli服務器的埠號
還有最后一步別忘記改了，在我們axios請求那里將請求的服務器改為代理服務器其實也相當于就是自己的vue-cli這個服務器，以為他們兩個是一樣的，同時你可以理解為代理服務器現在有了api服務器的資源，所以真正要請求的路徑在這里填寫
但是這個方法有兩個問題
-
一個是我們轉發的服務器只能設定一個，多個不行
-
一個這個代理服務器，如果本身服務器身上有會默認去拿自身服務器上的，什么叫做自身服務器上的，在我們public檔案夾下面的都是8080服務器埠上掛載的檔案
那么問題來了，我如果自己也有個student的檔案
這個時候再去拿就是我們自己服務器上的這個students的資源了
2.配置代理（方法二）
同樣是參照官網cli的devServer.proxy第二段代碼，他那里復制過來是這樣的，后面會增刪一些內容
首先/api相當于給你掛前綴了，但是只是拿來繞開vue-cli的本地服務器的查找機制，我有前綴就不是找你public下面的東西了，就算你也有students，也不關我的事，然后target就為我們的服務器地址，下面ws表示支持websocket，changeOrigin表示控制請求頭中的host值（其實就是要不要撒謊的意思，為fasle，當我們代理服務器訪問api服務器，代理服務器的埠號就為8080，如果為true，那么他就會跟著api服務器的埠號走，假裝告訴你我也是5000，以防有些api服務器開啟限制，必須同埠號的服務器才能訪問），后面這兩個配置不寫也默認為true，當然這樣還沒完，還有一個關鍵配置，cli官網沒給我們寫出來，要配置一個pathRewrite的屬性，值為一個物件，里面內容表示把以什么前綴開頭的這個欄位轉換為空字串，為什么要這么做，因為我剛才說的，我們添加這個前綴只是為了繞過前端這一塊，解決那個本地服務器和api服務器都有相同的資源，會先去找本地服務器的情況，如果進入api服務器還去找這么一個地址，那他下面根本沒得我們的heymar前綴，所以就會報錯，需要注意的是這里的正則并不需要字面量來包裹，直接引號包起就可以了
然后記得將我們的axios的請求添加前綴
這個時候就算我們public下面有同名的檔案，也不會訪問到他了
如果我們有多個服務器，直接接著配置在下面即可
二.github用戶搜索案例
搜索關鍵字可以把github的用戶名字及頭像顯示出來
組件化編程先拆組件，搜索為一個組件search，下面串列展示為一個組價list,我們這里引入了bootstrap.css,引入這些外部的檔案有兩種方式，一種是在我們src下面創建一個檔案夾，assets專門來放這些，通過import引入
可以看到用這種方式引入，頁面編譯報錯了，找不到這些字體檔案，因為我就單純引入了一個bootstrap.css也用不到這些字體檔案，這里就要說到import的規則了，import匯入是嚴格匯入，他會去找你這個檔案所有的依賴都要準備完畢才會給你編譯成功，所以這里我們還有第二個方法，在public下面創建一個css檔案夾，然后通過index.html我們link方式來匯入，link就不會給你檢查這么多了，這里也要尊重他的一個語法規則，前面要添加上一些引數
依照前面的思想，靜態頁面創建完畢，組件劃分好后，第二步應該開始創建動態資料了，在這個案例，input輸入的值是我們的資料，list每一個展示出來的用戶資訊是我們的資料，先把input的值搞好，用v-model系結資料
當我們點擊就去發送請求，通過關鍵字回來的引數再通過全域事件總線將資料發給我們的list
我們只要這三個資料，頭像地址，用戶github網址，用戶名字
收到資料通過v-for渲染到頁面
1.完善案例
我們整個案例list界面其實要分為四個界面才完善，搜索出來的用戶串列只是其中一個，還有剛開始進來的歡迎界面，點擊搜索的loading界面，以及失敗后的錯誤界面，很明顯這里要用條件渲染，寫上四個界面
主要是他們的條件是什么？結合前面的案例，一般條件渲染要控制幾個頁面的顯示隱藏，至少都得有一個開關也就是變數，來判斷他該顯示還是隱藏，那么這里應該有四個開關，來表示四種不同的界面，首先welcome這個界面簡單，一上來就為true，當我們點擊搜索就將loading改為true，直到獲取到請求，將它改為false，將用戶串列的頁面改為true也可以，但為了保險起見最好改為userInfo的長度，要有長度才是真正的得到資料了，錯誤資訊這里一直都是false，知道進入錯誤的回呼才為true
由于我們要一點擊就將wel改為false，將loading改為true，所以需要將資料傳到search這個界面，一旦點擊就會觸發這個自定義時間，會發送過來一個物件資料
list接受這邊，為了能夠直接賦值最好也將剛才定義的資料都裝到一個物件里面去，接收到search傳過來的物件就可以直接賦值，這樣的好處不僅是方便，而且傳過來的資料也語意化一點，不然就只能是傳過來true，false等，我這邊讓每一個值等于這些值
一直到我們獲取到資料，又傳過來一個新的物件，重新賦值新的物件
這里有一個小注意點：因為我們的wel界面是一重繪就有，后面不可能再出現了，所以后面傳過來的資料都不帶wel這個引數的，你又以物件賦的值，所以只會導致一種情況
結構被改了，這里可以用到，es6的擴展運算子，主要是把這個要用起來，用處還是蠻多的
三.vue 專案中常用的 2 個 Ajax 庫
1.axios
2.vue-resource（了解）
是比較老的一個ajax請求庫，除了xhr、jq、axios、fetch后有多出了一個，它是vue的一個 插件庫，所以說要在入口檔案匯入并注冊
前面也說過，只要插件一注冊，那么下面的vm、vc都可以使用了，使用$http即可，使用方法跟axios一模一樣，就連回傳值都一樣，也是promise風格
四.slot插槽
可以讓父組件向子組件指定位置插入html結構
1.無插槽
要完成這樣一個界面，是不是得把其中一個拿來作為組件后面的直接復用即可
這里傳值有一個注意點，因為我們每個組件標簽都是一個組件收到的資料也是不一樣的，所以可以取一樣的名字，到時候遍歷出來各是各的
props接收資料，渲染即可
2.默認插槽
現在更新需求，我們有兩個廣告商美食這邊只放他的圖片，電影這邊只放他的電影
這個時候就要用到插槽了，以前從沒有在組件標簽里面寫過標簽體吧，插槽就是要在這里面寫
先不要管其他的，如果在組建標簽里面寫了標簽體，還需要一個關鍵步驟，因為vue能夠決議你的標簽，但是他不知道放在哪里，也就是放在list這個組件的哪里，所以需要我們在組件模板里面用一個標簽 slot來占位
這就是我們的slot插槽，但是由于組件里面的內容改動，后面也不能直接傳資料進去了，也要把對應的位置內容提到組件標簽這里來寫
注意當我們slot部分沒有內容傳進來的時候，slot標簽里面的內容就是默認值
3.具名插槽
就是具有名字的插槽，我們上面是一個插槽，可能不需要名字，但是如果有多個插槽，要插往不同的地方呢
首先給slot添加name屬性
然后在我們標簽體這邊，誰要往哪個插槽添加資訊，就把他的 slot屬性寫為誰
注意
當我想把一大段代碼加入到一個slot插槽，但是我又不能一個一個去寫，就有點耗時間了，可以將他們都包在一個div里面然后給div洗衣歌slot，但是這樣就影響頁面布局了，我們也可以寫一個template標簽包在這里面就不會影響布局了
如果用到了template，那么vue2.6很新的的一個更新，template可以這樣來寫slot名字，鍵值對，而且沒有引號
這個寫法只能應用于template標簽
4.作用域插槽
什么時候要用到這個作用域插槽
資料在組件的自身，但根據資料生成的資料結構需要組建的使用者來決定
就是資料沒有在我們的插槽的使用者這里，什么叫做插槽的使用者，就是我們slot不是等著標簽來填充嗎，誰來填充這個插槽誰就是使用者，就比如說上面這個案例，這個template就是插槽的使用者
我把資料轉移到list里面去，那么app里面定義的這些games，這些list標簽也就是插槽的使用者都用不到資料了，資料轉移到list里面去了，現在的情況就很像作用域發生了變化，list這個作用域里面可以使用games，但是插槽使用者在app里面就用不到，這個時候就要用到作用域插槽了
怎么來用，首先要知道一句話，插槽的動態系結，是把這個資料送到他的使用者，注意是使用者，并不是平時這樣是送到下級
我們使用者這邊怎么來接受這個引數呢？必須使用template標簽，并且里面寫一個屬性scope沒有d，他的值隨便取，就是一個物件，這里面包含了slot傳過來的所有資料，如果就傳過來了一個data那就是值.data就可以取到
------------恢復內容結束------------
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/471822.html
標籤：其他