首页 > 代码库 > 实现web树

实现web树

2024-08-11 15:48:44   217人阅读

在我的博客数据库表的设计——自连接表的设计中，用一个商品分类表来说明怎样去设计一个无限极分类的表。如果我们要使用这样的一个无限极分类的表来实现web树，不可避免就要递归，如果树的层次很深，那么递归的次数就会很多，这时候极容易导致内存溢出。这样的表理论上可以保存无限极的分类，但在实际开发里面是不行的，因为树的层次过多，那么递归的次数就会过多，这样很容易导致内存溢出，又因为我们的计算机内存是有限的。
那么该如何设计数据库表来实现web树呢？

设计实现web树的数据库表

我们可以将商品分类设计成如下的树状结构：
技术分享
再将其改造成如下样式：
技术分享
树状节点的特点：

  1. 每一个节点都有一个左右值。
  2. 如果右值-左值=1，则代表当前节点为叶子节点。
  3. 如果右值-左值>1，则代表当前节点有孩子节点，值在左右值之间的所有节点，即为当前结点的所有孩子节点。

根据以上树状结构，我们可以使用如下SQL建表语句来设计数据库表：

create table category
(
    id varchar(40) primary key,
    name varchar(100),
    lft int,
    rgt int
);

并向category表中插入一些数据：

insert into category values(‘1‘,‘商品‘,1,18);
insert into category values(‘2‘,‘平板电视‘,2,7);
insert into category values(‘3‘,‘冰箱‘,8,11);
insert into category values(‘4‘,‘笔记本‘,12,17);
insert into category values(‘5‘,‘长虹‘,3,4);
insert into category values(‘6‘,‘索尼‘,5,6);
insert into category values(‘7‘,‘西门子‘,9,10);
insert into category values(‘8‘,‘thinkpad‘,13,14);
insert into category values(‘9‘,‘dell‘,15,16);

这时就会产生一个问题：为了在页面中显示树状结构，需要得到所有结点，以及每个结点在树中的层次。
解决思路：

  1. 要得到结点的层次，就是看节点有几个父亲，例如长虹有2个父亲，则它所在层次就为2。

  2. 如何知道每一个节点有几个父亲呢？这个表有个特点，父亲和孩子都在同一个表中，为得到父亲所有的孩子，可以把这张表想像成两张表，一张用于保存父亲，一张表保存孩子，如下所示：

    select * from category parent,category child;

  3. 父亲下面的孩子有个特点，它的左值>父亲的左值，并且<父亲的右值，如下所示：

    select * from category parent,category child where child.lft>=parent.lft and child.rgt<=parent.rgt;

    以上语句会得到父亲下面所有的孩子。

  4. 对父亲所有孩子的姓名进行归组，然后使用count统计函数，这时就会知道合并了几个孩子，合并了几个孩子姓名，这个孩子就有几个父亲，从而知道它所在的层次。

    select child.name,count(child.name) depth from category parent,category child where child.lft>=parent.lft and child.rgt<=parent.rgt group by child.name;

  5. 最后根据左值排序即可。

    select child.name,count(child.name) depth from category parent,category child where child.lft>=parent.lft and child.rgt<=parent.rgt group by child.name order by child.lft;

我本人使用的是mysql 5.7.11，使用如下查询语句：

select child.id,child.name,child.lft,child.rgt,count(child.name) depth from category parent,category child where child.lft>=parent.lft and child.rgt<=parent.rgt group by child.name order by child.lft;

进行查询时，会报如下错误：

