zoukankan      html  css  js  c++  java

  • 大项目之网上书城（六）——个人页面和书页面Demo

    大项目之网上书城（六）——个人页面和书页面Demo

    目录

    主要改动

    今天时间依旧不是很多，，主要是今天思路不够丰富。勉强给个人页面设计了个banner，显示了下昵称。然后加了个浏览历史和推荐书籍。就没思路了。浏览历史通过cookie来完成，这个弄了超久！一直在想为啥明明是名字相同的cookie，为啥获取的值不一样，然后在浏览器上看了下Application里的cookies，才知道，原来他俩的path不同。。。然后果断改成功啦！

    1.user.jsp

    代码

    浏览历史的cookie会在用户登录的时候产生，初始为0#0#0#0#0

    以及本来还打算加个头像来着，想想还要改表，算了算了。。。同样被毙掉的还有昵称。

    <%@page import="cn.edu.bdu.mc.utils.CookieUtil"%>
<%@ 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>
<title>个人信息</title>
<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}/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/client/js/user.js"></script>
<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>
</head>
<body style="background-color:#bbb">
<c:if test="${user==null }">
	<jsp:forward page="login.jsp"></jsp:forward>
</c:if>
<!-- 是否退出？ -->
<div style="position:absolute;left:46%;top:46%;height:100px;200px;display:none;background-color:rgba(145, 162, 196, 0.9);border:1px;text-align:center;"id="quit1">
	<h3>是否要退出？</h3><a class="btn btn-info" href="${pageContext.request.contextPath }/Logout">是</a>&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-info" id="no">否</button>
</div>
<!-- 调用头部页面 -->
<div style="100%;height:100px;float:left">
<jsp:include page="/client/head.jsp"></jsp:include>
</div>
<!-- 通用内容体大小 -->
<div style="70%;height:720px;float:left;margin-left:15%;">
	<div style="100%;height:250px;float:left;background-image:url(img/banner.png);background-size:100% 100%;">
		<div style="margin-top:200px;margin-left:40px;float:left;300px">
			<font style="float:left">欢迎您，<a>${user.username }</a>！</font>
			<font style="float:left"><a href="#" id="quit">退出登录</a></font>
		</div>
	</div>
	<div style="100%;height:470px;float:left">
		<div style="100%;height:10%;text-align:center;line-height:45px;background-color:rgba(85,107,47,0.8)">
			<font color="#ddd" style="font-size:20px;">您看过的书籍</font>
		</div>
		<div style="100%;height:40%;text-align:center;line-height:45px;background-color:rgba(85,139,84,0.8)">
		<% String[] list = CookieUtil.findCookieByName(request.getCookies(), "bookHistory").getValue().split("#"); %>
			<div class="inc" style="margin-left:4%">
				<%if(!list[0].equals("0")){ %>
					<img alt="图书" src="${pageContext.request.contextPath}/ShuImgById?book_id=<%=list[0] %>" style="100%;height:100%" id="history1"/>
				<%}else{ %>
					<img alt="图书" style="100%;height:100%"/>
				<%} %>
			</div>
			<div class="inc">
				<%if(!list[1].equals("0")){ %>
					<img alt="图书" src="${pageContext.request.contextPath}/ShuImgById?book_id=<%=list[1] %>" style="100%;height:100%" id="history1"/>
				<%}else{ %>
					<img alt="图书" style="100%;height:100%"/>
				<%} %>
			</div>
			<div class="inc">
				<%if(!list[2].equals("0")){ %>
					<img alt="图书" src="${pageContext.request.contextPath}/ShuImgById?book_id=<%=list[2] %>" style="100%;height:100%" id="history1"/>
				<%}else{ %>
					<img alt="图书" style="100%;height:100%"/>
				<%} %>
			</div>
			<div class="inc">
				<%if(!list[3].equals("0")){ %>
					<img alt="图书" src="${pageContext.request.contextPath}/ShuImgById?book_id=<%=list[3] %>" style="100%;height:100%" id="history1"/>
				<%}else{ %>
					<img alt="图书" style="100%;height:100%"/>
				<%} %>
			</div>
			<div class="inc">
				<%if(!list[4].equals("0")){ %>
					<img alt="图书" src="${pageContext.request.contextPath}/ShuImgById?book_id=<%=list[4] %>" style="100%;height:100%" id="history1"/>
				<%}else{ %>
					<img alt="图书" style="100%;height:100%"/>
				<%} %>
			</div>
		</div>
		<div style="100%;height:10%;text-align:center;line-height:45px;background-color:rgba(85,107,47,0.8)">
			<font color="#ddd" style="font-size:20px;">为您推荐书籍</font>
		</div>
		<div style="100%;height:40%;text-align:center;line-height:45px;background-color:rgba(85,139,84,0.8)">
			<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 style="100%;height:60px;float:left">
