用vue實現(xiàn)一個淘寶購物車，給和我一樣苦苦掙扎的前端小白（更新）

Ajian 發(fā)布于2019-08-21 17:39 / 3481人閱讀

摘要：最近后端的同事要我寫一個購物車，一開始我用寫，但寫著寫著發(fā)現(xiàn)邏輯太混亂了，寫不下去。所以我想著用來實現(xiàn)一個。但在購物車中這樣的方法是不行的，單個商品的選中以及取消所執(zhí)行的邏輯有部分不同，所以我選擇將其拆分。

最近后端的同事要我寫一個購物車，一開始我用jQuery寫，但寫著寫著發(fā)現(xiàn)邏輯太混亂了，寫不下去。最后花了五分鐘找了個demo丟給了他。后來我不甘心，畢竟水平菜還不求上進就完蛋了。所以我想著用vue來實現(xiàn)一個。

本來想看看別人的代碼，但搜索了下github發(fā)現(xiàn)，能找到的購物車都是兩級分類的。而京東、淘寶之流都是三級分類的：  
1. 全選        
2. 店鋪全選  
3. 商品選中

這樣的貌似才有實用價值

html部分，不過多贅述


    
        
            
                
                    
                    
                    
                    全選
                
                商品信息
                商品參數(shù)
                單價
                數(shù)量
                金額
                操作
               
            
        

         
            
                
                    
                    
                
                
                    店鋪：{{item.shop_name}}
                
            
            
                
                    
                        
                        
                    
                    
                        
                        {{pro.text}}
                        定制
                        
                    
                    
                        規(guī)格：默認
                        尺寸：16*16*3(cm)
                    
                    
                        ￥{{pro.price}}
                        
                            更多促銷
                            
                                測試
                            
                        
                    
                    
                        
                            -
                            
                            +
                        
                    
                    
                        ￥{{pro.sum}}
                    
                    
                        收藏商品
                        移除商品
                        定制商品
                        
                                測試
                        
                    
                
            
         

        
        
        
        
            
                已選商品{{this.fetchData.allnum}}件
                共計: ￥{{this.fetchData.allsum}}
                結算
            
        
    
    
    
        刪除寶貝X
        您確認要刪除該寶貝嗎？
        確定關閉

大概長這個樣子，很普通的一個購物車頁面，另外html和css部分不是我寫的，是下載的jQuery購物車的demo里的代碼，這樣比較省事情。

購物車邏輯分析

1.三級選中按鈕的實現(xiàn)
2.每件商品總價的變動
3.商品總件數(shù)、商品總計價格的變動
4.輸入商品數(shù)量導致2，3的變動（未實現(xiàn)）

先上數(shù)據

data(){
                return{
                    fetchData:{
                        list:[
                            {
                                shop_id:1,
                                shop_name:"搜獵人藝術生活",
                                products:[
                                    {
                                        pro_id:101,
                                        text:"洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶洗面奶",
                                        price:480,
                                        num:1,
                                        img:"./images/1.png",
                                        sum:480,
                                        checked:false//商品選中狀態(tài)
                                    },
                                    {
                                        pro_id:102,
                                        text:"花露水花露水花露水花露水花露水花露水花露水花露水",
                                        price:680,
                                        num:1,
                                        img:"./images/2.png",
                                        sum:680,
                                        checked:false
                                    },
                                    {
                                        pro_id:103,
                                        text:"燕麥片燕麥片燕麥片燕麥片燕麥片燕麥片燕麥片燕麥片",
                                        price:380,
                                        num:1,
                                        img:"./images/3.png",
                                        sum:380,
                                        checked:false
                                    }
                                ],
                                check:false,//店鋪選中狀態(tài)
                                choose:0,//商品選中個數(shù)
                            },
                            {
                                shop_id:2,
                                shop_name:"卷卷旗艦店",
                                products:[
                                    {
                                        pro_id:201,
                                        text:"剃須刀剃須刀剃須刀剃須刀剃須刀剃須刀剃須刀剃須刀",
                                        price:580,
                                        num:1,
                                        img:"./images/4.png",
                                        sum:580,
                                        checked:false
                                    },
                                    {
                                        pro_id:202,
                                        text:"衛(wèi)生紙衛(wèi)生紙衛(wèi)生紙衛(wèi)生紙衛(wèi)生紙衛(wèi)生紙衛(wèi)生紙衛(wèi)生紙",
                                        price:780,
                                        num:1,
                                        img:"./images/5.png",
                                        sum:780,
                                        checked:false
                                    }
                                ],
                                check:false,
                                choose:0,
                            },
                            {
                                shop_id:3,
                                shop_name:"瓜皮的神秘商店",
                                products:[
                                    {
                                        pro_id:301,
                                        text:"眼鏡片眼鏡片眼鏡片眼鏡片眼鏡片眼鏡片眼鏡片眼鏡片",
                                        price:180,
                                        num:1,
                                        img:"./images/6.png",
                                        sum:180,
                                        checked:false
                                    },
                                    {
                                        pro_id:302,
                                        text:"湊數(shù)的湊數(shù)的湊數(shù)的湊數(shù)的湊數(shù)的湊數(shù)的湊數(shù)的湊數(shù)的",
                                        price:280,
                                        num:1,
                                        img:"./images/7.png",
                                        sum:280,
                                        checked:false
                                    }                                
                                ],
                                check:false,
                                choose:0,
                            }
                        ],
                    status:false,//全選選中狀態(tài)
                    allchoose:0,//店鋪選中個數(shù)
                    allsum:0,//總計價格
                    allnum:0//總計數(shù)量
                    }
                }
            },

