購(gòu)物車【JavaWeb小項(xiàng)目、簡(jiǎn)單版】

ninefive 發(fā)布于2019-08-15 14:20 / 654人閱讀

摘要：購(gòu)物項(xiàng)代表著該商品，并且應(yīng)該給予購(gòu)物項(xiàng)數(shù)量和價(jià)錢的屬性。當(dāng)然啦，購(gòu)物項(xiàng)代表著商品，所以首先要判斷該購(gòu)物車是否有同類的商品，如果有，直接在購(gòu)物項(xiàng)的數(shù)量上即可的。

前言

為了鞏固MVC的開發(fā)模式，下面就寫一個(gè)購(gòu)物車的小案例..

①構(gòu)建開發(fā)環(huán)境 導(dǎo)入需要用到的開發(fā)包

建立程序開發(fā)包

②設(shè)計(jì)實(shí)體 書籍實(shí)體

    public class Book {
    
        private String id;
        private String name;
        private String author;
        private String description;
        private double price;
    
        public Book() {
        }
    
        public Book(String id, String name, String author, String description, double price) {
            this.id = id;
            this.name = name;
            this.author = author;
            this.description = description;
            this.price = price;
        }
    
        //...各種setter和getter
    }

購(gòu)物車與購(gòu)物項(xiàng)實(shí)體

可能我們會(huì)這樣設(shè)計(jì)購(gòu)物車

    /*該類代表的是購(gòu)物車*/
    public class Cart {
    
        //關(guān)鍵字是書籍的id，值是書
        private Map bookMap = new LinkedHashMap<>();
    
    
    }

上面的做法是不合適的，試想一下：如果我要購(gòu)買兩本相同的書，購(gòu)物車的頁(yè)面上就出現(xiàn)了兩本書，而不是書2。買三本相同的書就在購(gòu)物頁(yè)面上出現(xiàn)三本書，而不是書3.

因此，Map集合的值不能是Book對(duì)象，那我們?cè)趺床拍芙鉀Q上面所說的問題呢？我們最常用的就是，再寫一個(gè)實(shí)體CartItem（代表購(gòu)物項(xiàng)）

好的，我們先來寫購(gòu)物項(xiàng)實(shí)體吧，等會(huì)再寫購(gòu)物車！

    /*購(gòu)物項(xiàng)代表的是當(dāng)前書，并表示該書出現(xiàn)了幾次*/
    public class CartItem {
    
        private Book book;
        private int quantity;
    
        //該購(gòu)物項(xiàng)（書--不一定只有一本）的價(jià)錢應(yīng)該等于書的數(shù)量*價(jià)格
        private double price;
    
        
        //書的價(jià)錢*數(shù)量
        public double getPrice() {
            return book.getPrice() * this.quantity;
        }
    
        public Book getBook() {
            return book;
        }
    
        public void setBook(Book book) {
            this.book = book;
        }
    
        public int getQuantity() {
            return quantity;
        }
    
        public void setQuantity(int quantity) {
            this.quantity = quantity;
        }
        
        public void setPrice(double price) {
            this.price = price;
        }
    }

