基于VUE全家桶实现多用户多级目录文件系统【100011357】

# 多用户多级目录文件系统的实现 # 一、设计思想说明 ## 1.1 设计环境 开发语言：html、css、Js 开发框架：Vue 拓展工具：webpack、iView组件库 简介：本项目是基于Vue全家桶开发的纯前端Web项目，将文件操作的底层模拟全部通过页面显示出来。 ## 1.2 设计思想 文件存储空间管理：位示图 盘块分配方式：显示连接 主体构思：因为是模拟底层，所以可以将页面分为两半，一半是底层的位示图实时呈现，另一部分是文件的各式操作。然后，用户主要通过文件操作去感受位示图的实时改变来理解文件操作的底层原理。而用户到底层中间，需要经历以下这些流程： **web页面—>文件操作—>FAT盘块操作—>位示图实时更新—>web页面** # 二、系统结构 因为要模拟文件操作的底层，可以大致分为三个层次去实现： 第一层：也是最底层的，关于位示图-FAT盘块的基本操作。 第二层：文件操作，文件操作是基于FAT块来实现的，比如写一个文件就是将文件数据逐个写入FAT块中，起到的是一三层之间的桥梁作用。 第三层：目录操作，是基于第二层的文件操作的封装，面向用户的使用逻辑封装出来的各类方法，比如增加子目录、在当前目录新增文件等。  # 三、数据结构的说明 ## 3.1 结构体定义 主要的结构体有三个： - FATstack：一个基本盘块，位示图的基本单元。 - File：一个文件，通过firstStack属性和FATstack链接关系 - Dir：一个目录，通过父目录和子目录数组定位到目录树的位置，子目录数组dirArr可以链接到多个子目录，子文件数组fileArr可以链接到多个File ## 3.2 数据链接关系图  # 四、算法流程图 ## 4.1 新建文件  ## 4.2 删除文件  ## 4.3 读取文件  ## 4.4 编辑文件  ## 4.5 新建子目录  ## 4.6 删除子目录  ## 4.7 返回上一级目录  ## 4.8 到下一级目录  # 五、主要函数列表 ## 5.1 FAT操作 | 函数原型 |功能 |入口、出口参数说明 | |----|----|----| | initFAT () |初始化FAT |无 | | writeStack (str) |写入新的Stack |Srt：写入的字符串 | | readStack (index) |递归，读取一个字符串 |Index，首盘号 | | delStack(index) |删除一个字符串的stack |Index，首盘号 | | changeStack(index, newStr) |根据首盘号（首物理地址）修改stack，将oldStr置换为newStr |Index：首盘号；NewStr:新的字符串 | ## 5.2 file操作 | 函数原型 |功能 |入口、出口参数说明 | |----|----|----| | newFile( fileName, fileStr, power) |写入新的文件，成功则返回新的文件 |FileName：文件名；FileStr:文件字符串；Power：文件权限 | | readFile(file) |读文件，成功则返回文件字符串 |File:要读取的文件 | | delFile(file) |删文件，成功则返回true |File：要删除的文件 | | changeFile(oldFile, newFileName, newFileStr) |改写文件 |OldFile：旧的文件；NewFile：新的文件；NewFile：新的文件字符串 | ## 5.3 dir操作 | 函数原型 |功能 |入口、出口参数说明 | |----|----|----| | toParentDir() |返回父目录（上一级目录） |无 | | toSubDir(childIndex) |进入子目录（下一级目录） |childIndex：要进入的子目录的下标 | | newFile(fileName, fileStr, power) |新建文件 |fileName：文件名fileStr：文件字符串 power：文件权限 | | delFile(file) |删除文件 |File：待删除文件 | | readFile(file) |读取文件 |File：待读取文件 | | changeFile(oldFile, newFileName, newFileStr) |修改文件 |oldFile：旧文件；newFileName：新文件名 ；newFileStr：新文件字符串 | | newSubDir(dirName) |新建子目录 |dirName：新建子目录名 | | delSubDir(dir) |删除子目录 |Dir：待删除的子目录 | # 六、测试与分析 ## 6.1 测试 ### 6.1.1 登录 测试账号：user 测试密码：1234  ### 6.1.2 文件操作和位示图的及时更新 左侧：FAT-位示图，可以查看0-1位示图，也可以查看每一块存储的字符 右侧：文件管理页面，可以进行文件的各种操作   ### 6.1.3 递归删除一个子目录里的全部文件    ## 6.2 分析 其实底层的模拟逻辑是比较清晰的，但是关键是如何把底层原理显示给用户，这就涉及到比较复杂的分层问题。最后我是将整个文件操作分成三层去模拟实现，然后把底层和最外层同时暴露给用户，最大程度上模拟了文件操作的原理。 而其中，比较难的部分，应该是子目录的删除的吧，因为删除一个子目录不当只是删除这个目录而言，还涉及到了删除的文件所占内存的回收，所以，删除一个子目录，必须先递归去删除目录里面全部嵌套的文件，把它占据的全部内存回收之后，再去移除这个目录，才算是真正的删除。 # 七、用户使用说明 ## 7.1 登录 测试账号：user 测试密码：1234  ## 7.2 主界面操作