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

前台页面


看回我们前台页面的成果图,我们可以把整个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);

效果:

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



上一篇:IDC 最新报告:阿里云位居中国关系型数据库市场第一


下一篇:运维二