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