Vue+Java实现在页面树形展示文件目录
2024-08-31 07:53:52
getInfo.class
/**
* @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>
页面展示效果如下：
最新文章
- iOS 报错汇总
- 记录一次Quartz2D学习(四)
- 如何做一个avalon组件
- OSVERSIONINFO
- mysql输出的错误提示是法语
- JNI/NDK开发指南（四）——字符串处理
- .NET基础——ASSCII码表
- js MD5加密后的字符串
- BZOJ 3160: 万径人踪灭 [fft manacher]
- No module named zope.interface error的解决
- python pandas库的基本内容
- 经典设计模式-iOS的实现
- 这是一份很详细的 Retrofit 2.0 使用教程（含实例讲解）（转）
- set/multiset_01
- java final修饰变量时的一种情况
- linux 信号处理 五 (示例)
- process_进程池
- 当数据库的字段为date类型时候
- [Asp.net]Calendar+JqueryUi实现日程管理（右键菜单，添加，编辑，删除，源码）
- android学习十一 高级调试分析功能