[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggregated column ‘day17.child.lft‘ which is not functionally dependent on columns in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by

解决方法如下：

  • 找到my.ini文件。
    技术分享

  • 在my.ini文件里面设置

    sql_mode=‘STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION‘

    如下图：
    技术分享

  • 重启MySQL服务，问题就可以解决了！

实现web树

现在我们来写代码实现web树。

创建MVC架构的Web项目

在Eclipse中新创建一个day17_tree的Web项目，导入项目所需要的开发包(jar包)，创建项目所需要的包，在java开发中，架构的层次是以包的形式体现出来的。
项目所需要的开发包(jar包)：

序号 开发包名称 描述
1 stl-1.2.jar jstl标签库和EL表达式依赖包
2 mysql-connector-java-5.1.38-bin.jar MySQL数据库驱动包
3 commons-dbcp-1.4.jar java配置dbcp数据库连接池使用的包
4 commons-pool-1.6.jar DBCP依赖的jar包
5 commons-dbutils-1.6.jar Apache组织提供的一个开源JDBC工具类库

项目所需要的包：

序号 包名 描述 所属层次
1 cn.itcast.domain 存放系统的JavaBean类(只包含简单的属性以及属性对应的get和set方法，不包含具体的业务处理方法)，提供给【数据访问层】、【业务逻辑层】、【Web层】来使用 domain(域模型)层
2 cn.itcast.dao 在此小型工程中只存放访问数据库的操作接口的实现类 数据访问层
3 cn.itcast.service 在此小型工程中只存放处理系统业务接口的实现类 业务逻辑层
4 cn.itcast.web.controller 存放作为系统控制器的Servlet(处理请求的servlet) Web层(表现层)
5 cn.itcast.utils 存放系统的通用工具类，提供给【数据访问层】、【业务逻辑层】、【Web层】来使用

以上就是根据此项目的实际情况创建的包，可能还需要创建其他的包，这个得根据项目的需要来定了。
由于我们在应用程序中加入了dbcp连接池，所以还应在类目录下加入dbcp的配置文件：dbcpconfig.properties。dbcpconfig.properties的配置信息如下：

#连接设置
driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/day17
username=root
password=yezi

#<!-- 初始化连接 -->
initialSize=10

#最大连接数量
maxActive=50

#<!-- 最大空闲连接 -->
maxIdle=20

#<!-- 最小空闲连接 -->
minIdle=5

#<!-- 超时等待时间以毫秒为单位 6000毫秒/1000等于60秒 -->
maxWait=60000


#JDBC驱动建立连接时附带的连接属性属性的格式必须为这样：[属性名=property;] 
#注意："user" 与 "password" 两个属性会被明确地传递，因此这里不需要包含他们。
connectionProperties=useUnicode=true;characterEncoding=utf8

#指定由连接池所创建的连接的自动提交（auto-commit）状态。
defaultAutoCommit=true

#driver default 指定由连接池所创建的连接的只读（read-only）状态。
#如果没有设置该值，则“setReadOnly”方法将不被调用。（某些驱动并不支持只读模式，如：Informix）
defaultReadOnly=

#driver default 指定由连接池所创建的连接的事务级别（TransactionIsolation）。
#可用值为下列之一：（详情可见javadoc。）NONE,READ_UNCOMMITTED, READ_COMMITTED, REPEATABLE_READ, SERIALIZABLE
defaultTransactionIsolation=READ_COMMITTED

创建好的项目架构如下图所示：
技术分享

分层架构的代码编写

分层架构的代码也是按照【域模型层(domain)】→【数据访问层(dao、dao.impl)】→【业务逻辑层(service、service.impl)】→【表现层(web.controller、web.UI、web.filter、web.listener)】→【工具类(util)】→【测试类(junit.test)】的顺序进行编写的。

开发domain层

在cn.itcast.domain包下创建一个Category类。
技术分享
Category类的具体代码如下：

public class Category {

    private String id;
    private String name;
    private int lft;
    private int rgt;
    private int depth;
    public String getId() {
        return id;
    }
    public void setId(String id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getLft() {
        return lft;
    }
    public void setLft(int lft) {
        this.lft = lft;
    }
    public int getRgt() {
        return rgt;
    }
    public void setRgt(int rgt) {
        this.rgt = rgt;
    }
    public int getDepth() {
        return depth;
    }
    public void setDepth(int depth) {
        this.depth = depth;
    }

}

开发数据访问层(dao、dao.impl)

在开发数据访问层之前，先在cn.itcast.utils包下创建一个获取数据库连接的工具类(JdbcUtils)。
技术分享
该工具类(JdbcUtils)的代码为：

public class JdbcUtils {
    private static DataSource ds = null;

    static {
        try {
            Properties prop = new Properties();
            InputStream in = JdbcUtils.class.getClassLoader().getResourceAsStream("dbcpconfig.properties");
            prop.load(in);
            BasicDataSourceFactory factory = new BasicDataSourceFactory();
            ds = factory.createDataSource(prop);
        } catch (Exception e) {
            throw new ExceptionInInitializerError(e);
        }
    }

    public static DataSource getDataSource() {
        return ds;
    }

    public static Connection getConnection() throws SQLException {
        return ds.getConnection();
    }

    /*
     * 工具类里面现在没有必要提供release()方法，因为我们是使用dbutils操作数据库，
     * 即调用dbutils的update()和query()方法操作数据库，他操作完数据库之后，会自动释放掉连接。
     */
}

提示：工具类里面现在没有必要提供release()方法，因为我们是使用DBUtils操作数据库，即调用DBUtils的update()和query()方法操作数据库，它操作完数据库之后，会自动释放掉连接。
在cn.itcast.dao包下创建一个CategoryDao类。
技术分享
CategoryDao类的具体代码如下：

public class CategoryDao {

    public List<Category> getAll() {

        try {
            QueryRunner runner = new QueryRunner(JdbcUtils.getDataSource());
            String sql = "select child.id,child.name,child.lft,child.rgt,count(child.name) depth from category parent,category child where child.lft>=parent.lft and child.rgt<=parent.rgt group by child.name order by child.lft";
            List<Category> list = (List<Category>) runner.query(sql, new BeanListHandler(Category.class));

            return list;
        } catch (Exception e) {
            throw new RuntimeException(e);
        }

    }

}

照理说，开发完数据访问层，一定要对程序已编写好的部分代码进行测试。但我们有信心以上代码都不会有任何问题，这点自信都没有，搞鬼啊！

开发service层(service层对web层提供所有的业务服务)

在cn.itcast.service包下创建一个BusinessService类。
技术分享
BusinessService类的具体代码如下：

public class BusinessService {

    public List<Category> getAllCategory() {

        CategoryDao dao = new CategoryDao();
        return dao.getAll();

    }
}

同理，开发完业务逻辑层，一定要对程序已编写好的部分代码进行测试，但我们有信心业务逻辑层的代码没有任何问题，所以我们略过测试这一步。

开发Web层

实现web树

在cn.itcast.web.controller包中创建一个Servlet——ListTreeServlet，用于处理实现web树的请求。
技术分享
ListTreeServlet类的具体代码如下：

public class ListTreeServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        BusinessService service = new BusinessService();
        List<Category> list = service.getAllCategory();
        request.setAttribute("list", list);

        request.getRequestDispatcher("/listtree.jsp").forward(request, response);
    }

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

}

