码迷，mamicode.com
首页 > 其他好文 > 详细

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

时间：2019-06-19 23:35:16      阅读：260      评论：0      收藏：0      [点我收藏+]

标签：query   put   其他   rate   对象   val   大项目   content   handle   

目录

大项目之网上书城（六）——个人页面和书页面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>&nbsp;&nbsp;&nbsp;&nbsp;<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

标签：query   put   其他   rate   对象   val   大项目   content   handle   

原文地址：https://www.cnblogs.com/zhangA/p/11055543.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！