大項目之網上書城（七）——書頁面以及加入購物車Servlet

時間 2019-12-10

原文原文鏈接

目錄javascript

大項目之網上書城（七）——書頁面以及加入購物車Servlet

大項目之網上書城（七）——書頁面以及加入購物車Servlet

主要改動

時間很少是常事啊，話說今天去機房打的代碼，多是由於桌子比較低（仍是高？）總之很不適應，敲了幾個小時以後背疼得厲害。。css

咳咳，那麼說改動，就是完善了下書的顯示頁面，同時完善了下各分類的主頁，還有寫了個添加圖書到購物車的Servlet。還有就是給全部的頁面的body都加了個width:1400px;margin:0 auto;也就是把總體居中，而且把寬度固定。由於今天去機房，電腦比我筆記本寬，頁面顯示就很醜。因而乾脆固定下。哦，對了，還在數據庫加了個事件，天天凌晨1點自動判斷每本書是不是新書。html

1.shu.jsp

代碼

這個是服裝類圖書的shu.jsp，其餘分類的相似。都是複製粘貼加小修。java

<%@page import="java.util.HashMap"%>
<%@page import="java.util.Map"%>
<%@page import="cn.edu.bdu.mc.utils.CookieUtil"%>
<%@page import="cn.edu.bdu.mc.services.impls.BookServiceImpl"%>
<%@page import="cn.edu.bdu.mc.services.BookService"%>
<%@page import="cn.edu.bdu.mc.beans.Book"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <% Map<String,String>map = new HashMap<String,String>();
    map.put("clothing","服裝");
    map.put("food","食品");
    map.put("net_literature","網絡文學");
    map.put("pai","好書拍賣");
    map.put("residence","家居");
    map.put("sport","運動戶外");
    map.put("nursery","育嬰童");
    BookService bookService = new BookServiceImpl();
    int er_id = Integer.parseInt(request.getParameter("er_id"));
    Book book = bookService.findBookByClazzAndEr_id("clothing",er_id);
    bookService.click(book.getBook_id());
    Cookie[] cookies = request.getCookies();
    Cookie cookie = CookieUtil.findCookieByName(cookies, "bookHistory");
    cookie.setValue(book.getBook_id()+"#"+cookie.getValue());
    cookie.setPath("/bookstore");
    if(cookie.getValue().split("#").length>5){
        cookie.setValue(cookie.getValue().substring(0,cookie.getValue().lastIndexOf("#")));
    }
    response.addCookie(cookie);
    %>
