大项目之网上书城（六）——个人页面和书页面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%;
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,希望我能坚持下去吧，等到书城做完再歇一阵儿。。坚持！
哦对了，今天还给颜色整体改了改，就是把透明度都调了调，感觉显示效果稍微好了那么一点儿。
大项目之网上书城（六）——个人页面和书页面Demo的更多相关文章
- 大项目之网上书城（七）——书页面以及加入购物车Servlet
目录 大项目之网上书城(七)--书页面以及加入购物车Servlet 主要改动 1.shu.jsp 代码 效果图 2.shu.js 代码 3.index.jsp 代码 效果图 4.FindBookByC ...
- 大项目之网上书城（九）——订单Demo
目录 大项目之网上书城(九)--订单Demo 主要改动 1.OrderServiceImpl 代码 2.OrderDaoImpl 代码 3.OrderitemDaoImpl 代码 4.orderite ...
- 大项目之网上书城（八）——数据库大改&添加图书
目录 大项目之网上书城(八)--数据库大改&添加图书 主要改动 1.数据库新增表 代码 2.数据库新增触发器 3.其他对BookService和BookDao的修改 代码 4.addBook. ...
- 大项目之网上书城（五）——主页（End）
目录 大项目之网上书城(五)--主页(End) 主要改动 1.主页(终于完成啦) 完整代码 效果图 2.head.jsp的小改动 代码 3.login.jsp ###代码 效果图 4.login.js ...
- Apicloud_(项目)网上书城03_拓展模块实现
Apicloud_(项目)网上书城01_前端页面开发 传送门 Apicloud_(项目)网上书城02_后端数据获取 传送门 Apicloud_(项目)网上书城03_拓展模块实现 传送门 实现商品详情页 ...
- Apicloud_(项目)网上书城02_后端数据获取
Apicloud_(项目)网上书城01_前端页面开发 传送门 Apicloud_(项目)网上书城02_后端数据获取 传送门 Apicloud_(项目)网上书城03_拓展模块实现 传送门 ApiClou ...
- Apicloud_(项目)网上书城01_前端搭建
[本文皆在记录自己开发Apicloud项目过程,不具备教学水平性文章] 参考书籍<30天App开发从0到1> Apicloud_(项目)网上书城01_前端页面开发 传送门 Apicloud ...
- 【SSH网上商城项目实战22】获取银行图标以及支付页面的显示
转自: https://blog.csdn.net/eson_15/article/details/51452243 从上一节的小demo中我们搞清楚了如何跟易宝对接以及易宝的支付流程.这一节 ...
- 2014年基于Raspberry Pi的5大项目
2014年基于Raspberry Pi的5大项目 Raspberry Pi(即树莓派)是一款基于Linux系统(Debian.ArchLinux)的单板机计算机,它只有一张信用卡大小,可用于电子表 ...
随机推荐
- QT笔记1
1 第一个就是helloworld窗体啦 #include <qapplication.h> #include <qpushbutton.h> int main( int ar ...
- 项目迁移腾讯云后，用户反馈，https证书不匹配。
腾讯云大禹高防大禹BGP同一IP绑定多个证书,用户反馈无法匹配我们域名对应证书.但是浏览器是支持的.定位为客户端不支持sni在运维检查lb及高防证书关联无误,定位发现是用户端httpclient没有设 ...
- 用set和shopt设置bash选项
1.set命令 -o打开选项,+o关闭选项#set -o //显示选项设置#set -o noclobber //打开该选项,重定向将覆盖已存在的文件#set +o noclobber //关闭该选项 ...
- 7步教你使用git命令上传本地代码至github仓库（小白向）
前言 1:首先你需要知道github和git分别是什么?(众所周知github是全球最大同性交友网站233333) github:国外一个免费托管代码的开源网站,每位注册用户都拥有专属的个人仓库(个人 ...
- SetViewportOrgEx（视口） 与 SetWindowOrgEx（窗口） 解析
SetViewportOrgEx (hdc,x/2,y/2) 视口中心点设置到窗口中心 获取客户群x和y,x/2,y/2 ,这样中心点就到窗口中间了. SetWindowOrgEx(hdc,-x/2, ...
- 关于Http的小常识（转载，仅供参考）
HTTP请求头提供了关于请求,响应或者其他的发送实体的信息.HTTP的头信息包括通用头.请求头.响应头和实体头四个部分.每个头域由一个域名,冒号(:)和域值三部分组成. 通用头标:即可用于请求,也可用 ...
- C# DataTable的详细用法[转]
原文链接 1.新建表 private DataTable vsDt =new DataTable(); 2.清空表中内容(表中的列还在) vsDt.Clear(); 3.清空表中的列 vsD ...
- 转 PHP抽象类：无法实例化 （不错）
http://blog.csdn.net/kaituozheboke/article/details/52183726 一.抽象类: 无法实例化 类前加 abstract, 此类就成为抽象类,无法实例 ...
- cloudera-scm-server启动出现Error creating bean with name 'entityManagerFactoryBean'与HHH010003: JDBC Driver class not found: com.mysql.jdbc.Driver错误解决办法（图文详解）
不多说,直接上干货! 问题详情 -- ::, INFO main:com.cloudera.server.cmf.Main: Starting SCM Server. JVM Args: [-Dlog ...
- 移动端 H5 拍照 从手机选择图片，移动端预览，图片压缩，图片预览，再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...