大項目之網上書城（六）——我的頁面和書頁面Demo

時間  2019-12-10
標籤 項目 網上 書城 我的 頁面 demo 简体版
原文   原文鏈接

目錄javascript

大項目之網上書城（六）——我的頁面和書頁面Demo

主要改動

今天時間依舊不是不少，，主要是今天思路不夠豐富。勉強給我的頁面設計了個banner，顯示了下暱稱。而後加了個瀏覽歷史和推薦書籍。就沒思路了。瀏覽歷史經過cookie來完成，這個弄了超久！一直在想爲啥明明是名字相同的cookie，爲啥獲取的值不同，而後在瀏覽器上看了下Application裏的cookies，才知道，原來他倆的path不一樣。。。而後果斷改爲功啦！css

1.user.jsp

代碼

瀏覽歷史的cookie會在用戶登陸的時候產生，初始爲0#0#0#0#0html

以及原本還打算加個頭像來着，想一想還要改表，算了算了。。。一樣被斃掉的還有暱稱。java

<%@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>

效果圖

點擊退出帳號後，
jquery

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

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

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,但願我能堅持下去吧，等到書城作完再歇一陣兒。。堅持！
哦對了，今天還給顏色總體改了改，就是把透明度都調了調，感受顯示效果稍微好了那麼一點兒。bootstrap

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程