圖書商城 --- 代碼回溯2

前端顯示界面

左側(cè)書籍列表

因?yàn)槲覀兊乃蟹诸惗际且獜暮笈_添加的分類所拿到，所以同理要先進(jìn)入到相應(yīng)的servlet，然后轉(zhuǎn)發(fā)請求,圖書顯示也同理

<body>
<%@include file="top.jsp" %>
<div class="container">
    <div class="col-md-3">
        <jsp:include page="/category"></jsp:include>
    </div>
    <div class="col-md-9">
        <jsp:include page="/bookshow"></jsp:include>
    </div>
</div>

</body>

這里要注意因?yàn)槭褂玫氖莿討B(tài)引入，而且引入的是servlet鏈接，所以后面的請求轉(zhuǎn)發(fā)應(yīng)寫include而不是forword

  
@WebServlet(name = "catagoryshow",urlPatterns = "/category")
public class catagoryshow extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        CategoryService cs = new CategoryServiceImpl();
        List<Category> lc = cs.ShowAllCategory();
        req.setAttribute("category",lc);
        req.getRequestDispatcher("/FontMain/categoryleft.jsp").include(req,resp);
    }
}
  • 顯示圖書
<div class="">
    <c:forEach items="${requestScope.books}" var="book">
        <div class="bookitem panel panel-primary">
            <div class="panel-heading">書名：${book.name}</div>
            <div class="panel-body">
                <div class="col-sm-6">
                    <img class="img-responsive" src="../BookImage/${book.image_id}">
                </div>
                <div class="col-sm-6">
                    <ul class="list-group">
                        <li class="list-group-item">書名：${book.name}</li>
                        <li class="list-group-item">作者：${book.author}</li>
                        <li class="list-group-item">描述：${book.description}</li>
                        <li class="list-group-item">價格${book.price}</li>
                    </ul>
                </div>
            </div>
            <input class="btn btn-primary " type="button" onclick="InsertCart(this);" value="加入購物車">
            <p class="hidden">${book.id}</p>
        </div>
    </c:forEach>
</div>

效果


image.png

用戶登錄注冊

前端頁面

  • 登錄以及注冊
   <div class="login">
        <form action="/registerlogin">
            <input type="hidden" name="oper" value = "login">
            <div class="form-group">
                <label>賬號</label>
                <input type="text" class="form-control" placeholder="" value = ""name = "luname">
            </div>
            <div class="form-group">
                <label>密碼</label>
                <input type="password" class="form-control" placeholder="" value="" name="lpwd">
            </div>

            <button type="submit" class="btn btn-primary">登錄</button>
            <span  class="glyphicon glyphicon-remove exit"></span>
            <c:if test="${!empty(requestScope.message2)}">
                <p class="result2">用戶名或密碼錯誤</p>
            </c:if>

        </form>
    </div>
    <div class="register">
        <form id = "registerpanel" action="/registerlogin">
            <input type="hidden" name="oper" value = "register">
            <div class="form-group">
                <label>賬號</label>
                <input type="text" class="form-control" value = ""id = "zhanghao" name = "uname"placeholder="">
            </div>
            <div class="form-group">
                <label>密碼</label>
                <input type="password" class="form-control" value = ""id = "pwd"placeholder="">
            </div>
            <div class="form-group">
                <label>確認(rèn)密碼</label>
                <input type="password" class="form-control" id = "checkpwd" value = ""name = "pwd"placeholder="">
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">郵箱地址</label>
                <input type="email" class="form-control" id="exampleInputEmail1" name = "email" value = ""placeholder="Email">
            </div>
            <button type="submit" class="btn btn-primary">注冊</button>
            <span  class="glyphicon glyphicon-remove exit"></span>
            <c:if test="${!empty(requestScope.message)}">
                <p class="result">已注冊成功</p>
            </c:if>
        </form>
    </div>
  • 遮罩層
    <span class="cover"></span>

-js

  if(document.getElementById("myname")){
        document.getElementById("loginbutton").style.display = "none";
        document.getElementById("registerbutton").style.display = "none";

    }
    function Toactive(obj) {
        obj.classList.add("active");
        console.log(obj);
    }
    document.getElementById("loginbutton").onclick = function () {
        var mini_login = document.getElementsByClassName("login")[0];
        var cover = document.getElementsByClassName("cover")[0];
        mini_login.style.display = "block";
        cover.style.display = "block";
    }
    document.getElementById("registerbutton").onclick = function () {
        var mini_register = document.getElementsByClassName("register")[0];
        var cover = document.getElementsByClassName("cover")[0];
        mini_register.style.display = "block";
        cover.style.display = "block";
    }
   document.getElementsByClassName("exit")[0].onclick = function () {
        var mini_login = document.getElementsByClassName("login")[0];
        var cover = document.getElementsByClassName("cover")[0];
        mini_login.style.display = "none";
        cover.style.display = "none";
    }
    document.getElementsByClassName("exit")[1].onclick = function () {
        var mini_register = document.getElementsByClassName("register")[0];
        var cover = document.getElementsByClassName("cover")[0];
        mini_register.style.display = "none";
        cover.style.display = "none";
    }

