Vue+Java实现在页面树形展示文件目录
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>
页面展示效果如下：
Vue+Java实现在页面树形展示文件目录的更多相关文章
- Java快速开发平台强大的代码生成器，JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布
JEECG 3.7.5 VUE+ElementUI SPA单页面应用版本发布 此版本为Vue+ElementUI SPA单页面应用版本,提供新一代风格代码生成器模板,采用Vue技术,提供两套精美模板E ...
- 实习模块vue+java小型全栈开发（三）
实习模块vue+java小型全栈开发(三) --dx 背景 首先,先给自己一个答案:这篇博客我定义为(三),因为之前的两个模块页面,内容都是一样的,但是被改了几次需求,就一直拖着没有上传. 今天是真正 ...
- JSP页面数据展示：分组数据展示
一.描述: 页面上要展示的数据只要写好sql从数据库查出来即可,但是展示有时候不是太好处理.比如工作中遇到的这种情况:有一个问题处理的流程,其中需要选择下一处理人,这些处理人要以部门的形式分组展示,实 ...
- Selenium2学习-024-WebUI自动化实战实例-022-网站不同分辨率下页面样式展示兼容性问题解决方案 -- 设置浏览器显示区域大小（无人值守，节约测试成本的福音，BOSS 最爱）
在 Web UI 自动化测试的过程中,通常会测试页面在不同分辨率下的显示效果,即在不同大小的显示器上全屏浏览器后的页面展示,此种测试方法需要购置不同大小的显示器,或者频繁的设置屏幕分辨率,不仅浪费了大 ...
- vue滚动行为控制——页面跳转返回上一个页面保留滚动位置
需求分析: 一般这个功能在后台管理系统用的比较多,因为后台页面都是在当前页面打开,对于某些列表筛选页,如果列表数据比较多,页面就会滚动.当页面发生滚动,对列表数据进行查看或者编辑的时候,跳转到下一级页 ...
- JAVAEE——宜立方商城09：Activemq整合spring的应用场景、添加商品同步索引库、商品详情页面动态展示与使用缓存
1. 学习计划 1.Activemq整合spring的应用场景 2.添加商品同步索引库 3.商品详情页面动态展示 4.展示详情页面使用缓存 2. Activemq整合spring 2.1. 使用方法 ...
- Java-Runoob-高级教程-实例-环境设置实例：3.Java 实例 - 如何执行指定class文件目录（classpath）？
ylbtech-Java-Runoob-高级教程-实例-环境设置实例:3.Java 实例 - 如何执行指定class文件目录(classpath)? 1.返回顶部 1. Java 实例 - 如何执行指 ...
- SSM(SpringMVC+Spring+MyBatis)三大框架使用Maven快速搭建整合（实现数据库数据到页面进行展示）
本文介绍使用SpringMVC+Spring+MyBatis三大框架使用Maven快速搭建一个demo,实现数据从数据库中查询返回到页面进行展示的过程. 技术选型:SpringMVC+Spring+M ...
- Sharepoint页面项目展示画廊纯前端实现，后端用list/library简单维护
需求背景: Sharepoint页面项目展示画廊.图片+文字,要求图片与文字用Sharepoint Library维护,然后在sharepoint页面上被调用,生成项目展示画廊. 解决方案(纯前端), ...
随机推荐
- 测试员小白必经之路----常见的Dos命令
Dos是什么? 是一个命令行执行的操作系统 进入终端: win + r 运行输入: cmd 当前计算机的本地时间:Time 退出当前正在执行的命令: ctrl +c 设置在多少时间后自动关机: Shu ...
- 03python面向对象编程2
3.继承 如果你要编写的类是另一个现成类的特殊版本,可使用继承.一个类继承另一个类时,它将自动获得另一个类的所有属性和方法:原有的类称为父类,而新类称为子类.子类继承了其父类的所有属性和方法,同时还可 ...
- 〇——什么是SHELL
在这段时间里中我们了解一下SHELL编程. 什么是shell shell是Linux的命令解释器,用于解释用户对操作系统的操作. 用shell解释的Linux命令有很多,可以通过cat/etc/she ...
- 4.Pod控制器
Controller-manager: Kube-controller-manager Cloud-controller-manager:在K8S上启用CloudProvider的时候才需要,用来配合 ...
- C++的命令行参数（gflag）
参考:https://www.cnblogs.com/myyan/p/4699940.html 这是一款google开源的命令行参数解析工具,支持从环境变量.配置文件读取参数(可以用gflags代替配 ...
- 一篇文章带你了解JavaScript中的语法，数据类型，流程控制语句以及函数
作者 | Jeskson 来源 | 达达前端小酒馆 1 JavaScript有多重要啊,才能让我说说一下,其中的语法,操作符,数据类型,内置功能等. 语法: 在JavaScript中的变量,函数名和操 ...
- python-登录保持
cookies.Session import requests url1="http://127.0.0.1:5000/login" url2="http://127. ...
- HDU 6230 Palindrome ( Manacher && 树状数组)
题意 : 给定一个字符串S,问你有多少长度为 n 的子串满足 S[i]=S[2n−i]=S[2n+i−2] (1≤i≤n) 参考自 ==> 博客 分析 : 可以看出满足题目要求的特殊回文子串其 ...
- 旧题再做【bzoj2287】【[pojchallenge]消失之物】分治背包
(上不了p站我要死了) 今天听了 doggu神 讲了这道题的另一种做法,真是脑洞大开.眼界大开.虽然复杂度比黄学长的要大一点,但不总结一下简直对不起这神思路. 方法1:黄学长的做法(点这里) Desc ...
- VS2019界面透明、主题修改和导出设置
目录 安装插件Color Theme Editor for Visual Studio 2019和ClaudiIDE 导入主题 背景修改 效果预览 导出设置遇到错误924 其他帮助文档 我自己用的主题 ...