继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

图书管理系统【部署开发环境、解决分类、图书、前台页面模块】(2)

Java3y
关注TA
已关注
手记 297
粉丝 1.5万
获赞 6488
后台显示图书模块

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

绑定超链接


<a href="${pageContext.request.contextPath}/BookServlet?method=look" target="body">查看图书</a>

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对象的图片名称,弄一个超链接,超链接指向服务端的图片,这样就可以查看图片了!


<c:if test="${empty(page.list)}">

    暂时还没有任何图书哦

</c:if>

<c:if test="${!empty(page.list)}">

   <table border="1px">
       <tr>
           <td>书名</td>
           <td>作者</td>
           <td>价钱</td>
           <td>描述</td>
           <td>图片</td>
           <td>操作</td>
       </tr>

       <c:forEach var="book" items="${page.list}" >
           <tr>
               <td>${book.name}</td>
               <td>${book.author}</td>
               <td>${book.price}</td>
               <td>${book.description}</td>
               <td><a href="${pageContext.request.contextPath}/image/${book.image}">查看图片</a></td>
               <td>
                   <a href="#">删除</a>
                   <a href="#">修改</a>
               </td>
           </tr>
       </c:forEach>

   </table>
    <br>
    <jsp:include page="page.jsp"/>

</c:if>

效果:

这里写图片描述


前台页面

看回我们前台页面的成果图,我们可以把整个body页面看成是三个div

  • body占整个div
  • 导航条是一个div
  • 显示图书的地方是一个div

这里写图片描述


设计好大概的布局
  • html代码引入css

    <link rel="stylesheet" href="body.css" type="text/css">
  • HTML三个div

<div id="body">
    <div id="category">
        <c:forEach items="${categorys}" var="category">

        </c:forEach>

        这是导航条
    </div>

    <div id="bookandpages">
        <div id="books">
            这是书籍的地方

        </div>

        <div id="page">
            这是页码
        </div>
    </div>

</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;
}
  • 大概的布局

这里写图片描述


IndexServlet

在显示首页的下部分的时候,应该先去寻找一个Servlet来把数据交给对应的JSP

因为我们的JSP一般都是放在WEB-INF下,是不能直接访问的。还有就是JSP往往是需要我们后台的数据的,因此我们使用Servlet来获取得到数据,再交由JSP来展示就最好不过了。


    <frame src="${pageContext.request.contextPath}/IndexServlet"/>
  • Servlet代码:

        //得到所有的分类数据,给body页面
        BussinessServiceImpl service = new BussinessServiceImpl();
        List<Category> categories = service.getAllCategory();
        request.setAttribute("categories", categories);
        String currentPageCount = request.getParameter("currentPageCount");

        //得到所有分类的图书,给body页面
        Page page = service.getPageData(currentPageCount);
        request.setAttribute("page", page);

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

JSP显示数据

<div id="body">
    <div id="category">
        书籍分类 :
        <br>
        <c:forEach items="${categories}" var="categories">
            <li>
                <a href="${pageContext.request.contextPath}/ListBookServlet?category_id=${categories.id}">${categories.name}</a>
            </li>
        </c:forEach>
    </div>

    <div id="bookandpages">
        <c:forEach items="${page.list}" var="book">
        <div id="books">

                <div id="image">
                    <img src="${pageContext.request.contextPath}/image/${book.image}" width="83px" height="118px">
                </div>
                <div id="bookinfo">
                    <li>
                        书名:${book.name}
                    </li>
                    <li>价格:${book.price}</li>
                    <li>作者:${book.author}</li>
                </div>

        </div>
            <%--这里要清除浮动,十分重要!--%>
            <div style="clear: both"></div>
        </c:forEach>

    </div>
    <div id="page">
        <jsp:include page="/client/page.jsp"/>
    </div>
</div>
CSS代码:

重要的是:如果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<Category>  categories = service.getAllCategory();

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

效果:

这里写图片描述


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP