商城项目（day2）

商城项目第二天

今日任务

• 分类信息的加载
• 首页最新最热商品展示
• 商品的详情展示
• 某个分类下的商品的分页展示
• 使用redis优化分类信息查询

导航菜单

导航实现步骤:

• 导航菜单显示的是数据库中的商品分类信息
• 页面加载中,向服务器发送请求
• Servlet调用业务层方法,获取集合
• 业务层调用持久层方法
• Servlet将注册结果封装对象,向客户端回写JSON数据
• 客户端判断JSON数据,跳转页面

========================================================================================

header.html

		//发送AJAX请求,获取的是导航菜单数据,分类表
		HM.ajax("/category","method=findAll",function(data){
			//data返回的JSON数据
			
			if(data.code==1){
				//取出JSON中的数据,是数组,每个元素是分类数据
				var category = data.obj;
				//遍历数组,取出分类数据
				var str="";
				$.each(category, function(index,ele) {
					//alert("=="+ele.cname);
				   str+="<li><a href=\"http://www.itheima331.com:8020/web/view/product/list.html?cid="+ele.cid+"\">"+ele.cname+"</a></li>";
				});
				$("#cate_list").html(str);
			}
		});

显示数据库中取出的数据（手机数码，电脑办公，家具家居，鞋靴箱包.....）：

CategoryServlet

@WebServlet(urlPatterns = "/category")
public class CategoryServlet extends BaseServlet {
    //bean工厂,获取业务层接口实现类
    private CategoryService categoryService = BeanFactory.newInstance(CategoryService.class);

    /**
     * 方法实现查询所有的分类数据
     * 调用业务层方法,返回集合对象List
     * 封装到结果对象,转成JSON响应
     */
    public void findAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        List<Category> categoryList = categoryService.findAll();  // 得到所有结果
        //封装到结果对象                                          //查询的内容
        Result re = new Result(Result.SUCCESS,"查询成功",categoryList);
        response.getWriter().print(JSONObject.fromObject(re));
    }
}

CategoryService

public class CategoryServiceImpl implements CategoryService {
    private CategoryDao dao = BeanFactory.newInstance(CategoryDao.class);

