后台Node.js这个文件tree接口就写完了，然后用Postman测一下
顺利拿到JSON格式的数据，接口over
然后是前端页面的获取，以及填充
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">
<meta name="author" content="心梦缘ocean ocl" />
<title>My tree demo</title>
<style type="text/css">
/*主页面样式*/
.leftNav {
width: 20%
height:500px
border:#B9E0F7 1px solid
margin-left: 1%
margin-right: 1%
}
#footer {
color:#808080
line-height: 1.6em
padding: 0 0 1em 0
}
/*我的树样式表*/
.treeDiv {
color: #636363
font-size: 14px
font-weight: normal
background-color: #fff
color: black
overflow: auto
padding: 0 0 1em 0
overflow-x: hidden
}
.treeNode {
white-space: nowrap
text-indent: -14px
margin: 6px 2px 5px 14px
}
a.treeUnselected:hover, a.treeSelected:hover {
background-color: #BFD9ED
text-decoration: none
}
a.treeUnselected, a.treeSelected {
color: black
padding: 1px 3px 1px 0
text-decoration: none
}
a.treeSelected {
background-color: #B9E0F7
}
a.treeUnselected {
background-color: transparent
}
.treeSubnodes {
display: block
}
.treeSubnodesHidden {
display: none
}
.treeNode img.treeNoLinkImage, .treeNode img.treeLinkImage {
height: 15px
margin-left: 5px
margin-right: 0px
width: 15px
}
.treeNode img.treeLinkImage {
cursor: pointer
}
div.treeNode a, div.treeNode span.apiRoot {
display: inline-block
margin-left: 24px
text-indent: 0
white-space: normal
width: 95%
word-wrap: break-word
}
div.treeNode span.category {
cursor: pointer
}
</style>
</head>
<body>
<div class="leftNav">
<div id="samplesToc">
<div id="tree" style="top: 35pxleft: 0px" class="treeDiv">
<div id="treeRoot" onselectstart="return false" ondragstart="return false">
<div class="treeNode">
<img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">
<span onclick="expandCollapse(this.parentNode)" class="category">目录节点一 </span>
<div class="treeSubnodesHidden">
<div class="treeNode">
<img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">
<span onclick="expandCollapse(this.parentNode)" class="category">目录节点一子目录 </span>
<div class="treeSubnodesHidden">
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">二级叶子结点一</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">二级叶子结点二</a>
</div>
</div>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点一</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点二</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点三</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点四</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点五</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点六</a>
</div>
</div>
</div>
<!--end block-->
<div class="treeNode">
<img src="../graphics/treenodeplus.gif" onclick="expandCollapse(this.parentNode)" class="treeLinkImage">
<span onclick="expandCollapse(this.parentNode)" class="category">目录节点二</span>
<div class="treeSubnodesHidden">
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点一</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点二</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点三</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点四</a>
</div>
<div class="treeNode">
<a href="#" class="treeUnselected" onclick="clickAnchor(this)">叶子结点五</a>
</div>
</div>
</div>
<!--end block-->
</div>
</div>
</div><!-- end samplesToc -->
</div><!-- end leftNav -->
<div class="right content">
</div><!-- end main content-->
<div id="footer" align="center">
</div><!-- end footer-->
<script type="text/javascript">
var treeSelected = null//选中的树节点
var imgPlus = new Image()
imgPlus.src="../graphics/treenodeplus.gif"
var imgMinus = new Image()
imgMinus.src="../graphics/treenodeminus.gif"
//父节点展开事件
function expandCollapse(el)
{
//如果父节点有字节点（class 属性为treeSubnodesHidden），展开所有子节点
if (el.className!= "treeNode"){
return //判断父节点是否为一个树节点，如果树节点不能展开，请检查是否节点的class属性是否为treeNode
}
var child
var imgEl//图片子节点，在树展开时更换图片
for(var i=0i <el.childNodes.lengthi++)
{
child = el.childNodes[i]
if (child.src)
{
imgEl = child
}
else if (child.className == "treeSubnodesHidden")
{
child.className = "treeSubnodes"//原来若隐藏，则展开
imgEl.src = imgMinus.src//更换图片
break
}
else if (child.className == "treeSubnodes")
{
child.className = "treeSubnodesHidden"//原来若展开，则隐藏
imgEl.src = imgPlus.src//更换图片
break
}
}
}
//子节点点击事件，设置选中节点的样式
function clickAnchor(el)
{
selectNode(el.parentNode)
el.blur()
}
function selectNode(el)
{
if (treeSelected != null)
{
setSubNodeClass(treeSelected, 'A', 'treeUnselected')
}
setSubNodeClass(el, 'A', 'treeSelected')
treeSelected = el
}
function setSubNodeClass(el, nodeName, className)
{
var child
for (var i=0i <el.childNodes.lengthi++)
{
child = el.childNodes[i]
if (child.nodeName == nodeName)
{
child.className = className
break
}
}
}
</script>
</body>
</html>
运行效果：
为了安全性，现在的浏览器厂商已经禁用了对本地磁盘文件操作的API。
最多可以写点cookie到客户端，而且限制还很多
所以只要是浏览器里面的类似js这样的脚本语言都是不能对客户端的本地文件进行操控的