完成效果圖


denglx.gif

登錄servlet

同樣 我們將其封裝成了函數(shù)

  private void Login(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("登錄函數(shù)運(yùn)行");
        String luname = req.getParameter("luname");
        String lpwd = req.getParameter("lpwd");
        if(luname.equals("admin")&&lpwd.equals("admin")){
            req.getRequestDispatcher("/BackMain/AddCategory.jsp").forward(req,resp);
        }
        User u = new User();
        u.setUname(luname);
        u.setPwd(lpwd);
        System.out.println(u);
        User nu = us.CheckUser(u);
        if(nu !=null){
            HttpSession hs=req.getSession();
            hs.setAttribute("user",nu);
            resp.sendRedirect("/FontMain/Index.jsp");
        }else{
            req.setAttribute("message2",0);
            req.getRequestDispatcher("/FontMain/Index.jsp").forward(req,resp);
        }
    }

如果登錄成功就將用戶信息 存儲到session中,并在前臺隱藏掉登錄和刪除，然后顯示用戶名

 <c:if test="${!empty(sessionScope.user)}">
                    <span>歡迎     </span>
                    <span id="myname">${sessionScope.user.uname}</span>
                    <a href="/registerlogin?oper=exit">退出</a>
                </c:if>

否則就傳一個message到前臺表示登錄不成功

 <c:if test="${!empty(requestScope.message2)}">
                <p class="result2">用戶名或密碼錯誤</p>
            </c:if>

購物車設(shè)計

為了防止購物車單項(xiàng)重復(fù) 并且 方便刪除項(xiàng)目
我們新建一個購物車item表示購物車單項(xiàng)

cartitem

public class CartItem {
    private Book book;
    private int number;
    private float price;

//各種get set
}

cart

public class Cart {
    private Map<Integer,CartItem> mc = new HashMap<>();
    //書籍id 和 購物項(xiàng)
    private float allprice;

    public void AddBook(Book book){
        CartItem cartItem = mc.get(book.id);
        if(cartItem ==null){
            cartItem = new CartItem();
            cartItem.setBook(book);
            cartItem.setNumber(1);
            mc.put(book.id,cartItem);
        }else{
            int currentnum =  cartItem.getNumber();
            cartItem.setNumber(++currentnum);
        }
    }

    public void DeleteItem(int bookid){
     mc.remove(bookid);
    }

    public Map<Integer, CartItem> getMc() {
        return mc;
    }

    public void setMc(Map<Integer, CartItem> mc) {
        this.mc = mc;
    }

    public float getPrice(){
          allprice = 0;
        for(int i:mc.keySet()){
           CartItem ci = mc.get(i);
           allprice += ci.getPrice();
        }
        return allprice;
    }

}

加入購物車操作

當(dāng)我們在前臺單擊加入購物車的時候，我們用ajax將數(shù)據(jù)傳入到bussiness servlet

   <input class="btn btn-primary " type="button" onclick="InsertCart(this);" value="加入購物車">

<script>
    function InsertCart(obj) {
        alert("已加入購物車");
        var bookid = obj.nextElementSibling.innerHTML;

        var ajax;
        if (window.XMLHttpRequest) {
            ajax = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            ajax = new ActiveXObject("Msxml2.XMLHTTP");
        }
        //復(fù)寫onreadystatechange函數(shù)
        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4) {
            }
            if (ajax.status == 404) {
            }
        }
        ajax.open("get", "/business?oper=addItem&bookid="+bookid);
        ajax.send(null);
    }
</script>

bussiness servlet

加入購物車前 我們需要判斷用戶是否登錄
如果沒有登錄 就在前臺傳回一個message

   HttpSession hs = req.getSession();
        User user  = (User)hs.getAttribute("user");
        if(user ==null){
            req.setAttribute("message","請先登錄后購買");
            req.getRequestDispatcher("/FontMain/Mycart.jsp").forward(req,resp);
        }

