zoukankan html css js c++ java

大项目之网上书城（七）——书页面以及加入购物车Servlet

大项目之网上书城（七）——书页面以及加入购物车Servlet

主要改动

时间不多是常事啊，话说今天去机房打的代码，可能是因为桌子比较低（还是高？）总之很不适应，敲了几个小时之后背疼得厉害。。

咳咳，那么说改动，就是完善了下书的显示页面，同时完善了下各分类的主页，还有写了个添加图书到购物车的Servlet。还有就是给所有的页面的body都加了个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%;
		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;1400px;margin:0 auto">
<!-- 调用头部页面 -->
<div style="100%;height:100px;float:left">
<jsp:include page="/client/head.jsp"></jsp:include>
</div>
<!-- 通用内容体大小 -->
<div style="70%;height:886px;float:left;margin-left:15%;">
	<!-- 二级导航 -->
	<jsp:include page="/client/head2.jsp"></jsp:include>	
	<!-- 通用界面 -->
	<div style="100%;height:800px;float:left;margin-top:2%;background-color:#ccc;">
		<div style="100%;height:48%;float:left;margin-top:2%;margin-left:2%;">
			<div style="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="100%;"/>
			</div>
			<div style="60%;margin-left:8%;height:100%;float:left">
				<h2 style="margin-left:2%;float:left;94%"><%=book.getBook_name() %>(一本你不容错过的好书！)</h2>
				<p style="margin-left:2%;float:left;94%;height:30%;">详情：<%=book.getDescribtion() %><a style="margin-left:2%;" href="./">点击</a>查看更多同类好书！</p>
				<h2 style="margin-left:2%;margin-top:1%;float:left;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;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;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="96%;height:40%;float:left;margin-top:2%;margin-left:2%;">
			<div style="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="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="100%;height:100%" id="re1"/>
				</div>
				<div class="inc">
					<img alt="图书" src="${pageContext.request.contextPath}/XinShuImg?shu=2" style="100%;height:100%" id="re2"/>
				</div>
				<div class="inc">
					<img alt="图书" src="${pageContext.request.contextPath}/XinShuImg?shu=3" style="100%;height:100%" id="re3"/>
				</div>
				<div class="inc">
					<img alt="图书" src="${pageContext.request.contextPath}/XinShuImg?shu=4" style="100%;height:100%" id="re4"/>
				</div>
				<div class="inc">
					<img alt="图书" src="${pageContext.request.contextPath}/XinShuImg?shu=5" style="100%;height:100%" id="re5"/>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 调用底部页面 -->
<div style="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%;
		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;1400px;margin:0 auto">
<!-- 调用头部页面 -->
<div style="100%;height:100px;float:left">
<jsp:include page="/client/head.jsp"></jsp:include>
</div>
<!-- 通用内容体大小 -->
<div style="70%;height:886px;float:left;margin-left:15%;">
	<!-- 二级导航 -->
	<jsp:include page="/client/head2.jsp"></jsp:include>	
	<img id="a1">
	<!-- 通用界面 -->
	<div style="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="100%;height:100%;float:left;"/>
			</div>
				<%
			};
		%>
	</div>
</div>
<!-- 调用底部页面 -->
<div style="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>
" + 
					"<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;240px;background-color:rgba(145, 162, 196, 0.9);border:1px;text-align:center;"id="quit1">
" + 
					"	<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>
" + 
					"</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);
	}

}

效果图

查看全文

相关阅读:
CentOS 安装 nginx 教程
 CentOS 安装 NETCore 教程
 Bootstrap Blazor 组件介绍 Table （三）列数据格式功能介绍
 Net Core 一个简单的封装，缓存表达式树去生成反射的调用
 c#缩放图片
 .net5创建sqlite数据库文件
 使用C#处理图片
 Python enumerate()函数
 在R语言中，使用类似Python原生字符串的方式处理路径
 利用BAT脚本生成空文件夹

原文地址：https://www.cnblogs.com/zhangA/p/11061871.html