大项目之网上书城(七)——书页面以及加入购物车Servlet
程序员文章站
2022-06-28 19:27:51
咳咳,那么说改动,就是完善了下书的显示页面,同时完善了下各分类的主页,还有写了个添加图书到购物车的Servlet。还有就是给所有的页面的body都加了个width:1400px;margin:0 auto;也就是把整体居中,并且把宽度固定。因为今天去机房,电脑比我笔记本宽,页面显示就很丑。于是干脆固... ......
大项目之网上书城(七)——书页面以及加入购物车servlet
主要改动
时间不多是常事啊,话说今天去机房打的代码,可能是因为桌子比较低(还是高?)总之很不适应,敲了几个小时之后背疼得厉害。。
咳咳,那么说改动,就是完善了下书的显示页面,同时完善了下各分类的主页,还有写了个添加图书到购物车的servlet。还有就是给所有的页面的body都加了个width:1400px;margin:0 auto;也就是把整体居中,并且把宽度固定。因为今天去机房,电脑比我笔记本宽,页面显示就很丑。于是干脆固定下。哦,对了,还在数据库加了个事件,每天凌晨1点自动判断每本书是否是新书。
1.shu.jsp
代码
这个是服装类图书的shu.jsp,其他分类的类似。都是复制粘贴加小修。
<%@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() %> 元 <font style="color:rgba(0,0,0,0.6);font-size:24px;"><del>原价:<%double price = (int)(book.getprice()*1.4)-0.01; %><%=price %> 元</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> <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
代码
同样只放服装类图书的主页。
<%@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文件里摘出来的,不知道能不能行,我本身对事件不是太了解。
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> " +"<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); } }
效果图
上一篇: 汉武帝采纳董仲舒理论,为什么却不重用他?