    @Override
    public List<Category> findAll() {
        List<Category> categoryList = null;
        try {
            categoryList = dao.findAll();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return categoryList;
    }
}

CategoryDao

public class CategoryDaoImpl implements CategoryDao {
    private QueryRunner qr = new QueryRunner(C3P0Utils.getDataSource());
    // 查询所有分类数据
    @Override
    public List<Category> findAll() throws SQLException {
        String sql = "select * from category";
        return qr.query(sql, new BeanListHandler<>(Category.class));
    }
}

网页向/category的servlet请求数据，后端返回json数据。 （因为向/category请求，所以在抓包工具中找到category就能找到传递的json数据）

首页最新最热商品展示

登录实现步骤:

• 首页加载完成,AJAX向服务器发送请求

• Servlet调用业务层两次查询方法

• 业务层分别调用持久层两次方法

• 持久层两次方法分别查询最热门商品和最新商品

• Servlet获取两次查询方法结果集,并封装Result对象

• Result对象转成JSON数据并响应

首页index

<script type="text/javascript">
			$(function(){
				//服务器发送AJAX请求,获取最新和最热门商品
				HM.ajax("/product","method=findNewsAndHot",function(data){
					if(data.code==1){
						//取出JSON中的数据
						//取出热门商品
						var ishot = data.obj.ishot;   // data.obj热门数据   data.code状态码  data.message状态信息
						var hot = $("#hot");
						
						//ishot是数组,数组元素每个商品对象
						$.each(ishot, function(index,ele) {
						 var str = "<div class=\"col-md-2\" style=\"text-align:center;height:200px;padding:10px 0px;\">\n" +
      "\t\t\t\t\t\t<a href=\"http://www.itheima331.com:8020/web/view/product/info.html?pid="+ele.pid+"\">\n" +
      "\t\t\t\t\t\t\t<img src=\"http://www.itheima331.com:8020/web/"+ele.pimage+"\" width=\"130\" height=\"130\" style=\"display: inline-block;\">\n" +
      "\t\t\t\t\t\t</a>\n" +
      "\t\t\t\t\t\t<p><a href=\"http://www.itheima331.com:8020/web/view/product/info.html?pid="+ele.pid+"\" style='color:#666'>"+ele.pname+"</a></p>\n" +
      "\t\t\t\t\t\t<p><font color=\"#E4393C\" style=\"font-size:16px\">&yen;"+ele.shop_price+"</font></p>\n" +
      "\t\t\t\t\t</div>";
      						//向div追加标签
      						hot.append(str);    // 追加， 不能用覆盖html
						});
						
						
						
						var newss=$("#news");
						//取出最新商品
						var news = data.obj.news;
						$.each(news, function(index,ele) {
							//点入 商品详情页  携带商品的id参数
							 var str = "<div class=\"col-md-2\" style=\"text-align:center;height:200px;padding:10px 0px;\">\n" +
      "\t\t\t\t\t\t<a href=\"http://www.itheima331.com:8020/web/view/product/info.html?pid="+ele.pid+"\">\n" +
      "\t\t\t\t\t\t\t<img src=\"http://www.itheima331.com:8020/web/"+ele.pimage+"\" width=\"130\" height=\"130\" style=\"display: inline-block;\">\n" +
      "\t\t\t\t\t\t</a>\n" +
      "\t\t\t\t\t\t<p><a href=\"http://www.itheima331.com:8020/web/view/product/info.html?pid="+ele.pid+"\" style='color:#666'>"+ele.pname+"</a></p>\n" +
      "\t\t\t\t\t\t<p><font color=\"#E4393C\" style=\"font-size:16px\">&yen;"+ele.shop_price+"</font></p>\n" +
      "\t\t\t\t\t</div>";
      						newss.append(str);
						});
						
					}
				});
			});
		</script>

ProductServlet

public void  findNewsAndHot(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        //调用业务层,获取最热门商品
        List<Product> isHotList = productService.findIsHot();
        //调用业务层,获取最新商品
        List<Product> newList = productService.findNew();
        //集合List合并,合并为Map集合
        Map<String,List<Product>> map = new HashMap<String, List<Product>>();
        map.put("ishot",isHotList);   //  键：值    最热门商品数据
        map.put("news",newList);      //  最新商品数据
        Result re = new Result(Result.SUCCESS,"查询成功",map);
        response.getWriter().print(JSONObject.fromObject(re));
    }

 

ProductService

public void  findNewsAndHot(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        //调用业务层,获取最热门商品
        List<Product> isHotList = productService.findIsHot();
        //调用业务层,获取最新商品
        List<Product> newList = productService.findNew();
        //集合List合并,合并为Map集合
        Map<String,List<Product>> map = new HashMap<String, List<Product>>();
        map.put("ishot",isHotList);   //  键：值    最热门商品数据
        map.put("news",newList);      //  最新商品数据
        Result re = new Result(Result.SUCCESS,"查询成功",map);
        response.getWriter().print(JSONObject.fromObject(re));
    }

ProductDao