意義不明的部分寫了注釋，其他數(shù)據一目了然

單個商品的選中按鈕

單個商品的選中按鈕很容易實現(xiàn)，一般是添加一個點擊方法，值取反。但在購物車中這樣的方法是不行的，單個商品的選中以及取消所執(zhí)行的邏輯有部分不同，所以我選擇將其拆分。

choosetrue(item,pro){
                    pro.checked=true//將商品選中狀態(tài)改為true
                    ++item.choose===item.products.length?item.check=true:""http://這里執(zhí)行了兩部，選中商品數(shù)量先+1，再與該店鋪商品數(shù)量比較，如果相等就更改店鋪選中狀態(tài)為true
                    item.check?++this.fetchData.allchoose===this.fetchData.list.length?this.fetchData.status=true:this.fetchData.status=false:""http://如果店鋪選中狀態(tài)改為true，選中店鋪數(shù)量先+1，再與店鋪數(shù)量比較，如果相等就更改全選選中狀態(tài)為true      
                },
choosefalse(item,pro){
                    pro.checked=false//將商品選中狀態(tài)改為false
                    --item.choose//選中商品數(shù)量-1
                    if(item.check){//如果店鋪是被選中的，更改店鋪選中狀態(tài)
                        item.check=false
                        --this.fetchData.allchoose//并且選中店鋪數(shù)量-1
                    }
                    this.fetchData.status=false//無論之前全選的狀態(tài)，將其改為false就行
                },
choose(item,pro){
                    !pro.checked?this.choosetrue(item,pro):this.choosefalse(item,pro)
                },//這里是綁定到html上的方法，取反是由于你在觸發(fā)方法的時候取的是之前的狀態(tài)

相信有的人看了代碼還是覺得能把三個函數(shù)寫在一起，其實我之前就是這么干的，然后就悲劇了，可能是我功底不夠。先不管這些?，F(xiàn)在分析下店鋪全選的邏輯：

選中之后，店鋪下的所有商品選中，并且判斷全選按鈕是否要選中

取消選中，店鋪下的所有商品取消選中

這是基本邏輯，但如果照這個思路寫，用循環(huán)將商品狀態(tài)更改，很輕松，但是還是需要判斷是否要選中全選按鈕。我們換個思路吧，因為我發(fā)現(xiàn)“判斷是否要選中全選按鈕”已經在之前寫過了。店鋪選中按鈕的前半部分邏輯其實就是choosetrue函數(shù)執(zhí)行了一定的次數(shù)，我是這樣寫的：

單個店鋪的選中按鈕

shoptrue(item){
                    item.products.forEach((pro)=>{
                        pro.checked===false?this.choosetrue(item,pro):""
                    })
                },//循環(huán)店鋪中的商品，先篩選出目前沒選中的商品，給它執(zhí)行choosetrue函數(shù)
shopfalse(item){
                    item.products.forEach((pro)=>{
                        pro.checked===true?this.choosefalse(item,pro):""
                    })
                },//循環(huán)店鋪中的商品，先篩選出目前被選中的商品，給它執(zhí)行choosefalse函數(shù)
shopchoose(item){
                    !item.check?this.shoptrue(item):this.shopfalse(item)
                },

剛才分開寫的好處就出現(xiàn)啦，至于為什么要篩選一下，這和之后計算商品總價有關系（如果只是寫多選按鈕的邏輯，有人會圖方便不篩選，比如一小時之前的我）

全選按鈕

