­

vue大型電商項目尚品彙（前台篇）day04

這幾天一直都在做項目，只是沒有上傳上來，即將把前台項目完結了。現在開始更新整個前台的部分

一.麵包屑處理

1.分類操作

點擊三級聯動進入搜索產生麵包屑，直接取參數中的name即可

image-20220522100925163

點擊x怎麼幹掉這個麵包屑，直接讓其v-if為這個name，如果點擊x就把name清空

image-20220522101112202

清空還沒完，清空應該再發一次請求，然後將我們裡面的殘留的id清空，回到默認頁面

image-20220522101353126

但其實這裡還有點小問題，我們是吧id清空了發了個請求，但其實既然沒有id，可以把他的制改為undefined，這樣直接發過去的請求就不帶id這些參數了，這樣發過去的請求也更快些

然後現在就需要上面url也跟著一起變了，直接在清空的函數裡面利用編程式跳轉往search跳一次即可，但是這裡要注意，因為我們現在只是完成帶過來的query清空，所以要判斷一下有沒有params參數，有的話跳轉的時候還要把這個參數帶上

image-20220522102030782

2.關鍵字操作

麵包屑其實就是一個是一個的，這裡要做關鍵字的麵包屑，就需要去添加一個li

image-20220522103605594

當然跟上面一樣當我們刪除，要去跳轉一次路由重新載入一下

image-20220522104028193

這裡的關鍵點在於當我們刪除關鍵字麵包屑過後，應該把搜索框裡面得關鍵字也幹掉，但是他是Header組件裡面的內容，屬於是兄弟關係，那就只有兩種辦法了，一個是vuex，一個是全局事件匯流排

回顧一下

image-20220522104517169

image-20220522104553914

image-20220522104714413

3.品牌資訊操作

品牌資訊在serach的子組件裡面，所以我們就需要點擊品牌資訊將他的資訊傳到父組件裡面，因為我們的麵包屑在父組件，而且我們的發送給伺服器的基礎數據也在父組件裡面，這裡子給父傳，最好的就是自定義事件，回顧一下

image-20220522121511083

直接用$emit發過來

image-20220522121807290

image-20220522121947119

注意怎麼讓對象屬性和值都動態

image-20220522122802446

麵包屑處理運用字元串轉數組的方法取名字

image-20220522123030413

4.售賣屬性操作

首先一樣的利用自定義事件將子組件點擊的屬性傳上來

image-20220522145322154

因為這個介面參數是一個數組，所以採用push方法放進去，在獲取一次請求

image-20220522145654701

下面要完成麵包屑的操作，這裡跟前面有所不同，前面都是只能為一個，但是這裡的麵包屑我點了一個還可以點一個，所以我們的li要進行遍歷，用這個參數數組來遍歷

image-20220522150328679

但是現在有個bug，就是一直點也一直在添加麵包屑，其原因是因為我們在往searchparams裡面添加參數的時候根本沒有做驗證，點一個添加一個，怎麼來做驗證，利用數組indexOf方法，點擊的時候先判斷裡面有無再去添加，注意數組也有indexOf方法

image-20220522151328244

然後是他的刪除操作，怎麼拿到你點的這個刪除的標識，然後去這個數組把她刪除掉，在調用一次請求即可，怎麼來拿？這裡可以通過index來拿，因為這裡我們是push正序添加，所以對數組的增刪用index來做是沒問題的 splice方法

image-20220522151810446

二.排序操作

1.前置問題

  • 問題一：排序的依據，查看介面文檔，只存在四種情況綜合和價格的升序和降序

    image-20220522162123233

  • 問題二：誰在排序，active這個class就會給到誰，所以他們的class需要動態綁定，條件為order的前面數字是1還是2

    image-20220522162411165

  • 問題三：上下箭頭圖標的問題，直接阿里巴巴在線引入，注意前面要添加https

    image-20220522162643509

那麼問題來了，怎麼讓我們的圖標能夠動態展示是升序還是降序，這裡還是靠order裡面第二個字元串來判斷

image-20220522163207593

這裡還有一個小點，我們的箭頭應該是隨著active一起出現的

image-20220522163511986

2.完成操作

要完成這個功能，首先要知道你點擊的是綜合還是價格，可以給他們一個共同的點擊事件，然後綜合點進來傳參1，價格點進來傳參2

image-20220522172116976

現在我就知道了你點的是什麼，在函數裡面把當前params裡面的參數存起的拿出來，和我們的參數作比較，如果相等，就去判斷你是desc還是asc取反值，如果不相等，那就把這個值改到params裡面同時默認為desc降序

image-20220522173730703

三.分頁器

1.分頁器靜態組件

可以發現我們分頁器多個組件用到，直接封裝全局組件

2.分頁功能分析

分頁展示需要知道什麼數據？

  • 當前是第幾頁（pageNo）
  • 每一頁需要展示多少條數據（pageSize）
  • 一共有多少條數據（total）

所有由二三條數據可以算出一共有好多頁

分頁器還有一個連續的頁碼的個數

image-20220522211103157

一般為奇數（5個或者7個）因為為了中間你點那個可以對稱

知道了這些數據就可以自定義分頁器

3.起始與結束數字計算

一個分頁器最難得部分就是連續部分也就是起始與結束數字的計算，先把前面的數據完成，我們的當前幾頁和展示多少數據、一共有多少數據，可以由用她的這個父組件傳值過來

image-20220522215356260

這一下就把所有的數據搞完

image-20220522215715036

