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

getInfo.java

/**
 * @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

<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 @ 2019-07-16 17:13  少说点话  阅读(3105)  评论(0)  编辑  收藏  举报
网站运行：