网上商城2--前台商品管理

前台商品管理模块

准备工作

1、创建表并完善数据

CREATE TABLE `product` (
  `pid` varchar(32) NOT NULL,
  `pname` varchar(50) DEFAULT NULL,
  `market_price` double DEFAULT NULL,
  `shop_price` double DEFAULT NULL,
  `pimage` varchar(200) DEFAULT NULL,
  `pdate` date DEFAULT NULL,
  `is_hot` int(11) DEFAULT NULL,
  `pdesc` varchar(255) DEFAULT NULL,
  `pflag` int(11) DEFAULT NULL,
  `cid` varchar(32) DEFAULT NULL,
  PRIMARY KEY (`pid`),
  KEY `sfk_0001` (`cid`),
  CONSTRAINT `sfk_0001` FOREIGN KEY (`cid`) REFERENCES `category` (`cid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
/*!40101 SET character_set_client = @saved_cs_client */;

初始化商品默认数据(从数据库store_v1.0.sql中获取)

INSERT INTO `product` VALUES ('1','小米 4c 标准版',1399,1299,'products/1/c_0001.jpg','2015-11-02',1,'小米 4c 标准版 全网通 白色 移动联通电信4G手机 双卡双待',0,'1')

2、编写JavaBean Product

public class Product {
	private String pid;
	private String pname;
	private double market_price;
	private double shop_price;
	private String pimage;
	private Date pdate;
	private int is_hot;//0：不是热门 1：热门
	private String pdesc;
	private int pflag; //0:未下架   1：已下架
	private Category category;   //分类：以面向对象的方式描述商品与分类之间的关系

3、编写dao接口，及实现类

4、编写service接口，及实现类

5、编写servlet

----首页热门商品及最新商品显示

代码实现：

1、修改IndexServlet,添加查询热门和最新商品查询

public class IndexServlet extends HttpServlet {

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		
		ProductService service = new ProductService();
		
		//准备热门商品---List<Product>
		List<Product> hotProductList = service.findHotProductList();
		
		//准备最新商品---List<Product>
		List<Product> newProductList = service.findNewProductList();
	        //存放查询结果
		request.setAttribute("hotProductList", hotProductList);
		request.setAttribute("newProductList", newProductList);
		
		request.getRequestDispatcher("/index.jsp").forward(request, response);
		
	}

2、修改service,提供findByHot()和findByNew（）方法

public class ProductService {

	//获得热门商品
	public List<Product> findHotProductList() {
		
		ProductDao dao = new ProductDao();
		List<Product> hotProductList = null;
		try {
			hotProductList = dao.findHotProductList();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return hotProductList;
		
	}

	//获得最新商品
	public List<Product> findNewProductList() {
		ProductDao dao = new ProductDao();
		List<Product> newProductList = null;
		try {
			newProductList = dao.findNewProductList();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return newProductList;
	}

3、修改dao,提供findByHot（）和findByNew()方法

public class ProductDao {

	//获得热门商品
	public List<Product> findHotProductList() throws SQLException {
		QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
		String sql = "select * from product where is_hot=? limit ?,?";
		return runner.query(sql, new BeanListHandler<Product>(Product.class), 1,0,9);  //从第一页开始，连续获取9页信息
	}
        

     //获得最新商品

public List<Product> findNewProductList() throws SQLException {QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());String sql = "select * from product order by pdate desc limit ?,?";return runner.query(sql, new BeanListHandler<Product>(Product.class),0,9);}

4、修改/jsp/index.jsp。页面显示如下

热门商品列表

<c:forEach items="${hotProductList}" var="hotProduct">
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="${pageContext.request.contextPath}/${hotPro.pimage}"  width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>${hotPro.pname}</a></p>
						<p><font color="#E4393C" style="font-size:16px">¥${hotPro.shop_price}</font></p>
					</div>
				</c:forEach>>

最新商品列表

<c:forEach items="${newProductList}" var="newProduct">
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="${pageContext.request.contextPath}/${newPro.pimage}"  width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="#" style='color:#666'>${newPro.pname}</a></p>
						<p><font color="#E4393C" style="font-size:16px">¥${newPro.shop_price}</font></p>
					</div>
				</c:forEach>>

----商品详情

代码实现

1、修改/jsp/index.jsp,点击图片或标题可以查询商品详情

<c:forEach items="${hotProductList}" var="hotProduct">
					<div class="col-md-2" style="text-align:center;height:200px;padding:10px 0px;">
						<a href="product_info.htm">
							<img src="${pageContext.request.contextPath}/${hotPro.pimage}"  width="130" height="130" style="display: inline-block;">
						</a>
						<p><a href="product_info.html" style='color:#666'>${hotPro.pname}</a></p>
						<p><font color="#E4393C" style="font-size:16px">¥${hotPro.shop_price}</font></p>
					</div>
				</c:forEach>>

2、修改ProductServlet,添加fingById方法

3、修改ProductService,添加findById()方法

public Product findProductByPid(String pid) {
		ProductDao dao = new ProductDao();
		Product product = null;
		try {
			product = dao.findProductByPid(pid);
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return product;
	}

4、修改ProductDao.添加findById()方法

public Product findProductByPid(String pid) throws SQLException {
		QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
		String sql = "select * from product where pid=?";
		return runner.query(sql, new BeanHandler<Product>(Product.class), pid);
	}

5、修改product_info.jsp，显示信息

----查询分类商品（含分页）

totalPage 总页数

currentPage 当前页数

pageSize 每页显示的数据条数

totalSize 总的数据条数

List 用于存放每页要显示的数据的list

每页显示的数据条数,是需要我们从后台时时传过来的,那我们可以把这些每页显示的数据封装到一个JavaBean中,然后把它存到域对象中,最后展示到前端页面.

如果上面的这些数据我们一个一个的从后台去取的话,操作起来太麻烦了,于是我们想,前台不就是需要这些数据吗?那我们可以把这些数据有封装到一个PageBean对象身上,到时候把它页存到域对象中,然后到jsp页面展示出来不就行了吗,对吧?

代码实现

步骤3 编写PageBean对象

public class PageBean<T> {

	private int currentPage;  //当前页浏览器传递（）
	private int currentCount; //每页显示个数（固定值，也可以是浏览器传递）
	private int totalCount;   //总记录数（数据库查询）
	private int totalPage;   //总分页数
	private List<T> list;    //分页数据(数据库查询)
	public int getCurrentPage() {
		return currentPage;
	}
	public void setCurrentPage(int currentPage) {
		this.currentPage = currentPage;
	}
	public List<T> getList() {
		return list;
	}
	public void setList(List<T> list) {
		this.list = list;
	}
	
	
	
}

步骤4  修改ProductService,添加findByCid（）方法

public int getCount(String cid) throws SQLException {
		QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
		String sql = "select count(*) from product where cid=?";
		Long query = (Long) runner.query(sql, new ScalarHandler(),cid);
		return query.intValue();
	}

public List<Product> findProductByPage(String cid, int index, int currentCount) throws SQLException {
		QueryRunner runner = new QueryRunner(DataSourceUtils.getDataSource());
		String sql = "select * from product where cid=? limit ?,?";
		List<Product> list = runner.query(sql, new BeanListHandler<Product>(Product.class), cid,index,currentCount);
		return list;

步骤6：修改product_list.jsp，实现分页功能

<!--分页 -->
	<div style="width: 380px; margin: 0 auto; margin-top: 50px;">
		<ul class="pagination" style="text-align: center; margin-top: 10px;">
				<!-- 上一页 -->
			<c:if test="${pageBean.currentPage==1 }">
				<li class="disabled">
					<a href="javascript:void(0);" aria-label="Previous">
						<span aria-hidden="true">«</span>
					</a>
				</li>
			</c:if>
			<c:if test="${pageBean.currentPage!=1 }">
				<li>
					<a href="${pageContext.request.contextPath}/productListByCid?cid=${cid}¤tPage=${pageBean.currentPage-1 }" aria-label="Previous">
						<span aria-hidden="true">«</span>
					</a>
				</li>
			</c:if>
			
			<!-- 显示每一页 -->
			<c:forEach begin="1" end="${pageBean.totalPage }" var="page">
				<!-- 判断是否是当前页 -->
				<c:if test="${page==pageBean.currentPage }">
					<li class="active"><a href="javascript:void(0);">${page }</a></li>
				</c:if>
				<c:if test="${page!=pageBean.currentPage }">
					<li><a href="${pageContext.request.contextPath}/productListByCid?cid=${cid}¤tPage=${page }">${page }</a></li>
				</c:if>
			</c:forEach>
			
			
			<!-- 下一页 -->
			<c:if test="${pageBean.currentPage==pageBean.totalPage }">
				<li class="disabled">
					<a href="javascript:void(0);" aria-label="Next"> 
						<span aria-hidden="true">»</span>
					</a>
				</li>
			</c:if>
			<c:if test="${pageBean.currentPage!=pageBean.totalPage }">
				<li>
					<a href="${pageContext.request.contextPath}/productListByCid?cid=${cid}¤tPage=${pageBean.currentPage+1 }" aria-label="Next"> 
						<span aria-hidden="true">»</span>
					</a>
				</li>
			</c:if>
			
		</ul>
	</div>
	<!-- 分页结束 -->

----浏览历史记录

代码实现

protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		//获得cid
		String cid = request.getParameter("cid");
		
		String currentPageStr = request.getParameter("currentPage");
		if(currentPageStr==null) currentPageStr="1";
		int currentPage = Integer.parseInt(currentPageStr);
		int currentCount = 12;
		
		ProductService service = new ProductService();
		PageBean pageBean = service.findProductListByCid(cid,currentPage,currentCount);
		
		request.setAttribute("pageBean", pageBean);
		request.setAttribute("cid", cid);
		
		//定义一个记录历史商品信息的集合
		List<Product> historyProductList = new ArrayList<Product>();
		
		//获得客户端携带名字叫pids的cookie
		Cookie[] cookies = request.getCookies();
		if(cookies!=null){
			for(Cookie cookie:cookies){
				if("pids".equals(cookie.getName())){
					String pids = cookie.getValue();//3-2-1
					String[] split = pids.split("-");
					for(String pid : split){
						Product pro = service.findProductByPid(pid);
						historyProductList.add(pro);
					}
				}
			}
		}
		//将历史记录的集合放到域中
		request.setAttribute("historyProductList", historyProductList);
		request.getRequestDispatcher("/product_list.jsp").forward(request, response);
		
	}