前台页面
看回我们前台页面的成果图，我们可以把整个body页面看成是三个div
- body占整个div
- 导航条是一个div
- 显示图书的地方是一个div
设计好大概的布局
- html代码引入css
<linkrel="stylesheet"href="body.css"type="text/css">
- HTML三个div
<divid="body">
<divid="category">
<c:forEachitems="${categorys}"var="category">
</c:forEach>
这是导航条
</div>
<divid="bookandpages">
<divid="books">
这是书籍的地方
</div>
<divid="page">
这是页码
</div>
</div>
</div>
- CSS代码：
#body{
position:relative;
}
#category{
border:1pxsolid#000;
position:absolute;
width:300px;
height:400px;
float:left;
left:200px;
top:70px;;
}
#bookandpages{
border:1pxsolid#000000;
position:absolute;
width:600px;
height:600px;;
float:left;
left:500px;
margin-left:50px;
}
#books{
border:1pxsolid#000;
width:600px;
height:550px;;
}
#page{
border:1pxsolid#000;
position:absolute;
height:48px;
width:600px;
}
- 大概的布局
IndexServlet
在显示首页的下部分的时候，应该先去寻找一个Servlet来把数据交给对应的JSP。
因为我们的JSP一般都是放在WEB-INF下，是不能直接访问的。还有就是JSP往往是需要我们后台的数据的，因此我们使用Servlet来获取得到数据，再交由JSP来展示就最好不过了。
<framesrc="${pageContext.request.contextPath}/IndexServlet"/>
- Servlet代码：
//得到所有的分类数据，给body页面
BussinessServiceImplservice=newBussinessServiceImpl();
List<Category>categories=service.getAllCategory();
request.setAttribute("categories",categories);
StringcurrentPageCount=request.getParameter("currentPageCount");
//得到所有分类的图书，给body页面
Pagepage=service.getPageData(currentPageCount);
request.setAttribute("page",page);
request.getRequestDispatcher("/client/body.jsp").forward(request,response);
JSP显示数据
<divid="body">
<divid="category">
书籍分类 :
<br>
<c:forEachitems="${categories}"var="categories">
<li>
<ahref="${pageContext.request.contextPath}/ListBookServlet?category_id=${categories.id}">${categories.name}</a>
</li>
</c:forEach>
</div>
<divid="bookandpages">
<c:forEachitems="${page.list}"var="book">
<divid="books">
<divid="image">
<imgsrc="${pageContext.request.contextPath}/image/${book.image}"width="83px"height="118px">
</div>
<divid="bookinfo">
<li>
书名：${book.name}
</li>
<li>价格：${book.price}</li>
<li>作者：${book.author}</li>
</div>
</div>
<%--这里要清除浮动，十分重要！--%>
<divstyle="clear: both"></div>
</c:forEach>
</div>
<divid="page">
<jsp:includepage="/client/page.jsp"/>
</div>
</div>
CSS代码：
重要的是：如果div浮动都黏贴在一起了，那么在后边多加个div，用于清除浮动效果
#body{
position:relative;
}
#category{
border:1pxsolid#000;
position:absolute;
width:300px;
height:400px;
float:left;
left:200px;
top:70px;;
}
#bookandpages{
border:1pxsolid#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代码：
BussinessServiceImplservice=newBussinessServiceImpl();
StringcurrentPageCount=request.getParameter("currentPageCount");
Stringcategory_id=request.getParameter("category_id");
Pagepage=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);
效果：