cartchoose(){
                    this.fetchData.status=!this.fetchData.status//取反改變狀態(tài)
                    this.fetchData.status?this.fetchData.list.forEach((item)=>this.shoptrue(item)):this.fetchData.list.forEach((item)=>this.shopfalse(item))
                },//根據取反后的狀態(tài)進行相應的店鋪按鈕操作

有人可能發(fā)現(xiàn)為什么全選不進行篩選，其實是不需要篩選。之前選中的店鋪按鈕下的商品狀態(tài)必然全部是true，只是空跑了一遍，總結起來的邏輯是：沒選中的店鋪改變狀態(tài)->沒選中的商品改變狀態(tài)

增加按鈕&減少按鈕

 add(pro){
                    pro.num++//商品數(shù)量+1
                    pro.sum+=pro.price//商品總價變動
                   
                },
reduce(pro){
                    if(pro.num===1){
                        pro.num//當商品數(shù)量=1，不變
                    }else{
                        pro.num--//否則-1
                        pro.sum-=pro.price//商品總價變動
                     
                    }
                }

這里的邏輯比較簡單，不細說。
接下來就是商品總計價格的變動，這里又要分析一下：首先，選中的商品才會影響總計價格的變動，那我們只需要將邏輯寫著choosetrue函數(shù)中就行，而不需要去一遍一遍循環(huán)選中商品的總價格去計算總計價格，稍微調整下。

choosetrue(item,pro){
                    pro.checked=true
                    ++item.choose===item.products.length?item.check=true:""
                    item.check?++this.fetchData.allchoose===this.fetchData.list.length?this.fetchData.status=true:this.fetchData.status=false:""
                    this.fetchData.allsum+=pro.sum//當觸發(fā)商品選中按鈕，將商品總價格添加到總計價格
                },
choosefalse(item,pro){
                    pro.checked=false
                    --item.choose
                    if(item.check){
                        item.check=false
                        --this.fetchData.allchoose
                    }
                    this.fetchData.status=false
                    this.fetchData.allsum-=pro.sum//當觸發(fā)商品取消按鈕，將商品總價格從總計價格刪去                 
                },
add(pro){
                    pro.num++
                    pro.sum+=pro.price
                    pro.checked?this.fetchData.allsum+=pro.price:this.fetchData.allsum//這里判斷下商品的狀態(tài)決定是不是要改變總計價格
                },
reduce(pro){
                    if(pro.num===1){
                        pro.num
                    }else{
                        pro.num--
                        pro.sum-=pro.price
                        pro.checked?this.fetchData.allsum-=pro.price:this.fetchData.allsum//同上
                    }
                }

未完成部分

商品數(shù)量的計算，這個淘寶和京東對數(shù)量的計算不同，淘寶是商品種類的數(shù)量，京東是商品總件數(shù)量，邏輯也較簡單，跟商品價格后面相應添加就行。
當手動輸入商品數(shù)量時，價格隨之變動，我思考了半天只想到數(shù)據監(jiān)測，但數(shù)據嵌套太深了，如果監(jiān)測fetchData，監(jiān)測函數(shù)會多次無意義觸發(fā)，監(jiān)測鍵盤也不現(xiàn)實，最好的辦法是監(jiān)測num這個數(shù)據，但我沒繼續(xù)實驗，對watch用的不太熟。有小伙伴有實現(xiàn)方法麻煩告知

更新

之前所有未完成部分已經解決，小伙伴們可以去github看源碼。主要包括（商品數(shù)量計算，監(jiān)控輸入數(shù)字引起價格變動，輸入數(shù)字的各種限制，避免有人填寫負數(shù)和小數(shù)之類的）

源碼

https://github.com/yuyeqianxu...

有bug麻煩告知一聲，謝謝

GPU云服務器云服務器購物車怎么用js實現(xiàn) 用php實現(xiàn)記錄更新用java實現(xiàn)一個線程池一個購物平臺要租多大的云服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/89823.html

DevOps專業(yè)人員如何在日常故障排除工作中苦苦掙扎

摘要：專業(yè)人員如何在日常故障排除中苦苦掙扎，如果您的組織要么關注，要么雇傭大量開發(fā)人員，請確保您關注他們的工作量，要么面對出走的客戶。DevOps專業(yè)人員如何在日常故障排除中苦苦掙扎，Grindtweet如果您的組織要么關注DevOps，要么雇傭大量開發(fā)人員，請確保您關注他們的工作量，要么面對出走的客戶。這是IT管理軟件提供商Solarwinds的主要發(fā)現(xiàn)。在其最新的調查報告中，對美國和加拿大的3...

