Vue+Java实现在页面树形展示文件目录

getInfo.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/**
 * @author Sue
 * @create 2019-07-16 15:06
 **/
@RestController
public class getInfo {
    static StringBuilder buf =new StringBuilder();
    StringBuilder sb = new StringBuilder();
    int kai = 0;
 
    public void println() {
        System.out.println(buf);
    }
    public void scan(String path) {
        File f = new File(path);
        if (!f.getName().startsWith(".")) {
            if (f.isDirectory()) {
                scan(new File(path));
                buf.delete(buf.length() - 2, buf.length());
            } else {
                System.out.format("{\"label\" : \"%s\"}", f.getName() + "FFFFFFFFFFFFFFF");
            }
        }
    }
    private void scan(File f) {
        if (!f.getName().startsWith(".")) {
            if (f.isDirectory() && f.listFiles().length != 0) {
                buf.append(space(kai)).append("{\n").append(space(++kai)).append("\"label\" : \"").append(f.getName()).append("\",\n").append(space(kai))
                        .append("\"children\" : [\n");
                kai++;
                Arrays.asList(f.listFiles()).forEach(this::scan);
                buf.delete(buf.length() - 2, buf.length());
                buf.append("\n").append(space(--kai)).append("]\n").append(space(--kai)).append("},\n");
            } else {
                buf.append(space(kai)).append("{\n").append(space(++kai)).append("\"label\" : \"").append(f.getName()).append("\"\n").append(space(--kai))
                        .append("},\n");
            }
        }
    }
    public String space(int kai) {
        if (kai <= 0) {
            return "";
        }
        char[] cs = new char[kai << 1];
        Arrays.fill(cs, ' ');
        return new String(cs, 0, cs.length);
    }
    @GetMapping("/getInfo")
    public Map getInfo(){
        HashMap<String, Object> stringObjectHashMap = new HashMap<>();
        getInfo d = new getInfo();
        d.scan("D:\\usr");
        stringObjectHashMap.put("res", "[" + buf + "]");
        return stringObjectHashMap;
    }
}

　index.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui@2.10.1/lib/index.js"></script>
 
  <style type="text/css">
    @import url("https://unpkg.com/element-ui@2.10.1/lib/theme-chalk/index.css");
  </style>
  <body>
  <div id="app">
<el-tree :data="data" :props="defaultProps" show-checkbox @node-click="handleNodeClick"></el-tree>
</div>
  </body>
<script>
var Main = {
    data() {
      return {
        data:  [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    beforeMount() {        
            //1.获得xhr对象
            if (XMLHttpRequest) {
                var xhr = new XMLHttpRequest();
            } else {
                var xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2. 建立连接
            xhr.open("get", "Http://99.48.59.105:8080/getInfo", true);
            //是否携带跨域信息
            xhr.withCredentials = true;
            //返回数据格式
            xhr.responseType = 'json';  //
            var vm = this;
            //3. 设置请求状态回调函数
            xhr.onreadystatechange = function () {
                //如果请求完成，且成功!
                console.log(xhr.readyState,xhr.status)
                if (xhr.readyState == 4 && xhr.status == 200) {
                         
                    // 成功回调
                    if (xhr.responseType.toLowerCase() !== "json") {
                        //如果服务器端响应类型不是json，则调用后续resolve操作，并传入原始responseText，做后续处理
                        vm.data = xhr.responseText;
                    } else {
                        //如果服务器端响应类型是json，则自动调用JSON.parse转为js对象，再交给resolve函数做后续处理
                        vm.data = JSON.parse(xhr.response.res);
                    }
                }
            }
            //4.只有type为post，才需要设置请求头
            //if (type.toLowerCase() == "post")
            //  xhr.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded');  //'application/json'
            //5.只有type为post，才需要send时，传入参数
            xhr.send(null);
        },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
</script>

　页面展示效果如下：

 

 
posted @   少说点话  阅读(3209)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
网站运行：7年51天17时24分32秒
点击右上角即可分享
微信分享提示