購物車實現(xiàn)

電商網站中購物車的實現(xiàn)有很多種方式虫腋,這里我介紹兩種,第一種是直接用數(shù)據(jù)庫稀余,用戶在一個會話期間的所有的對購物車的操作全部都是對數(shù)據(jù)庫的操作悦冀,這種方式更新快,可以跨終端跨瀏覽器實現(xiàn)實時更新睛琳,但是比較消耗資源盒蟆,因為每次操作都是和數(shù)據(jù)庫的一次交互。第二種方式是session+數(shù)據(jù)庫师骗,在一次會話期間历等,服務器先把用戶對購物車的操作放在session中,當用戶退出登錄或者關閉瀏覽器的時候再同步到數(shù)據(jù)庫中辟癌,這種方式避免了很多對數(shù)據(jù)庫的重復操作寒屯,有利于節(jié)省資源,提高效率黍少,但是無法實現(xiàn)跨瀏覽器寡夹,跨設備的同步,信息更新也不及時厂置。第一種方式的實現(xiàn)比較簡單菩掏,在數(shù)據(jù)庫中創(chuàng)建一張購物車表,有四個字段:cart_id,user_id,goods_id,count昵济,這里就不再贅述患蹂,主要講一講第二種方式。

  1. 數(shù)據(jù)結構

    把購物車放在session中這種方式的數(shù)據(jù)結構是HashMap砸紊,鍵是商品的id传于,值需要另外創(chuàng)建一個類:CartItem,這個類只有兩個成員:goods與count醉顽,分別記錄著商品的信息與商品的數(shù)量

    package com.qfedu.entity;
    
    import lombok.Data;
    
    @Data
    public class CartItem {
    
        private FreshGoods freshGoods;
        private int count;
    }
    
    
  2. controller

    package com.qfedu.controller;
    
    import com.qfedu.entity.Cart;
    import com.qfedu.entity.CartItem;
    import com.qfedu.entity.FreshGoods;
    import com.qfedu.service.CartService;
    import com.qfedu.service.FreshGoodsService;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.*;
    
    import javax.annotation.Resource;
    import javax.servlet.http.HttpSession;
    import java.util.HashMap;
    import java.util.Map;
    
    /**
     * (Cart)表控制層
     *
     * @author makejava
     * @since 2020-03-24 16:03:32
     */
    @Controller
    //@RequestMapping("cart")
    public class CartController {
        /**
         * 服務對象
         */
        @Resource
        private CartService cartService;
    
        @Resource
        private FreshGoodsService goodsService;
    
        /**
         * 通過主鍵查詢單條數(shù)據(jù)
         *
         * @param id 主鍵
         * @return 單條數(shù)據(jù)
         */
        //@GetMapping("selectOne")
        public Cart selectOne(Integer id) {
            return this.cartService.queryById(id);
        }
    
        @PostMapping("mycart")
        public String myCart(@RequestParam("fdid") String fdid, HttpSession session){
            System.out.println("hehe" + fdid);
    
            Object objCart = session.getAttribute("cart");
    
            Map<String, CartItem> cart = null;
    
            if(objCart == null){        //  購物車為空
                cart = new HashMap<>();
    
                CartItem cartItem = new CartItem();
    
    
                FreshGoods fg = goodsService.queryById(fdid);
    
                cartItem.setCount(1);
                cartItem.setFreshGoods(fg);
    
                cart.put(fdid, cartItem);
            }else{                      //  購物車不為空
                cart = (Map<String, CartItem>)objCart;
    
                if(cart.containsKey(fdid)){     //  購物車中包含要添加的商品
                    CartItem cartItem = cart.get(fdid);
                    cartItem.setCount(cartItem.getCount() + 1);
    
                    cart.put(fdid, cartItem);
                }else{
                    FreshGoods fg = goodsService.queryById(fdid);
    
                    CartItem cartItem = new CartItem();
    
                    cartItem.setCount(1);
                    cartItem.setFreshGoods(fg);
    
                    cart.put(fdid, cartItem);
                }
            }
    
            session.setAttribute("cart", cart);
    
            return "mycart";
        }
    }
    

    這里要進行三次判斷沼溜,第一種情況是session域中還沒有購物車,所以要創(chuàng)建購物車游添,然后放進去系草,第二種情況是已經有了購物車但是購物車中還沒有要添加的商品通熄,購物車需要新添加一個CartItem,第三種情況是已經有了購物車并且購物車中已經有了要添加的商品找都,直接在原來的數(shù)量的基礎上加1.

  3. mycart.jsp

    <div>
    
        <c:if test="${cart != null}">
    
            <div class="occasion-cart">
                <div class="snipcart-details top_brand_home_details item_add single-item hvr-outline-out">
    
                </div>
            </div>
    
            <form action="payment" method="post">
    
                <table class="table table-bordered table-striped table-hover">
                    <tr>
                        <th><input type="checkbox" id="all" onclick="checkAllCart(this.checked)" /></th>
                        <th>pdid</th>
                        <th>pname</th>
                        <th>price</th>
                        <th>discount</th>
                        <th>image</th>
                        <th>count</th>
                        <th>gtid</th>
                        <th>summary</th>
                    </tr>
    
                    <c:forEach items="${cart}" var="ct">
                        <tr>
                            <th><input type="checkbox" name="one" onclick="checkOneCart()" value="${ct.key}" /></th>
                            <td>&nbsp;${ct.key}</td>
                            <td>&nbsp;${ct.value.freshGoods.goodName}</td>
                            <td>&nbsp;${ct.value.freshGoods.price}</td>
                            <td>&nbsp;${ct.value.freshGoods.discount}%</td>
                            <td>&nbsp;${ct.value.freshGoods.img}</td>
                            <td>&nbsp;${ct.value.count}</td>
                            <td>&nbsp;${ct.value.freshGoods.gtid}</td>
                            <td>&nbsp;${ct.value.count * ct.value.freshGoods.price * ct.value.freshGoods.discount / 100}</td>
                        </tr>
                    </c:forEach>
                </table>
                <input type="hidden" name="fdid" value="${freshGoods.fdid}"/>
                <input type="submit" value="pay" class="button btn-primary btn-success btn-lg" style="width: 200px;" />
            </form>
        </c:if>
    </div>
    
    <jsp:include page="bottom.jsp"/>
    
    <script>
        function checkAllCart(v) {
    
            var chOne = document.getElementsByName("one");
    
            for(var i = 0; i < chOne.length; i++){
                //alert();
                chOne[i].checked = v;
            }
        }
    
        function checkOneCart() {
            var chOne = document.getElementsByName("one");
    
            var flag = true;
            for(var i = 0; i < chOne.length; i++){
                if(!chOne[i].checked){
                    document.getElementById("all").checked = false;
                    flag = false;
                    break;
                }
            }
    
            if(flag){
                document.getElementById("all").checked = true;
            }
        }
    </script>
    
    

    這個頁面的主要操作是展示購物車属韧,重點在于獲取Map怨酝,還有使用js進行全選操作。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市顾瞻,隨后出現(xiàn)的幾起案子毒返,更是在濱河造成了極大的恐慌链快,老刑警劉巖险领,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異戒职,居然都是意外死亡栗恩,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門洪燥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來磕秤,“玉大人,你說我怎么就攤上這事捧韵∈信兀” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵纫版,是天一觀的道長。 經常有香客問我客情,道長其弊,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任膀斋,我火速辦了婚禮梭伐,結果婚禮上,老公的妹妹穿的比我還像新娘仰担。我一直安慰自己糊识,他們只是感情好,可當我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布摔蓝。 她就那樣靜靜地躺著赂苗,像睡著了一般。 火紅的嫁衣襯著肌膚如雪贮尉。 梳的紋絲不亂的頭發(fā)上拌滋,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天,我揣著相機與錄音猜谚,去河邊找鬼败砂。 笑死赌渣,一個胖子當著我的面吹牛,可吹牛的內容都是我干的昌犹。 我是一名探鬼主播坚芜,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼斜姥!你這毒婦竟也來了鸿竖?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤疾渴,失蹤者是張志新(化名)和其女友劉穎千贯,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體搞坝,經...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡搔谴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了桩撮。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片敦第。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖店量,靈堂內的尸體忽然破棺而出芜果,到底是詐尸還是另有隱情,我是刑警寧澤融师,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布右钾,位于F島的核電站,受9級特大地震影響旱爆,放射性物質發(fā)生泄漏舀射。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一怀伦、第九天 我趴在偏房一處隱蔽的房頂上張望脆烟。 院中可真熱鬧,春花似錦房待、人聲如沸邢羔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽拜鹤。三九已至,卻和暖如春流椒,著一層夾襖步出監(jiān)牢的瞬間署惯,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工镣隶, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留极谊,地道東北人诡右。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像轻猖,于是被迫代替她去往敵國和親帆吻。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內容