<title><%=book.getBook_name() %></title>
<style type="text/css">
    .inc{
        float:left;
        margin-left:3%;
        margin-top:1%;
        width:16%;
        height:90%;
        background-color:rgba(160,128,255,0.8);
    }
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/client/js/shu.js"></script>
</head>
<body style="background-color:#bbb;width:1400px;margin:0 auto">
<!-- 調用頭部頁面 -->
<div style="width:100%;height:100px;float:left">
<jsp:include page="/client/head.jsp"></jsp:include>
</div>
<!-- 通用內容體大小 -->
<div style="width:70%;height:886px;float:left;margin-left:15%;">
    <!-- 二級導航 -->
    <jsp:include page="/client/head2.jsp"></jsp:include>    
    <!-- 通用界面 -->
    <div style="width:100%;height:800px;float:left;margin-top:2%;background-color:#ccc;">
        <div style="width:100%;height:48%;float:left;margin-top:2%;margin-left:2%;">
            <div style="width:30%;height:100%;background-color:rgba(111,123,145,0.8);float:left">
                <img alt="圖書" src="${pageContext.request.contextPath}/ShuImgById?book_id=<%=book.getBook_id() %>" style="width:100%;"/>
            </div>
            <div style="width:60%;margin-left:8%;height:100%;float:left">
                <h2 style="margin-left:2%;float:left;width:94%"><%=book.getBook_name() %>(一本你不容錯過的好書！)</h2>
                <p style="margin-left:2%;float:left;width:94%;height:30%;">詳情：<%=book.getDescribtion() %><a style="margin-left:2%;" href="./">點擊</a>查看更多同類好書！</p>
                <h2 style="margin-left:2%;margin-top:1%;float:left;width:94%;color:rgba(200,0,0,0.8);text-align:center;background-color:rgba(64,123,233,0.4);height:18%;line-height:200%;">驚爆價：<%=book.getPrice() %>&nbsp;元&nbsp;&nbsp;&nbsp;&nbsp;
                    <font style="color:rgba(0,0,0,0.6);font-size:24px;"><del>原價：<%double price = (int)(book.getPrice()*1.4)-0.01; %><%=price %>&nbsp;元</del></font>
                </h2>
                <font style="margin-left:2%;margin-top:1%;float:left;width:94%;font-size:16px;">類別：<%=map.get(book.getClazz()) %></font>
                <font style="margin-left:2%;margin-top:1%;float:left;font-size:16px;">點擊量：<%=book.getClick_num() %></font>
                <font style="margin-left:2%;margin-top:1%;float:left;font-size:16px;">購買量：<%=book.getBuy_num() %></font>
                <font style="margin-left:2%;margin-top:1%;float:left;font-size:16px;">熱度：<%=book.getRe_du() %></font>
                <font style="margin-left:2%;margin-top:1%;float:left;width:94%;font-size:16px;">剩餘數量：<%=book.getCount() %></font>
                <% if(request.getSession().getAttribute("user")==null){ %>
                    <font style="margin-left:2%;margin-top:1%;float:left;"><a href="${pageContext.request.contextPath}/client/login.jsp">登陸</a>後可購買書籍。</font>
                <% }else{ %>
                    <a style="margin-left:2%;margin-top:1%;float:left;" href="${pageContext.request.contextPath}/AddIntoCart?book_id=<%=book.getBook_id() %>">加入購物車</a>&nbsp;&nbsp;&nbsp;&nbsp;
                    <a style="margin-left:2%;margin-top:1%;float:left;" href="${pageContext.request.contextPath}/NewOrder?book_id_list=<%=book.getBook_id() %>">購買</a>
                <% } %>
            </div>
        </div>
        <div style="width:96%;height:40%;float:left;margin-top:2%;margin-left:2%;">
            <div style="width:100%;height:15%;text-align:center;line-height:50px;background-color:rgba(85,107,47,0.8);float:left">
                <font color="#ddd" style="font-size:20px;">爲您推薦熱門書籍</font>
            </div>
            <div style="width:100%;height:85%;text-align:center;line-height:45px;background-color:rgba(85,139,84,0.8);float:left">
                <div class="inc" style="margin-left:4%">
                    <img alt="圖書" src="${pageContext.request.contextPath}/XinShuImg?shu=1" style="width:100%;height:100%" id="re1"/>
                </div>
                <div class="inc">
                    <img alt="圖書" src="${pageContext.request.contextPath}/XinShuImg?shu=2" style="width:100%;height:100%" id="re2"/>
                </div>
                <div class="inc">
                    <img alt="圖書" src="${pageContext.request.contextPath}/XinShuImg?shu=3" style="width:100%;height:100%" id="re3"/>
                </div>
                <div class="inc">
                    <img alt="圖書" src="${pageContext.request.contextPath}/XinShuImg?shu=4" style="width:100%;height:100%" id="re4"/>
                </div>
                <div class="inc">
                    <img alt="圖書" src="${pageContext.request.contextPath}/XinShuImg?shu=5" style="width:100%;height:100%" id="re5"/>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 調用底部頁面 -->
<div style="width:100%;height:60px;float:left">
<jsp:include page="/client/foot.jsp"></jsp:include>
</div>
</body>
</html>

效果圖

2.shu.js

代碼

$(function(){
    $("img").each(function(){
        $(this).css("height",$(this).parent().css("height"));
    });
    $("#re1").click(function(){
        $.post("../../XinShuMing?shu=1",function(data){
            window.location.href="../"+data.split("@")[2];
        });
    });
    $("#re2").click(function(){
        $.post("../../XinShuMing?shu=2",function(data){
            window.location.href="../"+data.split("@")[2];
        });
    });
    $("#re3").click(function(){
        $.post("../../XinShuMing?shu=3",function(data){
            window.location.href="../"+data.split("@")[2];
        });
    });
    $("#re4").click(function(){
        $.post("../../XinShuMing?shu=4",function(data){
            window.location.href="../"+data.split("@")[2];
        });
    });
    $("#re5").click(function(){
        $.post("../../XinShuMing?shu=5",function(data){
            window.location.href="../"+data.split("@")[2];
        });
    });
});

3.index.jsp

代碼

一樣只放服裝類圖書的主頁。mysql

<%@page import="cn.edu.bdu.mc.services.impls.BookServiceImpl"%>
<%@page import="cn.edu.bdu.mc.beans.Book"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>主頁</title>
<style type="text/css">
    .inc{
        float:left;
        margin-left:3%;
        margin-top:4%;
        width:16%;
        height:25%;
        background-color:rgba(160,128,255,0.8);
    }
