大项目之网上书城(七)——书页面以及加入购物车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() %>&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

代码

同样只放服装类图书的主页。

<%@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>&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);
} }

效果图

大项目之网上书城(七)——书页面以及加入购物车Servlet的更多相关文章

  1. 大项目之网上书城(六)——个人页面和书页面Demo

    目录 大项目之网上书城(六)--个人页面和书页面Demo 主要改动 1.user.jsp 代码 效果图 user.js 代码 3.shu.jsp 代码 效果图 4.其他小改动 LoginServlet ...

  2. 大项目之网上书城(九)——订单Demo

    目录 大项目之网上书城(九)--订单Demo 主要改动 1.OrderServiceImpl 代码 2.OrderDaoImpl 代码 3.OrderitemDaoImpl 代码 4.orderite ...

  3. 大项目之网上书城(八)——数据库大改&添加图书

    目录 大项目之网上书城(八)--数据库大改&添加图书 主要改动 1.数据库新增表 代码 2.数据库新增触发器 3.其他对BookService和BookDao的修改 代码 4.addBook. ...

  4. 大项目之网上书城(五)——主页(End)

    目录 大项目之网上书城(五)--主页(End) 主要改动 1.主页(终于完成啦) 完整代码 效果图 2.head.jsp的小改动 代码 3.login.jsp ###代码 效果图 4.login.js ...

  5. Apicloud_(项目)网上书城03_拓展模块实现

    Apicloud_(项目)网上书城01_前端页面开发 传送门 Apicloud_(项目)网上书城02_后端数据获取 传送门 Apicloud_(项目)网上书城03_拓展模块实现 传送门 实现商品详情页 ...

  6. Apicloud_(项目)网上书城02_后端数据获取

    Apicloud_(项目)网上书城01_前端页面开发 传送门 Apicloud_(项目)网上书城02_后端数据获取 传送门 Apicloud_(项目)网上书城03_拓展模块实现 传送门 ApiClou ...

  7. Apicloud_(项目)网上书城01_前端搭建

    [本文皆在记录自己开发Apicloud项目过程,不具备教学水平性文章] 参考书籍<30天App开发从0到1> Apicloud_(项目)网上书城01_前端页面开发 传送门 Apicloud ...

  8. C#编译器优化那点事 c# 如果一个对象的值为null,那么它调用扩展方法时为甚么不报错 webAPI 控制器(Controller)太多怎么办? .NET MVC项目设置包含Areas中的页面为默认启动页 (五)Net Core使用静态文件 学习ASP.NET Core Razor 编程系列八——并发处理

    C#编译器优化那点事   使用C#编写程序,给最终用户的程序,是需要使用release配置的,而release配置和debug配置,有一个关键区别,就是release的编译器优化默认是启用的.优化代码 ...

  9. 2014年基于Raspberry Pi的5大项目

    2014年基于Raspberry Pi的5大项目   Raspberry Pi(即树莓派)是一款基于Linux系统(Debian.ArchLinux)的单板机计算机,它只有一张信用卡大小,可用于电子表 ...

随机推荐

  1. 用UNIX的cat命令用于给文本加行号 (转载)

    转载:http://blog.csdn.net/vicant/article/details/2317721 有时候需要给文本加上行号,用UNIX的cat命令可以进行这项工作. cat命令的用法如下: ...

  2. 多选下拉框(select 下拉多选)

    方法一:使用multiple-select.js和multiple-select .css实现 HTML代码: <select id='checkedLevel' style="wid ...

  3. docker保存对容器的修改

    我有一个Ubuntu的镜像用命令docker run -i -t -v /home/zzq/app/:/mnt/software/ 0ef2e08ed3fa /bin/bash登录进去发现没vi编辑器 ...

  4. 《windows核心编程系列》十六谈谈内存映射文件

    内存映射文件允许开发人员预订一块地址空间并为该区域调拨物理存储器,与虚拟内存不同的是,内存映射文件的物理存储器来自磁盘中的文件,而非系统的页交换文件.将文件映射到内存中后,我们就可以在内存中操作他们了 ...

  5. hdu 5335 Walk Out (搜索)

    题目链接: hdu 5335 Walk Out 题目描述: 有一个n*m由0 or 1组成的矩形,探险家要从(1,1)走到(n, m),可以向上下左右四个方向走,但是探险家就是不走寻常路,他想让他所走 ...

  6. [转]linq to sql (Group By/Having/Count/Sum/Min/Max/Avg操作符)

    本文转自:http://www.cnblogs.com/jack-liang/archive/2011/03/22/1991554.html Group By/Having操作符 适用场景:分组数据, ...

  7. AJPFX关于构造器的总结

    构造器        构造器定义        构造器作用        构造器特点        构造器修饰符        默认构造器        构造器重载        构造器和一般函数的区 ...

  8. html5表单新增元素与属性2

    1.标签的control属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. <script> function setValue() ...

  9. ECMAScript6之箭头函数

    2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015. 函数作为js语言中的一等公民.自然Es6中推出的箭头函数(=>)也是备受瞩目的.那我们接下来看下传 ...

  10. pandas之groupby分组与pivot_table透视表

    zhuanzi: https://blog.csdn.net/qq_33689414/article/details/78973267 pandas之groupby分组与pivot_table透视表 ...