加入操作

 private void AddItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        HttpSession hs = req.getSession();
        Cart ct = (Cart)hs.getAttribute("cart");
        if( ct== null){
            ct = new Cart();
        }

        int bookid =  Integer.parseInt(req.getParameter("bookid"));
        BookService bs = new BookServiceImpl();
        Book book = bs.FindBook(bookid);
        ct.AddBook(book);

        hs.setAttribute("cart",ct);
    }

為了方便這里我們就不建數(shù)據(jù)庫了 ，直接將購物車的內(nèi)容放發(fā)到了session中，缺點(diǎn)是如果退出登錄購物車?yán)锏膬?nèi)容就會消失，優(yōu)點(diǎn)是:可以少寫一個dao層
所以用戶務(wù)必在退出的時候生成訂單 ，某種情況下可以促進(jìn)消費(fèi)

購物車顯示


        <c:forEach items="${sessionScope.cart.mc}" var="cartitem">
            <div class="container">
                <div class="col-sm-2">
                    <img class="img-responsive" src="../BookImage/${cartitem.value.book.image_id}">
                </div>
                <div class="col-sm-3">
                    <ul class="list-group">
                        <li class="list-group-item list-group-item-info">書名：${cartitem.value.book.name}</li>
                        <li class="list-group-item list-group-item-info">作者：${cartitem.value.book.author}</li>
                        <li class="list-group-item list-group-item-info">數(shù)量：${cartitem.value.number}</li>
                        <li class="list-group-item list-group-item-info">價錢：${cartitem.value.price}</li>
                    </ul>
                </div>
                <div class="col-sm-2">
                    <span class="glyphicon glyphicon-remove deleteitem" onclick="DeleteItem(this);"></span>
                    <div class="hidden">${cartitem.value.book.id}</div>
                </div>
            </div>
        </c:forEach>

刪除操作

這里我們類比后臺刪除圖書,同樣用ajax完成

 private void DeleteItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        HttpSession hs = req.getSession();
        Cart ct = (Cart)hs.getAttribute("cart");

        int itemid = Integer.parseInt(req.getParameter("itemid"));

        ct.DeleteItem(itemid);
        hs.setAttribute("cart",ct);
        resp.getWriter().write("總價："+String.valueOf(ct.getPrice()));
    }
gouwuche.gif

訂單

OrderItem

public class CartItem {
    private Book book;
    private int number;
    private float price;

    public Book getBook() {
        return book;
    }

    public void setBook(Book book) {
        this.book = book;
    }

    public int getNumber() {
        return number;
    }

    public void setNumber(int number) {
        this.number = number;
    }

    public float getPrice() {
        return number*book.getPrice();
    }

    public void setPrice(float price) {
        this.price = price;
    }

    @Override
    public String toString() {
        return "CartItem{" +
                "book=" + book +
                ", number=" + number +
                ", price=" + price +
                '}';
    }

    public CartItem() {
    }

    public CartItem(Book book, int number, float price) {
        this.book = book;
        this.number = number;
        this.price = price;
    }
}

表示購物車每一項(xiàng)

Order

public class Order {
    int id;
    private Date date;
    private float price;
    private boolean state;
    private int user_id;
    private Set<OrderItem> so = new HashSet<>();
//設(shè)置一個 Set
}

生成訂單

private void AddOrder(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        HttpSession hs = req.getSession();
        //拿到用戶id
        int user_id = Integer.parseInt(req.getParameter("user_id"));
        //從session中拿到購物車的數(shù)據(jù)
        Cart ct = (Cart)hs.getAttribute("cart");
        //拿到購物車中具體map數(shù)據(jù)
        Map<Integer, CartItem> cartitems = ct.getMc();
       //設(shè)置Set order
        Set<OrderItem> so = new HashSet<>();
//        Order order = new Order(0,new Date(),ct.getPrice(),false,user_id);
        Order order = new Order();
        order.setId(0);
        for(int i:cartitems.keySet()){
            CartItem ci = cartitems.get(i);
            OrderItem ot = new OrderItem(0,ci.getBook().getId(),order.getId(),ci.getNumber(),ci.getPrice());
            so.add(ot);
        }
        order.setSo(so);
        order.setDate(new Date());
        order.setPrice(ct.getPrice());
        order.setState(false);
        order.setUser_id(user_id);

        //將order放入od
        od.AddOrder(order);
        List<Order> lo = od.FindUserOrder(user_id);
        hs.setAttribute("orders", lo);
        resp.sendRedirect("/FontMain/MyOrder.jsp");
    }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容