</style>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
        $("img").click(function(){
            var book_id=$(this)[0].src.split("=")[1];
            if(book_id!=0){
                $.post("../../FindPageById?book_id="+book_id,function(data){
                    window.location.href=data.split("/")[1];
                });
            }
        });
});
</script>
</head>
<body style="background-color:#bbb;width:1400px;margin:0 auto">
<!-- 調用頭部頁面 -->
<div style="width:100%;height:100px;float:left">
<jsp:include page="/client/head.jsp"></jsp:include>
</div>
<!-- 通用內容體大小 -->
<div style="width:70%;height:886px;float:left;margin-left:15%;">
    <!-- 二級導航 -->
    <jsp:include page="/client/head2.jsp"></jsp:include>    
    <img id="a1">
    <!-- 通用界面 -->
    <div style="width:100%;height:800px;float:left;margin-top:2%;background-color:#ccc;">
        <% List<Book>list = new BookServiceImpl().findBookByClazz("clothing");
            int i=1;
            for(Book book:list){
                if(i>15){break;}%>
            <div class="inc" <%if(i%5==1){ %>style="margin-left:4%"<%} %>>
                <img alt="圖書" src="${pageContext.request.contextPath}/ShuImgById?book_id=<%=book.getBook_id() %>" style="width:100%;height:100%;float:left;"/>
            </div>
                <%
            };
        %>
    </div>
</div>
<!-- 調用底部頁面 -->
<div style="width:100%;height:60px;float:left">
<jsp:include page="/client/foot.jsp"></jsp:include>
</div>
</body>
</html>

效果圖

4.FindBookByClazz

代碼

@Override
    public List<Book> findBookByClazz(String clazz) throws SQLException {
        List<Book> list = dao.findAllBook();
        List<Book> newList = new ArrayList<>();
        //lambda表達式，emmmm，的確可讀性不太好的樣子。
        list.forEach(book->{if(book.getClazz().equals(clazz)){newList.add(book);}});
        /*
            至關於
            for (Book book : newList) {
                if(book.getClazz().equals(clazz)){
                    newList.add(book);
                }
            }
        */
        return newList;
    }

5.mysql判斷是否新書事件

代碼

一樣是從sql文件裏摘出來的，不知道能不能行，我自己對事件不是太瞭解。jquery

DELIMITER ;;
CREATE DEFINER=`root`@`localhost` EVENT `temp_event` ON SCHEDULE EVERY 1 DAY STARTS '2019-06-21 01:00:00' ON COMPLETION PRESERVE ENABLE DO update book set is_new=0 where TO_DAYS(now())-TO_DAYS(book.insert_date)>2
;;
DELIMITER ;

6.AddIntoCartServlet

代碼

package cn.edu.bdu.mc.servlets;

import java.io.IOException;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import cn.edu.bdu.mc.beans.Book;
import cn.edu.bdu.mc.daos.impls.BookDaoImpl;
import cn.edu.bdu.mc.services.impls.BookServiceImpl;

/**
 * Servlet implementation class AddIntoCartServlet
 */
@WebServlet("/AddIntoCart")
public class AddIntoCartServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public AddIntoCartServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            int book_id = Integer.parseInt(request.getParameter("book_id"));
            HttpSession session = request.getSession();
            List<Book> cart = (List<Book>) session.getAttribute("cart");
            if(cart==null) {
                cart = new ArrayList<Book>();
                session.setAttribute("cart", cart);
            }
            cart.add(new BookDaoImpl().findBookById(book_id));
            String htmlCode="<!DOCTYPE html>\n" + 
                    "<html>"
                    + "<head>"
                    + "<link rel=\"stylesheet\" href=\""+request.getContextPath()+"/bootstrap-3.3.7-dist/css/bootstrap.min.css\">"
                    + "</head>"
                    + "<body>"
                    + "<div style=\"position:absolute;left:44%;top:46%;height:100px;width:240px;background-color:rgba(145, 162, 196, 0.9);border:1px;text-align:center;\"id=\"quit1\">\r\n" + 
                    "   <h3>加入購物車成功！</h3><a class=\"btn btn-info\" href=\""+request.getContextPath()+"/client/index.jsp\">繼續購買</a>&nbsp;&nbsp;&nbsp;&nbsp;"
                            +"<a class=\"btn btn-info\" href=\""+request.getContextPath()+"/client/cart.jsp\">查看購物車</a>\n" + 
                    "</div>"
                    + "</body>"
                    + "</html>";
            response.getWriter().write(htmlCode);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}