購(gòu)物車實(shí)體


    /*該類代表的是購(gòu)物車*/
    public class Cart {
    
        //關(guān)鍵字是書籍的id，值是書
        private Map bookMap = new LinkedHashMap<>();
    
        //代表著購(gòu)物車的總價(jià)
        private double price;
    
    
        //把購(gòu)物項(xiàng)（用戶傳遞進(jìn)來的書籍）加入到購(gòu)物車?yán)镞吶?，也?yīng)該是購(gòu)物車的功能
        public void addBook(Book book) {
    
            //獲取得到購(gòu)物項(xiàng)
            CartItem cartItem = bookMap.get(book.getId());
    
            //判斷購(gòu)物車是否存在該購(gòu)物項(xiàng)，如果不存在
            if (cartItem == null) {
    
                //創(chuàng)建這個(gè)購(gòu)物項(xiàng)對(duì)象
                cartItem = new CartItem();
    
                //將用戶傳遞過來的書籍作為購(gòu)物項(xiàng)
                cartItem.setBook(book);
    
                //把該購(gòu)物項(xiàng)的數(shù)量設(shè)置為1
                cartItem.setQuantity(1);
    
                //把購(gòu)物項(xiàng)加入到購(gòu)物車去
                bookMap.put(book.getId(), cartItem);
            } else {
    
                //如果存在該購(gòu)物項(xiàng)，將購(gòu)物項(xiàng)的數(shù)量+1
                cartItem.setQuantity(cartItem.getQuantity() + 1);
            }
        }
    
        //購(gòu)物車的總價(jià)就是所有購(gòu)物項(xiàng)的價(jià)格加起來
        public double getPrice() {
    
            double totalPrice = 0;
    
            for (Map.Entry me : bookMap.entrySet()) {
    
                //得到每個(gè)購(gòu)物項(xiàng)
                CartItem cartItem = me.getValue();
    
                //將每個(gè)購(gòu)物項(xiàng)的錢加起來，就是購(gòu)物車的總價(jià)了！
                totalPrice += cartItem.getPrice();
            }
    
            return totalPrice;
        }
    
    
        public Map getBookMap() {
            return bookMap;
        }
    
        public void setBookMap(Map bookMap) {
            this.bookMap = bookMap;
        }
    
    
        public void setPrice(double price) {
            this.price = price;
        }
    }

③數(shù)據(jù)庫(kù)

這里就直接用集合模擬數(shù)據(jù)庫(kù)了，簡(jiǎn)單的domo而已。

    //既然是購(gòu)物車案例，應(yīng)該會(huì)有增刪的操作，通過關(guān)鍵字查詢書籍，所以使用LinkedHashMap集合
    private static Map map = new LinkedHashMap<>();
    
    static {
        map.put("1",new Book("1", "java", "zhongfucheng", "好書", 99));
        map.put("2",new Book("2", "javaweb", "ouzicheng", "不好的書", 44));
        map.put("3",new Book("3", "ajax", "xiaoming", "一般般", 66));
        map.put("4",new Book("4", "spring", "xiaohong", "還行", 77));
    }

    public static Map getAll() {


        return map;
    }

④開發(fā)dao

dao層應(yīng)該至少提供獲取所有的書籍和根據(jù)關(guān)鍵字獲取得到書籍

public class BookDao {

    //獲取存放著書籍的Map集合
    public Map getAll() {
        return BookDB.getAll();
    }

    //根據(jù)關(guān)鍵字獲取某本書籍
    public Book find(String id) {
        return BookDB.getAll().get(id);
    }
}

⑤開發(fā)service

service層就是對(duì)DAO層的一個(gè)封裝


    public class BusinessService {
    
        BookDao bookDao = new BookDao();
    
        /*列出所有的書*/
        public Map getAll() {
    
            return bookDao.getAll();
        }

        /*根據(jù)書的id獲取書*/
        public Book findBook(String id) {
            return bookDao.find(id);
        }
    
        //...待會(huì)還有其他的功能再?gòu)倪@里補(bǔ)充！
    }

⑥開發(fā)web 列出所有的書 開發(fā)提供JSP頁(yè)面的Servlet

        //調(diào)用service層的方法，獲取得到存放書籍的Map集合
        BusinessService businessService = new BusinessService();
        Map books = businessService.getAll();
        
        //存放在request域?qū)ο笾?，交給jsp頁(yè)面顯示
        request.setAttribute("books", books);
        
        //跳轉(zhuǎn)到j(luò)sp頁(yè)面中
        request.getRequestDispatcher("/WEB-INF/listBook.jsp").forward(request, response);

開發(fā)顯示所有書籍的jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


    顯示所有的書籍



