浅析我对Web（淘宝网）导航栏的深入理解

本文链接：https://blog.csdn.net/qq_36658673/article/details/88530672

首先刚拿到这个项目的实现我也一脸迷茫的，不知道数据库和jsp以及Controller之间的传递流程，下面我为大家浅析一下我对此类导航栏的理解吧。

首先：项目界面大概UI是这个样子的。

一级目录：化妆品

鼠标悬停：二级目录

点击少女派进入三级目录

首先我们先来分析一下，第一感觉误以为会使用Ajax技术来实现数据的无刷新实时传输，其实这是一个误区，我们可以通过类似递归查询将所有商品的一级分类二级分类三级分类以及所有商品信息查询出来，然后通过数据的交替传输再一次进入controller层进行数据查询，下面我先分析一下数据库表之间的关系。

表：easybuy_product

表：easybuy_product_category

通过对表结构分析，我们发现此数据库设计是将各商品分级设计为一张表中，通过id字段和parentId字段来关联上下级别关系。

在商品明细表格中，每个商品都有相应的所属层级id，我们可以先将parentId=0的一级目录查询出来，将查询出来的结果放入一个JavaBean类中，我们在这个JavaBaan中定义如下属性：

public class ProductCategory implements Serializable {

	private Integer id;//ID
	private String name;//名称
	private Integer parentId;//父级ID
	private Integer type;//分类级别
	private String iconClass;
	private ArrayList<Product> products; //获取其下所有商品
	private ArrayList<ProductCategory> productCategories; //获取其下一级子类


	public ArrayList<Product> getProducts() {
		return products;
	}

	public void setProducts(ArrayList<Product> products) {
		this.products = products;
	}

	public ArrayList<ProductCategory> getProductCategories() {
		return productCategories;
	}

	public void setProductCategories(ArrayList<ProductCategory> productCategories) {
		this.productCategories = productCategories;
	}

	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public Integer getParentId() {
		return parentId;
	}

	public void setParentId(Integer parentId) {
		this.parentId = parentId;
	}

	public Integer getType() {
		return type;
	}

	public void setType(Integer type) {
		this.type = type;
	}

	public String getIconClass() {
		return iconClass;
	}

	public void setIconClass(String iconClass) {
		this.iconClass = iconClass;
	}

}

其中 productCategories 属性用来存放其子级别目录分类

注意：Java对数据库数据进行查询时是每行逐一进行查询！（理解）

我们接下来通过将第一层id来作为下一查询的parentid来查询，这样查询到的数据就是以第一层父类id为基准查询到的二级子菜单，以此类推，我们总共将要查询三层。其结构模型为这样：

每一个集合中的对象都会包含一个一级分类的id，name等和它的二级分类和它的三级分类的id以及属性，这样我们就会将一级分类；二级分类；和三级分类同时显示在menu中；具体java代码如下



public class ProductCategoryDao{
    private JdbcTemplate  jdbcTemplate = new JdbcTemplate();
    private ProductDao productDao = new ProductDao();
    //集合转化
    //获取商品分类数据集
    public List<ProductCategory> selectProductCategory(){
        String sql = "select * from easybuy_product_category where parentId = 0";
        List<ProductCategory> list = this.jdbcTemplate.queryAll(sql, null, new RowMapper() {
            @Override
            public Object mapRow(ResultSet rs) throws SQLException {
                ProductCategory pc = new ProductCategory();
                pc.setId(rs.getInt("id"));
                pc.setName(rs.getString("name"));
                pc.setIconClass(rs.getString("iconClass"));
                pc.setParentId(rs.getInt("parentId"));
                pc.setType(rs.getInt("type"));
                //获取二级类集合
                List productCategories = selectProductCategory2(pc.getId());
                ArrayList arrayList1 = new ArrayList();
                for(int i = 0 ;i < productCategories.size(); i++){
                    arrayList1.add(productCategories.get(i));
                }
                pc.setProductCategories(arrayList1); //ProductCategories
                // *****************************************获取商品集合***********************************************
                List  products = productDao.selectProduct(pc.getId());
                ArrayList arrayList2 = new ArrayList();
                for(int i = 0 ;i < products.size(); i++){
                    arrayList2.add(products.get(i));
                }
                pc.setProducts(arrayList2);//Products
                return pc;
            }
        });
        return list;
    }
    //查询二级目录下集合
    public List<ProductCategory> selectProductCategory2(int ParentId){
        String sql = "select * from easybuy_product_category where parentId = ?";
        List<ProductCategory> list = this.jdbcTemplate.queryAll(sql, new Object[]{ParentId}, new RowMapper() {
            @Override
            public Object mapRow(ResultSet rs) throws SQLException {
                ProductCategory pc = new ProductCategory();
                pc.setId(rs.getInt("id"));
                pc.setName(rs.getString("name"));
                pc.setIconClass(rs.getString("iconClass"));
                pc.setType(rs.getInt("type"));
                pc.setParentId(rs.getInt("parentId"));
                //查找三级目录类集合
                List productCategories = selectProductCategory3(pc.getId());
                ArrayList arrayList1 = new ArrayList();
                for(int i = 0 ;i < productCategories.size(); i++){
                    arrayList1.add(productCategories.get(i));
                }
                pc.setProductCategories(arrayList1);

                return pc;
            }
        });
        return list;
    }
    //查询三级目录下集合
    public List<ProductCategory> selectProductCategory3(int ParentId){
        String sql = "select * from easybuy_product_category where parentId = ?";
        List<ProductCategory> list = this.jdbcTemplate.queryAll(sql, new Object[]{ParentId}, new RowMapper() {
            @Override
            public Object mapRow(ResultSet rs) throws SQLException {
                ProductCategory pc = new ProductCategory();
                pc.setId(rs.getInt("id"));
                pc.setName(rs.getString("name"));
                pc.setIconClass(rs.getString("iconClass"));
                pc.setType(rs.getInt("type"));
                pc.setParentId(rs.getInt("parentId"));
                return pc;
            }
        });
        return list;
    }

}

注：本人所使用的jdbc以及mvc是自己封装的，但类似于Jdbctemplate，如果需要源码请与我联系。

这样我们就可以将整个数据库中的商品分级打包成一个list集合传输到jsp前台界面中啦。

然后我们将当前层级目录设置成href超链接形式进行数据值传递，通过后台对level和id进行查询，查询到相应商品信息。

 public List<Product> ProductDetails(Integer level,Integer id){
        String sql = "select    id,name,description,price,stock,categoryLevel1Id,categoryLevel2Id,categoryLevel3Id,fileName from easybuy_product where isdelete  = 0 ";
        if(EmptyUtils.isNotEmpty(level)){
            if(level == 1){
                sql += "and categoryLevel1Id = "+id;
            }
            if(level == 2){
                sql += "and categoryLevel2Id = "+id;
            }
            if(level == 3){
                sql += "and categoryLevel3Id = "+id;
            }
            System.out.println(sql);
        }
        List<Product> list = this.jdbcTemplate.queryAll(sql,null,this);
        return list;
    }

这样类似于淘宝的商品目录结构就实现啦，我们要对集合的嵌套熟练掌握，已经web编程，功夫不负有心人，只要肯动脑不了筋，没有实现不了的。此目录可以应用到很多web项目以及ERP管理平台中。