element tree 显示 ftp 目录树_el 显示服务器文件目录-优快云博客

本文链接：https://blog.youkuaiyun.com/ScutZt/article/details/87800703

本文介绍了如何在前端展示FTP服务器的目录树，通过Element UI的Tree组件实现懒加载功能。首先展示了获取FTP目录树的Java代码，利用`org.apache.commons.net.ftp.FTPClient`连接并获取根目录下的文件夹列表。然后，阐述了将这些数据适配到Element Tree组件中进行展示的过程，虽然细节繁多，但整体思路清晰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工作中遇到要求，在前端做出一个 ftp 服务器的目录树。首先上效果图。

俩个问题：1，获取到ftp的目录树。2，使用element tree组件显示出来。

1：获取到ftp的目录树

刚开始没有使用懒加载方式，使用递归方法获取到所有的目录树（链接：https://blog.youkuaiyun.com/ScutZt/article/details/87774485），不过该ftp下文件太多，目录树数据比较大，传到前端后浏览器直接奔溃。于是开始考虑懒加载方式。

首先定义树节点结构：

public class TreeVo {
    // label为节点标题
    private String label;
    // leaf标记是否为叶子节点
    private boolean leaf;
 

    public TreeVo() {
    }

    public TreeVo(String label, boolean leaf) {
        this.label = label;
        this.leaf = leaf;
    }

    public boolean isLeaf() {
        return leaf;
    }

    public void setLeaf(boolean leaf) {
        this.leaf = leaf;
    }

    public String getLabel() {
        return label;
    }

    public void setLabel(String label) {
        this.label = label;
    }


}

懒加载获取ftp目录有俩步，一，根据ftpIp，port，user，password连接上ftp服务器，如果连接成功则返回根目录下的文件夹列表，连接失败则返回错误信息。连接ftp使用的是 org.apache.commons.net.ftp.FTPClient;

java代码如下：

       // 请求ftp链接，并返回根目录下文件夹列表
       @Override
       public Map findFtpDirectoryList(EtlFileSource etlFileSource) {
        
        // etlFileSource类中包含ftp连接的参数。

        Map<String, Object> resultMap = new HashMap<>(2);
        String flag = "success";

        try {
            ftpClient = new FTPClient();
            ftpClient.connect(etlFileSource.getFtpIp(), Integer.parseInt(etlFileS