<jsp:include page="/client/foot.jsp"></jsp:include>
</div>
</body>
</html>

    效果图

    点击退出账号后，

    user.js

    代码

    $(function(){
	$("#quit").click(function(){
		$("#quit1").css("display","block");
	});
	$("#no").click(function(){
		$("#quit1").css("display","none");
	});
	$("#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];
		});
	});
	$("#history1").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;
			});
		}
	});
	$("#history2").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;
			});
		}
	});
	$("#history3").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;
			});
		}
	});
	$("#history4").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;
			});
		}
	});
	$("#history5").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;
			});
		}
	});
});

    3.shu.jsp

    代码

    <%@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>
<title>空白</title>
</head>
<body style="background-color:#bbb">
<!-- 调用头部页面 -->
<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>	
	<!-- 通用界面 -->
	<% BookService bookService = new BookServiceImpl();
	int er_id = Integer.parseInt(request.getParameter("er_id"));
	Book book = bookService.findBookByClazzAndEr_id("clothing",er_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);
	%>
	<div style="100%;height:800px;float:left;margin-top:2%;background-color:#ccc;">
		书的通用界面，具体怎么显示再说吧。。。<br/>
		书名：<%=book.getBook_name() %><br/>
		价格：<%=book.getPrice() %><br/>
		类别：<%=book.getClazz() %><br/>
		点击量：<%=book.getClick_num() %><br/>
		购买量：<%=book.getBuy_num() %><br/>
		热度：<%=book.getRe_du() %><br/>
		剩余数量：<%=book.getCount() %><br/>
	</div>
</div>
<!-- 调用底部页面 -->
<div style="100%;height:60px;float:left">
<jsp:include page="/client/foot.jsp"></jsp:include>
</div>
</body>
</html>

    效果图

    4.其他小改动

    LoginServlet

    package cn.edu.bdu.mc.servlets;

import java.io.IOException;
import java.sql.SQLException;

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

import cn.edu.bdu.mc.beans.User;
import cn.edu.bdu.mc.services.UserService;
import cn.edu.bdu.mc.services.impls.UserServiceImpl;
import cn.edu.bdu.mc.utils.CookieUtil;

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

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			// TODO Auto-generated method stub
			String username = request.getParameter("username");
			String password = request.getParameter("password");
			UserService userService = new UserServiceImpl();
			Object login = userService.login(username, password);
			if(login.equals("user")) {
				request.setAttribute("errorMsg", "用户名不存在");
				request.getRequestDispatcher("client/login.jsp").forward(request, response);
			}else if(login.equals("pass")) {
				request.setAttribute("errorMsg", "密码错误");
				request.getRequestDispatcher("client/login.jsp").forward(request, response);
			}else {
				User user = (User) login;
				Cookie[] cookies = request.getCookies();
				if(CookieUtil.findCookieByName(cookies,"bookHistory")==null) {
					Cookie cookie = new Cookie("bookHistory","0#0#0#0#0");
					//cookie存放3天。
					cookie.setMaxAge(3*24*60*60);
					response.addCookie(cookie);
				}
				request.getSession().setAttribute("user", user);
				response.sendRedirect("client/index.jsp");
			}
		} 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);
	}

}

    LogoutServlet

    package cn.edu.bdu.mc.servlets;

