42、首页的实现

学习过程：

前台首页其实就是列表查询，商品分页查询等功能的一个结合而已，页面效果如下：

有了后台的类别和商品的实现，那么首页的分页就变得比较简单了，仅仅只是调用了一下dao层的方法就可以了。新建一个servlet，访问路径为toIndex。然后修改web.xml的主页，这样我们直接访问域名时就会自动进入这个servlet了。

	<servlet-mapping>
		<servlet-name>toIndex</servlet-name>
		<url-pattern>/toIndex</url-pattern>
	</servlet-mapping>
	<servlet>
		<servlet-name>toIndex</servlet-name>
		<servlet-class>com.shop.servlet.toIndex</servlet-class>
	</servlet>
	<welcome-file-list>
		<welcome-file>toIndex</welcome-file>
	</welcome-file-li

1、实现servlet

public class toIndex extends HttpServlet {


	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		IGoodsDao goodsDao=FactoryDao.getInstanse().newGoodsDao();
		IGoodsTypesDao goodsTypesDao=FactoryDao.getInstanse().newGoodsTypesDao();


		//1、查询所有的类别
		List<GoodsTypes> goodsTypeses =goodsTypesDao.getAllTypes();
		
		//2、查询商品
		int tid=0;//商品类别ID
		int cpage=1;//当前页
		
		String typeidstr=request.getParameter("tid");
		String cpagestr=request.getParameter("cpage");
		//如果是第一次进入主页  商品的类别id为空
		if(typeidstr==null){
			tid=goodsTypeses.get(0).getTypeId();
		}else{
			tid=Integer.parseInt(typeidstr);
		}
		
		//当前页信息
		if(cpagestr!=null){
			cpage=Integer.parseInt(cpagestr);
		}
		
		Page page=new Page();
		page.setCurrentPage(cpage);
		page.setPageSize(8);
		List<Goods> goodses=goodsDao.getByType(tid, page);
		
		//页面用到的信息，放置request 里
		request.setAttribute("goodsTypeses", goodsTypeses);
		request.setAttribute("goodses", goodses);
		request.setAttribute("page", page);
		request.setAttribute("tid", tid);
		
		//跳转
		request.getRequestDispatcher("index.jsp").forward(request, response);
		
		
	}


	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
     doGet(request, response);
	}

}

2、页面

index.jsp修改如下：

<body>
	<div id="manage_body">

		<!-- header -->
		<jsp:include page="head.jsp"></jsp:include>
		<!-- end of header -->

		<!-- content -->
		<div id="manage_content_wrapper">
			<!-- left -->
			<jsp:include page="left.jsp"></jsp:include>
			<!-- end of left -->


			<div id="manage_content_right">

				<div id="manage_content_right">

					<div id="content_right_contain">
						<div id="product_content_left">
							<div id="product_contain_top"></div>
							<div id="product_contain">
                               
                               <a name="goods"/>     

								<c:forEach items="${goodses }" var="goods">
									<div class="left_product1">
										<div class="product_image">
											<a href="content_image.html"> <img
												src="uploadfile/${goods.pic }" border="0" /> </a>
										</div>
										<div class="product_title">
											<a href="content_image.html" title="苛糖小炒">${goods.goodsName }</a>
										</div>
										<div class="product_sale4">市场价：￥${goods.cash }元</div>

										<div class="product_car">
										    <a href="cartServet?gid=${goods.goodsId }">放购物车</a>
										</div>
									</div>
								</c:forEach>

								<div id="leftpro_page">
									<div id="leftpro_page_2"><a href="cart.jsp">查看购物车</a>
						

									</div>

									<div id="leftpro_page_1">
									    <a href="toIndex?tid=${tid }&cpage=${page.currentPage-1}#goods"></a>
										
									</div>

									<div id="leftpro_page_3">
									      <a href="toIndex?tid=${tid }&cpage=${page.currentPage+1}#goods"></a>

									</div>

								</div>
							</div>
							<div id="product_contain_foot"></div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<!-- end of content -->

		<!-- footer -->
		<div id="manage_footer_wrapper">备案号：信息</div>
		<!-- end of footer -->
	</div>
</body>

left.jsp修改如下：

   <div id="manage_content_left">
				<div id="manage_content_promenu">

					<div id="content_promenu_content">
					   <c:forEach items="${goodsTypeses}" var="type">
						<div class="promenu_content_colum1">
							<a href="toIndex?tid=${type.typeId }">${type.typeName }</a>
						</div>
						</c:forEach>
					</div>
				</div>
			</div>
  </body>

猜你喜欢