<%--Servlet傳遞過來的是一個(gè)Map對(duì)象，要顯示所有的書籍，就需要遍歷Map集合（EL表達(dá)式和JSTL標(biāo)簽合用）--%>

        
    
        書籍編號(hào)
        名稱
        作者
        詳細(xì)信息
        價(jià)格
    

    
            ${me.key}
            ${me.value.name}
            ${me.value.author}
            ${me.value.description}
            ${me.value.price}

購(gòu)買操作

作為購(gòu)物車的案例，怎么能沒有購(gòu)買的操作呢？于是乎就增加購(gòu)買的操作！

開發(fā)處理購(gòu)買的Servlet

        //獲取得到傳遞過來的id
        String id = request.getParameter("bookid");

        //把用戶想要買的書放到購(gòu)物車上
        //用戶不單單只有一個(gè)，要讓購(gòu)物車上只為當(dāng)前的用戶服務(wù)，就需要用到會(huì)話跟蹤技術(shù)了
        Cart cart = (Cart) request.getSession().getAttribute("cart");

        //如果當(dāng)前用戶還沒有點(diǎn)擊過購(gòu)買的商品，那么是用戶的購(gòu)物車是空的
        if (cart == null) {
            cart = new Cart();
            request.getSession().setAttribute("cart", cart);
        }

        //調(diào)用BussinessService的方法，實(shí)現(xiàn)購(gòu)買功能！
        BusinessService businessService = new BusinessService();
        businessService.buyBook(id, cart);

        //跳轉(zhuǎn)到購(gòu)物車顯示的頁(yè)面上
        request.getRequestDispatcher("/listCart.jsp").forward(request, response);

在我們前面開發(fā)BusinessService時(shí)，是沒有buyBook()這個(gè)方法的！下面更新了BusinessService的代碼：


    /*
    * 在購(gòu)買書籍的時(shí)候，我們發(fā)現(xiàn)需要將書籍添加到購(gòu)物車上
    * 如果我們直接在Servlet上使用Cart實(shí)體對(duì)象的addBook()和BookDao對(duì)象的find()方法，是可以完成功能的
    * 
    * 但是，這樣web層的程序就跟Dao層的耦合了，為了代碼性的健壯性和解耦，我們?cè)贐usinessService中對(duì)他倆進(jìn)行封裝
    * 
    * 于是有了buyBook()這個(gè)方法！
    * */
    
    /*把用戶想買的書籍添加到當(dāng)前用戶的購(gòu)物車上*/
    public void buyBook(String id, Cart cart) {

        Book book = bookDao.find(id);
        cart.addBook(book);

    }

購(gòu)物車的頁(yè)面

初步把購(gòu)物項(xiàng)的信息顯示出來

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    
    
        購(gòu)物車顯示頁(yè)面
    
    
    購(gòu)物車顯示頁(yè)面
    
    <%--empty函數(shù)是判斷集合中有沒有元素--%>
    <%--如果購(gòu)物車是沒有任何購(gòu)物項(xiàng)的--%>
    
        您還沒有購(gòu)買過任何的書籍呀！
    
    
    <%--如果購(gòu)物車有購(gòu)物項(xiàng)，就應(yīng)該把購(gòu)物項(xiàng)的信息顯示給用戶--%>
    
    
        
                
            
                書籍編號(hào)
                名稱
                數(shù)量
                小計(jì)
                操作
            
            
                    ${me.key}
                    ${me.value.book.name}
                    ${me.value.quantity}
                    ${me.value.price}
                    刪除
                
            
            
                清空購(gòu)物車
    
                合計(jì)：
                ${cart.price}

效果是這樣子的：

刪除購(gòu)物車商品

想要?jiǎng)h除購(gòu)物車中的商品，也很簡(jiǎn)單，把刪除操作掛在超鏈接上，超鏈接指向DeleteCartServlet，并將想要?jiǎng)h除的書本的id帶過去（不將id帶過去，服務(wù)器哪知道你要?jiǎng)h除的是哪個(gè)）！

    刪除