import java.io.IOException;

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

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

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		request.getSession().removeAttribute("user");
		Cookie cookie = new Cookie("bookHistory","");
		cookie.setMaxAge(0);
		response.addCookie(cookie);
		response.sendRedirect("client/index.jsp");
	}

	/**
	 * @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);
	}

}

    BookService

    @Override
	public Book findBookByClazzAndEr_id(String clazz, int er_id) throws SQLException {
		// TODO Auto-generated method stub
		String sql = "select * from book where clazz = ? and second_id = ?";
		return queryRunner.query(sql, new BeanHandler<Book>(Book.class),clazz,er_id);
	}

    XinShuMingServlet

    加了一些方便我处理的返回值。

    String html = "<a href='/bookstore/client/"+book.getClazz()+"/shu.jsp?er_id="+book.getSecond_id()+"' style='font-size:16px'>"+book.getBook_name()+"</a>@"+re_du+"@"+book.getClazz()+"/shu.jsp?er_id="+book.getSecond_id();
			response.getWriter().print(html);

    5.新增

    FindPageByIdServlet

    package cn.edu.bdu.mc.servlets;

import java.io.IOException;
import java.sql.SQLException;

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 cn.edu.bdu.mc.beans.Book;
import cn.edu.bdu.mc.daos.BookDao;
import cn.edu.bdu.mc.daos.impls.BookDaoImpl;

/**
 * Servlet implementation class FindPageByIdServlet
 */
@WebServlet("/FindPageById")
public class FindPageByIdServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public FindPageByIdServlet() {
        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"));
			BookDao bookDao = new BookDaoImpl();
			Book book = bookDao.findBookById(book_id);
			response.getWriter().print(book.getClazz()+"/shu.jsp?er_id="+book.getSecond_id());
		} 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);
	}

}

    ShuImgByIdServlet

    package cn.edu.bdu.mc.servlets;

import java.awt.image.BufferedImage;
import java.io.BufferedInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.sql.SQLException;

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 com.sun.image.codec.jpeg.JPEGCodec;
import com.sun.image.codec.jpeg.JPEGImageDecoder;
import com.sun.image.codec.jpeg.JPEGImageEncoder;

import cn.edu.bdu.mc.services.BookService;
import cn.edu.bdu.mc.services.impls.BookServiceImpl;

/**
 * Servlet implementation class ShuImgByIdServlet
 */
@WebServlet("/ShuImgById")
public class ShuImgByIdServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ShuImgByIdServlet() {
        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"));
			response.setContentType("image/jpeg;charset=GB2312");
			BookService bookService = new BookServiceImpl();
			InputStream is = bookService.getImgById(book_id);
			BufferedInputStream imageIn = new BufferedInputStream(is);
			OutputStream output = response.getOutputStream();
			
			JPEGImageDecoder decoder = JPEGCodec.createJPEGDecoder(imageIn);
			// 得到编码后的图片对象
			BufferedImage image = decoder.decodeAsBufferedImage();
			// 得到输出的编码器
			JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(output);
			encoder.encode(image);// 对图片进行输出编码
			imageIn.close();// 关闭文件流
		} 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);
	}

}

    总结

    我好像越来越懒得整理这个了。emmmmm,希望我能坚持下去吧，等到书城做完再歇一阵儿。。坚持！
    哦对了，今天还给颜色整体改了改，就是把透明度都调了调，感觉显示效果稍微好了那么一点儿。
  • 相关阅读:
    Apache、nginx 、lighttpd性能比较
    datapump
    ORA-0600
    在归档模式中，tablespace处于offline状态下，同样可以进行RMAN备份
    一个0级别增量备份小demo
    logminer
    statspack
    flashback table
    constraint
    linux进入单用户模式
  • 原文地址：https://www.cnblogs.com/zhangA/p/11055543.html
Copyright © 2011-2022 走看看