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

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

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

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

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

這樣的貌似才有實(shí)用價(jià)值

html部分，不過多贅述


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

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

        
        
        
        
            
                已選商品{{this.fetchData.allnum}}件
                共計(jì): ￥{{this.fetchData.allsum}}
                結(jié)算
            
        
    
    
    
        刪除寶貝X
        您確認(rèn)要刪除該寶貝嗎？
        確定關(guān)閉

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

購物車邏輯分析

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

先上數(shù)據(jù)

data(){
                return{
                    fetchData:{
                        list:[
                            {
                                shop_id:1,
                                shop_name:"搜獵人藝術(shù)生活",
                                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,//總計(jì)價(jià)格
                    allnum:0//總計(jì)數(shù)量
                    }
                }
            },

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

單個商品的選中按鈕

單個商品的選中按鈕很容易實(shí)現(xiàn)，一般是添加一個點(diǎ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ā)方法的時(shí)候取的是之前的狀態(tài)

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

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

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

這是基本邏輯，但如果照這個思路寫，用循環(huán)將商品狀態(tài)更改，很輕松，但是還是需要判斷是否要選中全選按鈕。我們換個思路吧，因?yàn)槲野l(fā)現(xiàn)“判斷是否要選中全選按鈕”已經(jīng)在之前寫過了。店鋪選中按鈕的前半部分邏輯其實(shí)就是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)啦，至于為什么要篩選一下，這和之后計(jì)算商品總價(jià)有關(guān)系（如果只是寫多選按鈕的邏輯，有人會圖方便不篩選，比如一小時(shí)之前的我）

全選按鈕

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))
                },//根據(jù)取反后的狀態(tài)進(jìn)行相應(yīng)的店鋪按鈕操作

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

增加按鈕&減少按鈕

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

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

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//當(dāng)觸發(fā)商品選中按鈕，將商品總價(jià)格添加到總計(jì)價(jià)格
                },
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//當(dāng)觸發(fā)商品取消按鈕，將商品總價(jià)格從總計(jì)價(jià)格刪去                 
                },
add(pro){
                    pro.num++
                    pro.sum+=pro.price
                    pro.checked?this.fetchData.allsum+=pro.price:this.fetchData.allsum//這里判斷下商品的狀態(tài)決定是不是要改變總計(jì)價(jià)格
                },
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ù)量的計(jì)算，這個淘寶和京東對數(shù)量的計(jì)算不同，淘寶是商品種類的數(shù)量，京東是商品總件數(shù)量，邏輯也較簡單，跟商品價(jià)格后面相應(yīng)添加就行。
當(dāng)手動輸入商品數(shù)量時(shí)，價(jià)格隨之變動，我思考了半天只想到數(shù)據(jù)監(jiān)測，但數(shù)據(jù)嵌套太深了，如果監(jiān)測fetchData，監(jiān)測函數(shù)會多次無意義觸發(fā)，監(jiān)測鍵盤也不現(xiàn)實(shí)，最好的辦法是監(jiān)測num這個數(shù)據(jù)，但我沒繼續(xù)實(shí)驗(yàn)，對watch用的不太熟。有小伙伴有實(shí)現(xiàn)方法麻煩告知

更新

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

源碼

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

有bug麻煩告知一聲，謝謝

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

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89823.html

發(fā)表評論

登陸后可評論

0條評論

Ajian

男|高級講師

我要關(guān)注我要私信

TA的文章

Python0基礎(chǔ)（上）——期末不掛科

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

閱讀 3649·2021-08-31 09:45
關(guān)于SVG

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

閱讀 1682·2019-08-29 15:11
織夢做網(wǎng)站過程中引用bootstrap產(chǎn)生css沖突的解決

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

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

閱讀 1573·2019-08-26 13:35
JS正則表達(dá)式學(xué)習(xí)筆記2

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

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

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

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

發(fā)表評論

0條評論

Ajian

男|高級講師

TA的文章

Python0基礎(chǔ)（上）——期末不掛科

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

關(guān)于SVG

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

織夢做網(wǎng)站過程中引用bootstrap產(chǎn)生css沖突的解決

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

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

JS正則表達(dá)式學(xué)習(xí)筆記2

最新活動