開發(fā)DeleteCartBook的Servlet

        //獲取得到用戶想要?jiǎng)h除哪個(gè)書本的id
        String id = request.getParameter("bookid");

        //獲取該用戶相對(duì)應(yīng)的購(gòu)物車對(duì)象
        Cart cart = (Cart) request.getSession().getAttribute("cart");

        try {
            //刪除購(gòu)物車的商品，也應(yīng)該是在BusinessService中有的功能，于是乎又回到BusinessService中寫代碼
            BusinessService businessService = new BusinessService();
            businessService.deleteBook(id, cart);

            //刪除購(gòu)物車的商品后，也應(yīng)該直接跳轉(zhuǎn)回去購(gòu)物車的顯示頁(yè)面中
            request.getRequestDispatcher("/WEB-INF/listCart.jsp").forward(request, response);


        } catch (CartNotFoundException e) {
            request.setAttribute("message", "購(gòu)物車空了！");
            request.getRequestDispatcher("/message.jsp").forward(request, response);

        } catch (Exception e) {
            e.printStackTrace();
            request.setAttribute("message", "刪除中出現(xiàn)了異常～待會(huì)再試試唄！");
            request.getRequestDispatcher("/message.jsp").forward(request, response);
        }

BusinessService又多了一個(gè)功能：

    /*用戶要在購(gòu)物車中刪除某個(gè)購(gòu)物項(xiàng)*/
    public void deleteBook(String id, Cart cart) throws CartNotFoundException {

        //如果用戶是直接訪問DeleteCartBook的Servlet的，在session中是沒有cart這個(gè)屬性的！
        //告訴用戶購(gòu)物車是空的
        if (cart == null) {
            throw new CartNotFoundException("購(gòu)物車為空");
        }

        //把購(gòu)物項(xiàng)移除出去集合就行了！
        cart.getBookMap().remove(id);
    }

效果：

多本一起購(gòu)買

從上面的gif我們就可以發(fā)現(xiàn)，如果我重復(fù)買一本書，需要一本一本地點(diǎn)！這樣會(huì)非常麻煩！

我們要怎么實(shí)現(xiàn)：用戶想要買多少本，購(gòu)物車的數(shù)量就修改為多少本呢？

在購(gòu)物車上，數(shù)量的值改成是輸入框

效果：

好的，現(xiàn)在我們已經(jīng)能夠把數(shù)量隨自己想要多少本，就改成是多少了。現(xiàn)在主要的問題就是，怎么在改的同時(shí)，數(shù)據(jù)也及時(shí)地更新？

寫javascript代碼，讓輸入框的信息提交給服務(wù)器

我們寫javascript的代碼，監(jiān)控著輸入框的變動(dòng)，如果有變動(dòng)，就響應(yīng)事件，將變動(dòng)的數(shù)據(jù)傳遞給服務(wù)器，更新數(shù)據(jù)！

編寫UpdateQuantity的Servlet

        //獲取得到用戶想要修改哪一本書的id和相對(duì)應(yīng)的數(shù)量
        String id = request.getParameter("bookid");
        String quantity = request.getParameter("quantity");

        //得到當(dāng)前用戶的購(gòu)物車
        Cart cart = (Cart) request.getSession().getAttribute("cart");


        try {

            //調(diào)用BusinessService的方法去修改對(duì)應(yīng)的數(shù)據(jù)
            BusinessService businessService = new BusinessService();
            businessService.updateQuantity(id, cart, quantity);

            //修改完再跳轉(zhuǎn)回去購(gòu)物車的頁(yè)面中
            request.getRequestDispatcher("/WEB-INF/listCart.jsp").forward(request, response);

        } catch (CartNotFoundException e) {
            e.printStackTrace();
            request.setAttribute("message", "購(gòu)物車是空的！");
            request.getRequestDispatcher("message.jsp").forward(request, response);
        }