接下来就要创建显示web树的界面(listtree.jsp)了，该页面的创建有一点麻烦，需要我们从网上下载一个树控件：
技术分享
解压该压缩包，将我们需要的xtree.js文件、xtree.css文件、images文件夹拷到我们的项目中，如下：
技术分享
关于这个树控件怎么使用，可以参考其文档xtree/usage.html。在这里就不详细讲解其使用方法了。我们直接给出listtree.jsp页面的代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<!-- The xtree script file -->
<script src="${pageContext.request.contextPath }/js/xtree.js"></script>

<!-- Modify this file to change the way the tree looks -->
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/css/xtree.css">

</head>
<body>
    <script type="text/javascript">
        <c:forEach var="c" items="${list }">
            <c:if test=‘${c.depth==1 }‘> 
                var tree = new WebFXTree(‘${c.name }‘);
            </c:if>

            <c:if test=‘${c.depth==2 }‘> 
                var node${c.depth} = new WebFXTreeItem(‘${c.name }‘); // node2
                tree.add(node${c.depth});
            </c:if>

            <c:if test=‘${c.depth>2 }‘> 
                var node${c.depth} = new WebFXTreeItem(‘${c.name }‘); // node3
                node${c.depth-1}.add(node${c.depth});    // node2.add(node3)
            </c:if>
        </c:forEach>

        document.write(tree);
    </script>
</body>
</html>

至此，实现web树的整个项目就圆满完成，现在我们来测试一把，测试结果如下：
技术分享
可能出现的问题：当我们在浏览器中输入访问地址http://localhost:8080/day17_tree/ListTreeServlet访问服务器，显示web树时，文件夹图片显示不出来，那一定是图片的路径写错了。xtree.js文件里面引用图片采用的是相对路径，那么相对路径相对的是谁呢？
答：相对的是http://localhost:8080/day17_tree这个目录，该目录的下是有images目录的，所以我们显示web树是没有任何问题的。

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

    实现web树


联系
我们