    /**
     *  查询热门商品
     *  调用dao层,返回集合
     */
    public List<Product> findIsHot() {
        List<Product> isHotList = null;
        try {
            isHotList = productDao.findIsHot();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return isHotList;
    }

    /**
     *  查询最新商品
     *  调用dao层,返回集合
     */
    public List<Product> findNew() {
        List<Product> newList = null;
        try {
            newList = productDao.findNew();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return newList;
    }

最新商品和热门商品数据展示

 

展示商品详情

实现步骤

• 首页拼接字符串,将每个商品的主键id传递到详情页面
• 详情页面获取商品主键,向服务器发送AJAX请求
• Servlet接收客户端请求的主键值
• 调用业务层方法,根据主键查询商品
• 业务层调用持久层查询商品传递,返回商品对象
• Servlet接收业务层返回的商品对象
• 商品对象封装Result对象,转成JSON数据,响应浏览器

首页拼接字符串,传递商品主键

$.each(ishot, function(index,ele) {
						 var str = "<div class=\"col-md-2\" style=\"text-align:center;height:200px;padding:10px 0px;\">\n" +
      "\t\t\t\t\t\t<a href=\"http://www.itheima331.com:8020/web/view/product/info.html?pid="+ele.pid+"\">\n" +
      "\t\t\t\t\t\t\t<img src=\"http://www.itheima331.com:8020/web/"+ele.pimage+"\" width=\"130\" height=\"130\" style=\"display: inline-block;\">\n" +
      "\t\t\t\t\t\t</a>\n" +
      "\t\t\t\t\t\t<p><a href=\"http://www.itheima331.com:8020/web/view/product/info.html?pid="+ele.pid+"\" style='color:#666'>"+ele.pname+"</a></p>\n" +
      "\t\t\t\t\t\t<p><font color=\"#E4393C\" style=\"font-size:16px\">&yen;"+ele.shop_price+"</font></p>\n" +
      "\t\t\t\t\t</div>";
      						//向div追加标签
      						hot.append(str);    // 追加， 不能用覆盖html
						});
						
						
						
						var newss=$("#news");
						//取出最新商品
						var news = data.obj.news;
						$.each(news, function(index,ele) {
							//点入 商品详情页  携带商品的id参数
							 var str = "<div class=\"col-md-2\" style=\"text-align:center;height:200px;padding:10px 0px;\">\n" +
      "\t\t\t\t\t\t<a href=\"http://www.itheima331.com:8020/web/view/product/info.html?pid="+ele.pid+"\">\n" +
      "\t\t\t\t\t\t\t<img src=\"http://www.itheima331.com:8020/web/"+ele.pimage+"\" width=\"130\" height=\"130\" style=\"display: inline-block;\">\n" +
      "\t\t\t\t\t\t</a>\n" +
      "\t\t\t\t\t\t<p><a href=\"http://www.itheima331.com:8020/web/view/product/info.html?pid="+ele.pid+"\" style='color:#666'>"+ele.pname+"</a></p>\n" +
      "\t\t\t\t\t\t<p><font color=\"#E4393C\" style=\"font-size:16px\">&yen;"+ele.shop_price+"</font></p>\n" +
      "\t\t\t\t\t</div>";
      						newss.append(str);
						});

商品详情页面info.html

<script type="text/javascript">
			$(function(){
				//获取传递过来的参数pid
				//工具函数获取
				var pid = HM.getParameter("pid");   //  取出主键
				var param = "method=findById&pid="+pid;
				//发送AJAX请求
				HM.ajax("/product",param,function(data){
					if(data.code==1){
						//JSON取出商品数据
						var product = data.obj;
						$("#pname").html(product.pname);
						$("#pid").html(product.pid);
						$("#shop_price").html(product.shop_price);
						$("#market_price").html(product.market_price);
						$("#pimage").attr("src","http://www.itheima331.com:8020/web/"+product.pimage);  //图片地址
						$("#pdesc").html(product.pdesc);
					}
				});
			});
		</script>

ProductServlet

    /**
     * 查询商品详情
     * 接收页面请求发送商品主键
     * 专递业务层,获取返回值JavaBean
     * 封装到Result结果对象,转成JSON响应
     */
    public void  findById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
        String pid = request.getParameter("pid");
        Product p =  productService.findById(pid);
        Result re = new Result(Result.SUCCESS,"查询成功",p);
        response.getWriter().print(JSONObject.fromObject(re));
    }

ProductService

    /**
     *  根据主键查询商品
     *  主键Web层传递
     *  调用dao层,传递主键,获取JavaBean
     */
    public Product findById(String pid) {
        Product p = null;
        try {
            p  = productDao.findById(pid);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return  p;
    }

ProductDao

    /**
     * 传递主键
     * 查询商品的详细信息
     * 返回JavaBean
     */
    public Product findById(String pid) throws SQLException {
        //拼写主键查询SQL
        String sql = "select * from product where pid= ?";
        return qr.query(sql,new BeanHandler<Product>(Product.class),pid);
    }

查询每个分类下的商品详情

实现步骤

• 菜单页面拼接超链接,传递商品分类主键
• 分类商品页面接收分类主键数据,向服务器发送AJAX请求
• Servlet接收客户端分类主键的数据
• 调用业务层方法组装PageBean数据
• 业务层调用持久层方法,分页查询数据表
• Servlet接收业务层返回的PageBean数据,转成JSON响应客户端

header页面添加连接