然後是最重要的起始與結束數字的計算

  • 首先用計算屬性來做，因為最終是要呈現在頁面上給組件標籤用的，然後通過解構賦值，為什麼是this，因為我們接受過來的值就是this下面的這些屬性，拿到組件標籤上去了可以省略this，所以可以直接寫this

    image-20220522215957235

  • 定義兩個初試的起始頁和結束頁，按理說起始頁就等於取整的連續頁數/2，但是有bug，首先我們的總頁數是不是要比我們的連續頁數大，才能繼續做下去，如果都沒有他大，還怎麼來做連續頁數

    image-20220522220822976

  • 然後就是正常情況，正常情況下，start為點擊的頁數減去連續頁數 除以2取整的結果，這是最靈活的，比如以後連續頁數要為7、9等都可以適應

    image-20220522221119047

  • 針對於這種情況有兩個極端的bug，一個是start這邊，如果我pageNo為1或者2反正就是比除以2的結果小，那就為負數，這種情況肯定不行，一般start為負數，我們都是從1開始start不變，end為continues即可

  • 另一個bug就是end這邊，如果我們點擊最後一頁，end是不是比最後一頁還大，他的解決方案和start差不多

    image-20220522221552617

4.分頁器動態展示

在做這個模組的時候建議邊測試邊做，將我們的start和end列印在頁面上一個一個看

首先明確一點我們的v-for除了數組對象還可以遍曆數字

分頁器連續部分動態展示就是要遍歷end，多出來的部分用條件>start來隔斷

image-20220523101152428

這樣就可以完成分頁器展示了，但是有個bug，就是當我當前頁為某些頁的時候，前面的1或者。。。應該不展示

image-20220523101551352

image-20220523103616471

同樣的我們後面也會有問題，end到極限的時候

image-20220523105623850

5.分頁器點擊

接下來就可以將動態數據分頁器展示了，我們剛才傳的都是假數據

image-20220523112932552

然後要做的就是點擊就把當前的頁碼發到search組件來，屬於是子給父傳那就是自定義事件，動態綁定disabled給上一頁和下一頁，注意a標籤是沒有disabled屬性的，要實現禁用可以添加類名的方式實現

image-20220523114315312

然後這邊接受參數，把值給到數據，重新發起一次請求

image-20220523114456349

四.商品詳情

1.滾動行為

一個新的路由組件，在router創建他的匹配規則，這裡新增一個點我們的routes，是可以單拎出去作為一個模組的，detail這個頁面是要接收參數的，也就是你點的這個商品的id傳過來

image-20220523140841082

image-20220523141647691

現在有一個bug，vue的路由跳轉默認跳過去就是你跳轉之前的這個位置，比如我在最下面找到了這個商品我點進去在詳情頁面還是在下面的位置，一般來說我們過去都會是在最頂部，這個時候要參照官網vue-router給出的滾動行為來處理

image-20220523142040268

2.產品詳情數據獲取

api介面走起

注意一下axios post的參數用data來帶， get的參數寫在url以查詢字元串來帶

image-20220523143559962

vuex三部曲走起

image-20220523143940570

3.展示動態數據

由於數據複雜，先做個getters把數據取出來

image-20220523151212403

這裡取計算屬性注意會報錯，原因是因為非同步ajax還沒拿到數據那那邊又是mounted就派發actions，所以最開始的這個數據就是undefined

image-20220523151427946

4.放大鏡展示數據

需要由父組件向放大鏡組件把數據傳過來

image-20220523161928398

image-20220523162420134

報錯

image-20220523162438528

以後可以記住這種數字的錯誤，有可能是因為數組裡面的這個下標的報錯形式，這裡報錯原因是因為，我們這個數組有可能根本就沒有這個數組父級這邊傳過來的時候沒有這個數據所以也不知道這是個數組

image-20220523162711272

繼續報，這是因為我們過來空空數組的時候，本來裡面有數據的話應該是一個對象，而這裡是空數組就不存在這種.的形式

image-20220523162755872

image-20220523163451919

5.售賣屬性數據

image-20220523170022422

排他操作

給每個屬性添加一個點擊事件，傳進來兩個參數，一個是我們當前點擊的這個對象，一個是這個屬性的整個數組

image-20220523171255510

拿到這兩個就好說了先把這個屬性的數組整個數組進行一個遍歷把所有的checked值改為0，再把點擊的這個改為1

image-20220523172457880

6.放大鏡操作

先完成下面小圖片的一個切換，用的是輪播圖做的，由於這裡是靠ajax獲取來的圖，所以老規矩watch+nexttick來做

image-20220523174202082

記住兩個swiper的屬性 slidesPerView：可以設置輪播圖一次性顯示多少張圖片，slidesPerGroup：可以設置一次切換切換多少張

image-20220523174722778

動態完成添加屬性

image-20220523212653229

最主要我們在做這個動態添加屬性的同時將index傳給大圖這邊，屬於是兄弟之間互傳

image-20220523213200732

因為他們用的都是同一個數組，小圖的下標就是大圖數組的下標

image-20220523214604090

小圖放大鏡

小圖動，是在一個專門的盒子裡面動，利用offsetX，這個盒子跟這個小圖尺寸一樣，你對於他的offsetx就是在這個盒子裡面的一個距離

image-20220523214948299

然後在這裡面的滑動事件，對mask的left和top做處理，同時大圖應該是小圖的負2倍left和top

image-20220523215929648

7.購買產品個數

首先v-model雙向綁定

image-20220524093514629

然後給兩個點擊事件++和–，–時候要注意，如果小於1就讓其值等於1

image-20220524094232015

然後對於用戶自己往裡面輸入需要做一個change事件，收集輸入的值，其目的主要是為了怕用戶亂輸入，所以這裡有一個小妙招，用輸入的值乘以1，如果你是亂輸入一些非數字的就可以用isNan來判定，小於1的也可以合在一起

正常情況也要判定是不是輸入的小數

image-20220524095004779

Tags:

VirMach 便宜 VPS

QNews

QNews