BusinessService增添了updateQuantity()方法

    public void updateQuantity(String id, Cart cart, String quantity) throws CartNotFoundException {


        //如果用戶是直接訪問DeleteCartBook的Servlet的，在session中是沒有cart這個(gè)屬性的！
        //告訴用戶購(gòu)物車是空的
        if (cart == null) {
            throw new CartNotFoundException("購(gòu)物車為空");
        }


        //通過書的id獲取得到購(gòu)物車的購(gòu)物項(xiàng)，再修改購(gòu)物項(xiàng)的數(shù)量即可?。ㄒ?yàn)闀膇d和獲取購(gòu)物項(xiàng)的關(guān)鍵字是一致的?。?        cart.getBookMap().get(id).setQuantity(Integer.parseInt(quantity));

    }

效果如下gif

清空購(gòu)物車

清空購(gòu)物車的做法和上面是類似的！也是首先通過javaScript代碼詢問用戶是否要清空，如果要清空就跳轉(zhuǎn)到相對(duì)應(yīng)的Servlet中把購(gòu)物車的數(shù)據(jù)清空了！

在清空購(gòu)物車的鏈接上綁定事件

    
        清空購(gòu)物車

javaScript代碼做邏輯判斷

        function clearCart() {

            var b = window.confirm("你確定要清空購(gòu)物車嗎？");

            //如果用戶確定，就跳轉(zhuǎn)到相對(duì)應(yīng)的Servlet上
            if(b) {
                return true;
            }else {
                return false;
            }
        }

編寫ClearCart代碼

        //得到用戶相對(duì)應(yīng)的購(gòu)物車
        Cart cart = (Cart) request.getSession().getAttribute("cart");

        //調(diào)用相對(duì)應(yīng)BusinessService的方法
        BusinessService businessService = new BusinessService();

        try {

            //清空購(gòu)物車【實(shí)際上就是清空購(gòu)物車的Map集合中的元素】
            businessService.clearCart(cart);

            //返回給購(gòu)物車顯示頁(yè)面
            request.getRequestDispatcher("/WEB-INF/listCart.jsp").forward(request, response);

        } catch (CartNotFoundException e) {
            e.printStackTrace();
            request.setAttribute("message", "購(gòu)物車是空的！");
            request.getRequestDispatcher("/message.jsp").forward(request, response);
        }

在BusinessService中添加清空購(gòu)物車功能

    public void clearCart(Cart cart) throws CartNotFoundException {

        //如果用戶是直接訪問DeleteCartBook的Servlet的，在session中是沒有cart這個(gè)屬性的！
        //告訴用戶購(gòu)物車是空的
        if (cart == null) {
            throw new CartNotFoundException("購(gòu)物車為空");
        }

        //清空所有的購(gòu)物項(xiàng)
        cart.getBookMap().clear();


    }

效果：

總結(jié)

購(gòu)物車的應(yīng)該是一個(gè)以id作為key，以購(gòu)物項(xiàng)作為value的一個(gè)Map集合。這樣設(shè)計(jì)的話，我們?cè)陲@示商品的時(shí)候，就不會(huì)重復(fù)顯示同一種類型的商品了。

購(gòu)物項(xiàng)代表著該商品，并且應(yīng)該給予購(gòu)物項(xiàng) 數(shù)量和價(jià)錢的屬性。購(gòu)物項(xiàng)的價(jià)錢應(yīng)該是數(shù)量*單價(jià)

購(gòu)物車應(yīng)該提供把商品添加到購(gòu)物車的功能。當(dāng)然啦，購(gòu)物項(xiàng)代表著商品，所以首先要判斷該購(gòu)物車是否有同類的商品，如果有，直接在購(gòu)物項(xiàng)的數(shù)量上+1即可的。如果沒有，就設(shè)置該購(gòu)物項(xiàng)的屬性，并把購(gòu)物項(xiàng)添加到購(gòu)物車中

購(gòu)物車的總價(jià)就是所有購(gòu)物項(xiàng)的總價(jià)

