ssm实现文件夹层级显示

文件夹层级显示

一、前言

最近在用ssm做一个网盘项目，需要实现新建文件夹，文件夹里也可新建文件夹，文件夹含文件夹或文件等的一些我们日常操作电脑经常遇到的习以为常的操作，发现要实现还不是想象中那么简单，接下来来讲讲我实现的步骤。

二、实现流程

首先先讲一下我的一个基本思路：

1. 文件夹并不是实际存在的文件夹，而是单纯存在数据库里，然后通过查询显示在前端页面的
2. 文件夹数据库要有一个folder_id和folder_parent字段
3. 当文件夹处于根目录时该字段值为null，当文件夹在某个文件夹下则folder_parent为父文件夹的folder_id
4. 这样通过当前位置来查询对应folder_parent的话就可以显示当前页的文件夹了

三、实例演示

1. folder表

2. 前端用prompt做一个简单的新建文件夹提示框

function newFolder() {
            var name = prompt("给文件夹起个名把");
            if(name == null){
                return false;
            }
            window.location.href="${pageContext.request.contextPath}/folder/newFolder/"+name+"/${empty folderSite?0:folderSite}";
        }

此处通过点击后调用该函数，将新建文件夹的名称以及当前所在文件夹位置folderSite传到后台，这个folderSite是在进入页面时存在视图里的，到首页前会将folderSite取0值存入model，在之后的页面跳转时，如点击进入文件夹等操作，都要将该文件夹的folder_Id属性捎带上，这样我们能实时了解当前所在页面文件夹位置

3. 后台接口

 @RequestMapping("/newFolder/{folderName}/{folderSite}")
    public String newFolder(@PathVariable("folderSite") Integer folderSite,@PathVariable("folderName") String folderName,HttpServletRequest req)throws Exception{
        Integer site = null;
        if (folderSite!=0){
            site = (Integer) folderSite;
        }
        Folder folder = new Folder(..., folderName，site ,...);
        int insert = folderService.newFolder(folder);//将文件夹数据插入数据库
        if(site ==null){
            site = 0;
        }
        return "redirect:/user/visitHome/"+site;//带着当前页位置返回首页
    }

此处通过获取前端传来的文件夹名称，以及当前页所在的文件夹的id（即folderSite），插入folder的数据，其中这个folder的folder_parent字段就是当前所在文件夹的folder_id，之后通过每次访问文件夹传folder_id的方式就可以获取到当前页数据了

效果如下

四、结语

到这里就基本实现了文件夹的层级演示，至于对文件的处理可以用同样的方式，在文件的file_parent字段中插入所属文件夹的folder_id来实现查看