大项目之网上书城（六）——个人页面和书页面Demo
程序员文章站
2023-01-01 09:47:29
今天时间依旧不是很多，，主要是今天思路不够丰富。勉强给个人页面设计了个banner，显示了下昵称。然后加了个浏览历史和推荐书籍。就没思路了。浏览历史通过cookie来完成，这个弄了超久！一直在想为啥明明是名字相同的cookie，为啥获取的值不一样，然后在浏览器上看了下Application里的coo... ......
目录
大项目之网上书城（六）——个人页面和书页面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%;
width: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;width: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> <button class="btn btn-info" id="no">否</button>
</div>
<!-- 调用头部页面 -->
<div style="width:100%;height:100px;float:left">
<jsp:include page="/client/head.jsp"></jsp:include>
</div>
<!-- 通用内容体大小 -->
<div style="width:70%;height:720px;float:left;margin-left:15%;">
<div style="width: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;width:300px">
<font style="float:left">欢迎您，<a>${user.username }</a>！</font>
<font style="float:left"><a href="#" id="quit">退出登录</a></font>
</div>
</div>
<div style="width:100%;height:470px;float:left">
<div style="width: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="width: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="width:100%;height:100%" id="history1"/>
<%}else{ %>
<img alt="图书" style="width:100%;height:100%"/>
<%} %>
</div>
<div class="inc">
<%if(!list[1].equals("0")){ %>
<img alt="图书" src="${pagecontext.request.contextpath}/shuimgbyid?book_id=<%=list[1] %>" style="width:100%;height:100%" id="history1"/>
<%}else{ %>
<img alt="图书" style="width:100%;height:100%"/>
<%} %>
</div>
<div class="inc">
<%if(!list[2].equals("0")){ %>
<img alt="图书" src="${pagecontext.request.contextpath}/shuimgbyid?book_id=<%=list[2] %>" style="width:100%;height:100%" id="history1"/>
<%}else{ %>
<img alt="图书" style="width:100%;height:100%"/>
<%} %>
</div>
<div class="inc">
<%if(!list[3].equals("0")){ %>
<img alt="图书" src="${pagecontext.request.contextpath}/shuimgbyid?book_id=<%=list[3] %>" style="width:100%;height:100%" id="history1"/>
<%}else{ %>
<img alt="图书" style="width:100%;height:100%"/>
<%} %>
</div>
<div class="inc">
<%if(!list[4].equals("0")){ %>
<img alt="图书" src="${pagecontext.request.contextpath}/shuimgbyid?book_id=<%=list[4] %>" style="width:100%;height:100%" id="history1"/>
<%}else{ %>
<img alt="图书" style="width:100%;height:100%"/>
<%} %>
</div>
</div>
<div style="width: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="width: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="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 style="width: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="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>
<!-- 通用界面 -->
<% 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="width: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="width: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,希望我能坚持下去吧，等到书城做完再歇一阵儿。。坚持！
哦对了，今天还给颜色整体改了改，就是把透明度都调了调，感觉显示效果稍微好了那么一点儿。