G9YH 2019-03-21 15:37 評論0 收藏0
小白成長日記：寫個貪吃蛇

摘要：貪吃蛇并不是通過操作來完成移動的，而是通過記錄貪吃蛇的路徑來將身體渲染出來。目前沒有內置的操作符判斷對象的內容是否相同。還是用的vue，本來以為不合適，但想法錯了。貪吃蛇并不是通過操作dom來完成移動的，而是通過記錄貪吃蛇的路徑來將身體渲染出來。一般移動元素，我們都是變動它的css達到目的，但我在寫貪吃蛇的時候發(fā)現(xiàn)這樣很難以實現(xiàn)，參考了網上的資源，發(fā)現(xiàn)大部分人是通過記錄貪吃蛇的路徑...

archieyang 2019-08-21 17:55 評論0 收藏0
小白的全棧開發(fā) 一

摘要：小白的全棧開發(fā)一簡介從新手的角度對有了解，對和有了解。希望能夠幫助和我一樣是全棧小白的你看過很多關于怎么搭建全棧的文章，部分可能有借鑒。因為要自己獨立完成，所以開始自己的全棧之旅。分享出來我的全棧經歷，并記錄我的畢設進度逃。小白的全棧開發(fā) 一簡介從新手的角度（對vue有了解，對Koa和Express有了解。）從0開始搭建一個通過RESTful API提供數(shù)據，vue組成的單頁面的...

hiyayiji 2019-06-26 17:11 評論0 收藏0
畢業(yè)工作幾年，月入還不到2萬的建議速看

摘要：中國的行業(yè)的蓬勃發(fā)展，蛋糕之大，讓所有行業(yè)從業(yè)者的收入總體處于行業(yè)前列，可比擬的只有金融行業(yè)一個不創(chuàng)造財富，只分配財富的行業(yè)。每天收到十幾份簡歷，卻招聘不到合適的人。很多小伙伴冷門專業(yè)，普通學校，畢業(yè)了工作幾年了月薪還是幾千塊，這就是現(xiàn)狀。 ? ? ?? ? ? ?中國的IT行業(yè)因為有人口福...

wmui 2021-09-24 09:47 評論0 收藏0

發(fā)表評論

登陸后可評論

0條評論

Ajian

男|高級講師

我要關注我要私信

TA的文章

Python0基礎（上）——期末不掛科

閱讀 3079·2021-11-22 09:34
SWR 發(fā)布 1.0 版本、Microsoft Edge 新標簽頁底部出現(xiàn)無法關閉的廣告 | 淘系前

閱讀 3675·2021-08-31 09:45
關于SVG

閱讀 3898·2019-08-30 13:57
前端每日實戰(zhàn)：4# 視頻演示如何用純 CSS 創(chuàng)作一個金屬光澤 3D 按鈕特效

閱讀 1704·2019-08-29 15:11
織夢做網站過程中引用bootstrap產生css沖突的解決

閱讀 1708·2019-08-28 18:04
web前端開發(fā)測驗之css部分

閱讀 3253·2019-08-28 17:59
每日 30 秒 ? JSON對象數(shù)組轉換 CSV 表格數(shù)據

閱讀 1594·2019-08-26 13:35
JS正則表達式學習筆記2

閱讀 2215·2019-08-26 10:12

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

用vue實現(xiàn)一個淘寶購物車，給和我一樣苦苦掙扎的前端小白（更新）

相關文章

DevOps專業(yè)人員如何在日常故障排除工作中苦苦掙扎

小白成長日記：寫個貪吃蛇

小白的全棧開發(fā) 一

畢業(yè)工作幾年，月入還不到2萬的建議速看

發(fā)表評論

0條評論

Ajian

男|高級講師

TA的文章

Python0基礎（上）——期末不掛科

SWR 發(fā)布 1.0 版本、Microsoft Edge 新標簽頁底部出現(xiàn)無法關閉的廣告 | 淘系前

關于SVG

前端每日實戰(zhàn)：4# 視頻演示如何用純 CSS 創(chuàng)作一個金屬光澤 3D 按鈕特效

織夢做網站過程中引用bootstrap產生css沖突的解決

web前端開發(fā)測驗之css部分

每日 30 秒 ? JSON對象數(shù)組轉換 CSV 表格數(shù)據

JS正則表達式學習筆記2

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

用vue實現(xiàn)一個淘寶購物車，給和我一樣苦苦掙扎的前端小白（更新）

相關文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

用vue實現(xiàn)一個淘寶購物車，給和我一樣苦苦掙扎的前端小白（更新）