無論是增刪改查購(gòu)物車的數(shù)據(jù)，其實(shí)就是操作這個(gè)集合

如果文章有錯(cuò)的地方歡迎指正，大家互相交流。習(xí)慣在微信看技術(shù)文章的同學(xué)，可以關(guān)注微信公眾號(hào):Java3y

云服務(wù)器 GPU云服務(wù)器 javaweb購(gòu)物系統(tǒng) javaweb購(gòu)物網(wǎng)站源碼 javaweb項(xiàng)目 jsp簡(jiǎn)單購(gòu)物車代碼

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/68548.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

ninefive

男|高級(jí)講師

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

TA的文章

秀的一批，那些你不得不知的 Python 殺手級(jí)框架！

閱讀 3031·2021-11-12 10:36
寶塔備份網(wǎng)站怎樣還原?如何自動(dòng)定時(shí)備份數(shù)據(jù)庫(kù)或網(wǎng)站

閱讀 4772·2021-09-22 10:57
易探云：湖北十堰/安徽滁州vps,單線電信;1核2G5M僅36元/月,371元/年起

閱讀 1584·2021-09-22 10:53
web學(xué)習(xí)筆記15-移動(dòng)端地址選擇控件-v1.0簡(jiǎn)單版

閱讀 2673·2019-08-30 15:55
bootstrap datetimepicker日期插件美化

閱讀 3504·2019-08-29 17:00
仿segmentfault-table橫向滾動(dòng)

閱讀 3362·2019-08-29 16:36
css實(shí)現(xiàn)元素水平垂直居中

閱讀 2478·2019-08-29 13:46
js設(shè)計(jì)模式 --- 組合設(shè)計(jì)模式

閱讀 1356·2019-08-26 11:45

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

資訊專欄INFORMATION COLUMN

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

購(gòu)物車【JavaWeb小項(xiàng)目、簡(jiǎn)單版】

購(gòu)物車顯示頁(yè)面

您還沒有購(gòu)買過任何的書籍呀！

相關(guān)文章

Java3y文章目錄導(dǎo)航

**【JavaWeb】圖書管理系統(tǒng)【總結(jié)】**

JavaWEB開發(fā)01——HTML

**(原創(chuàng))2021基于jsp、javaweb、ssm網(wǎng)上商城定制版v2.2**

JavaWEB開發(fā)02——CSS&JS

發(fā)表評(píng)論

0條評(píng)論

ninefive

男|高級(jí)講師

TA的文章

秀的一批，那些你不得不知的 Python 殺手級(jí)框架！

寶塔備份網(wǎng)站怎樣還原?如何自動(dòng)定時(shí)備份數(shù)據(jù)庫(kù)或網(wǎng)站

易探云：湖北十堰/安徽滁州vps,單線電信;1核2G5M僅36元/月,371元/年起

web學(xué)習(xí)筆記15-移動(dòng)端地址選擇控件-v1.0簡(jiǎn)單版

bootstrap datetimepicker日期插件美化

仿segmentfault-table橫向滾動(dòng)

css實(shí)現(xiàn)元素水平垂直居中

js設(shè)計(jì)模式 --- 組合設(shè)計(jì)模式

最新活動(dòng)

書籍編號(hào)	名稱	作者	詳細(xì)信息	價(jià)格
${me.key}	${me.value.name}	${me.value.author}	${me.value.description}	${me.value.price}

書籍編號(hào)	名稱	數(shù)量	小計(jì)	操作
${me.key}	${me.value.book.name}	${me.value.quantity}	${me.value.price}	刪除
清空購(gòu)物車		合計(jì)：		${cart.price}

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

購(gòu)物車【JavaWeb小項(xiàng)目、簡(jiǎn)單版】

購(gòu)物車顯示頁(yè)面

您還沒有購(gòu)買過任何的書籍呀！

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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

您還沒有購(gòu)買過任何的書籍呀！