由于我们用的是分页技术，所以我们导入之前写过的Page类和jsp吧.....这些代码可以在我分类的代码库中找到

绑定超链接

查看图书

Servlet处理请求

        else if (method.equals("look")) {

            String currentPageCount = request.getParameter("currentPageCount");
            Page page = service.getPageData(currentPageCount);

            request.setAttribute("page",page);
            request.getRequestDispatcher("/background/listBook.jsp").forward(request, response);
        }

显示图书JSP页面

Servlet端传过来的是Page对象，而不是list集合

可以根据记载在Book对象的图片名称，弄一个超链接，超链接指向服务端的图片，这样就可以查看图片了！

    暂时还没有任何图书哦



书名
           
作者
           
价钱
           
描述
           
图片
           
操作
       

${book.name}
               
${book.author}
               
${book.price}
               
${book.description}
               
查看图片
               

                   删除
                   修改
               
           

效果：

• HTML三个div

    

        

        这是导航条
    

    

        

            这是书籍的地方

        

        

            这是页码
        
    

• CSS代码：

#body {
    position: relative;
}

#category {
    border: 1px solid #000;
    position: absolute;
    width: 300px;
    height: 400px;
    float: left;
    left: 200px;
    top: 70px;;
}

#bookandpages {
    border: 1px solid #000000;
    position: absolute;
    width: 600px;
    height: 600px;;
    float: left;
    left: 500px;
    margin-left: 50px;
}

#books {
    border: 1px solid #000;
    width: 600px;
    height: 550px;;
}

#page {
    border: 1px solid #000;
    position: absolute;
    height: 48px;
    width: 600px;
}

• 大概的布局

---

${categories.name}

书名：${book.name}

价格：${book.price}

作者：${book.author}

重要的是：如果div浮动都黏贴在一起了，那么在后边多加个div，用于清除浮动效果

#body {
    position: relative;
}

#category {
    border: 1px solid #000;
    position: absolute;
    width: 300px;
    height: 400px;
    float: left;
    left: 200px;
    top: 70px;;
}

#bookandpages {
    border: 1px solid #000000;
    position: absolute;
    width: 780px;
    height: 538px;;
    float: left;
    left: 500px;
    margin-left: 50px;
}

#books{
    margin-left: 50px;
    margin-top: 30px;
}
#image{
    float: left;
}
#bookinfo{
    float: left;
}
#page {
    height: 62px;
    width: 780px;
    position: fixed;
    margin-left: 549px;
    margin-top: 477px;
    text-align: center;
    line-height: 50px;
}

• 效果：

我们可以根据左边的导航条来显示相对应的分类图书。

• Servlet代码：

        BussinessServiceImpl service = new BussinessServiceImpl();
        String currentPageCount = request.getParameter("currentPageCount");
        String category_id = request.getParameter("category_id");

        Page page = service.getPageData(currentPageCount, category_id);
        List  categories = service.getAllCategory();

        request.setAttribute("page", page);
        request.setAttribute("categories", categories);
        request.getRequestDispatcher("/client/body.jsp").forward(request,response);

效果：