仿百度网盘的面包屑导航实现

作者:jcmp      发布时间:2021-05-11      浏览量:0
最近项目需要做一个类似网盘的东西,然后有

最近项目需要做一个类似网盘的东西,然后有个功能是,浏览文件的时候能够返回之前的目录。因为以前没接触过,思考了许久,终于算是实现了,特此记录一下。

首先说一下什么是面包屑: 在bootstrap官网中这么描述的: 在一个带有层次的导航结构中标明当前页面的位置。 类似下图:

实现这个功能是必要的,因为用户如果点进一个文件夹,发现没有想看的文件,可此时一个一个往回点又太麻烦,所以需要一个面包屑路径,帮助用户快速回到之前的文件夹。

先来看看实现后的样子:

点击Team01的文件夹会返回上一级:

下面来看实现思路:

一、数据库设计

两张表:文件信息表和文件关系表 文件信息表用于存放文件的信息,比如ID,大小,名称等等。 文件关系表用于描述文件之间的父子关系。

数据如下:

二、后台设计

后台使用MVC模式,所以只贴controller层的代码,并讲一下逻辑就好了。

因为我们点击之前的路径时,需要知道文件ID才能去数据库查,需要知道当前路径才能更新面包屑。 所以通过生成标签,在这个标签里放置文件ID列表和文件路径列表。类似这样:

可以看到这两个input标签的value中存放着我们需要的数据。这样就为实现这个功能做好了数据准备。

后台接受四个参数: 文件ID,当前路径,当前路径对应的ID序列,当前路径对应的路径序列。得到之后,进行拼接后通过EL表达式将拼接后的路径写到input里。

同时还要修改面包屑的标签的href:

怎么修改这个href呢?我们要保证之前的链接的ID序列和路径序列要恢复原样,也就是要比后面的链接短。举个例子:

面包屑:path1 -> path2 -> path3 文件夹ID序列:3 ->5 -> 7 路径序列: path1 ->path2 -> path3。

假设现在处于path3层级。点了path1。那么此时文件夹ID序列和路径序列必须恢复到path1时候的样子。即: 面包屑:path1 文件夹ID序列:3 路径序列: path1。

所以我们需要对这两个序列进行截取,然后拼接到标签的href属性上。

思路大致就是这样,相关代码如下:

controller代码:

JavaScript代码:

JSP相关代码: