毕业设计论文-基于web的在线文件管理系统.pdf

大连工业大学 2018 届本科生毕业设计（论文） 毕毕 业业 设设 计（计（论论 文）文） 题目： 基于 web 的在线文件管理系统 子题： 专 业：计算机科学与技术 指导教师：苏 波 学生姓名： 刘 明 班级-学号： 计算机 143-08 2018 年 6 月 大连工业大学 2018 届本科生毕业设计（论文） 大连工业大学本科毕业设计（论文）大连工业大学本科毕业设计（论文） 基于基于webweb的的在线文件管理系统在线文件管理系统 Online File Management System Based On Web 设计（论文）完成日期 年 月 日 学 院： 信息科学与工程学院 专 业： 计算机科学与技术 学 生 姓 名： 刘 明 班 级 学 号： 计 143-08 指 导 教 师： 苏 波 评 阅 教 师： 2018 年 6 月 大连工业大学 2018 届本科生毕业设计（论文） - I - 摘 要 随着计算机技术的发展， 人们不免会在工作中经常通过各种办公软件产生 很多文档，而文档对于企业信息的管理有着越来越重要的地位。 “基于 web 的 在线文件管理系统”的开发目的就是为了更好的管理企业的文档,解决企业内 部文件在线管理，实现共享，授权控制和版本控制的问题。 在本论文中,主要阐述了“基于 web 的在线文件管理系统”这一选题的意 义，需求分析，概要设计，详细设计，以及测试的各个过程。从层次模型的角 度上来看， 该网站的设计主要分为前端开发， 后台服务器端开发， 数据库设计。 从系统的功能模块来看分为，用户注册和登录模块；文件功能模块；文件夹功 能模块； 快捷方式功能模块； 快捷方式功能模块； 权限管理模块； 回收站模块； 操作历史模块。 “基于 web 的在线文件管理系统”的主要功能是预览文件，可以实现图 片，视频，音频，office 文档的预览。上传文件，上传相同名字的文件时文件 的版本号属性将自动加一，达到实现版本控制的目的。 此网站所用到的技术是分别为： 前台是 Vue 框架和 iView 组件库， 后台是 PHP 语言和 TwoThink5.0 框架。开发软件是 JetBrains PhpStorm。 此网站的特色是权限管理模块，用户可以将指定的文件或文件夹的显示、 写入、 删除的权限授予不同的用户， 该操作需要用户登录并且对将授权的文件 或文件夹有相应的权限。 关键词：文件管理系统；Vue；PHP；TwoThink5.0；网站 大连工业大学 2018 届本科生毕业设计（论文） - II - Abstract With the development of computer technology, people often produce a lot of documents through various office software in the work, and the document has a more and more important position for the management of enterprise information. The purpose of the development of “web based online file management system“ is to better manage the documents of the enterprise, solve the problems of online management of documents, realize sharing, authorization control and version control. In this paper, the significance of the topic “online file management system based on Web“, requirements analysis, summary design, detailed design, and the various processes of the test are discussed. From the point of view of hierarchical model, the design of the website is mainly divided into front-end development, back-end server development and database design. From the function of the system, it is divided into user registration and login module; file function module, folder function module; shortcut function module; shortcut function module; authority management module; recovery station module; operation history module. The main function of the “web based online file management system“ is to preview files, which can preview pictures, videos, audio and office documents. When uploading a file and uploading the same name file, the version number attribute of the file will be automatically added to achieve the purpose of version control. The technologies used in this website are: the front desk is the Vue framework and the iView component library, the background is the PHP language and the TwoThink5.0 framework. The development software is JetBrains PhpStorm. The feature of this site is the privilege management module, which allows users to grant different users the permission to display, write, and delete the specified files or folders, which requires the user to log in and have the appropriate privileges for the authorized files or folders. Key Words：File Management System；Vue；PHP；TwoThink5.0；Web Site 大连工业大学 2018 届本科生毕业设计（论文） - III - 目 录 摘 要 I Abstract . II 第一章 绪论 . 1 1.1 选题的意义 . 1 1.2 选题在计算机水平 1 1.3 设计的内容和实施方案 1 1.4 主要技术和理论依据 3 1.5 设计的特色和创新之处 3 第二章 需求说明 . 4 2.1 需求综述 4 2.1.1 产品的状况 4 2.1.2 产品的目标 4 2.1.3 用户特点 4 2.1.4 运行环境和实现上的限制 4 2.2 外部接口需求 4 2.2.1 用户界面 4 2.2.2 软件接口 5 2.3 系统功能需求 5 2.3.1 系统用例图 5 2.3.2 功能概述 6 2.4 性能需求 10 2.4.1 易用性需求 10 2.4.2 准确性和及时性 10 2.4.3 兼容性 10 2.4.4 安全性需求 10 第三章 方案设计 . 11 3.1 设计概述 11 3.2 命名规则设计 11 3.3 总体设计 13 大连工业大学 2018 届本科生毕业设计（论文） - IV - 3.3.1 网络拓扑结构图 13 3.3.2 系统结构框图 13 3.3.3 程序流程图 14 3.3.4 需求规定 16 3.3.5 运行环境 17 3.4 用户界面设计 18 3.5 数据结构设计 20 3.5.1 E-R 图 20 3.5.2 数据库表设计 20 3.6 出错处理设计 24 3.7 系统维护设计 24 第四章 软件详细设计 . 25 4.1 详细设计概述 25 4.1.1 特定用语与缩写 25 4.1.2 工具及环境 25 4.2 程序描述 26 4.2.1 主页初始化数据 26 4.2.2 文件功能模块 28 4.2.3 文件夹功能模块 29 4.2.4 快捷方式功能模块 30 4.2.5 权限功能模块 31 4.2.6 回收站功能模块 31 4.2.7 操作历史功能模块 32 4.2.8 登录注册功能模块 33 第五章 功能测试 . 34 5.1 测试执行 34 5.2 测试内容 34 5.3 测试覆盖功能 34 5.4 测试用例 35 5.4.1 登录注册功能模块 . 35 5.4.2 文件功能模块 . 36 大连工业大学 2018 届本科生毕业设计（论文） - V - 5.4.3 文件夹功能模块 . 38 5.4.4 权限管理功能模块 . 39 5.5 测试结论 44 结 论 . 45 参考文献 . 47 致 谢 . 48 大连工业大学 2018 届本科生毕业设计（论文） - 1 - 第一章 绪论 1.1 选题的意义 随着我国经济的快速发展和信息化水平的提高， 怎样利用先进的管理手段， 提高企业的管理水平， 是现阶段所面临的一个重要课题。 在竞争越来越激烈的 今天企业如何提高办公效率显得越来越重要。 尤其是对于大型企业来说， 企业 内部结构复杂，条文众多，横向和纵向间需要沟通信息，发送文件。如果没有 一套可靠的企业内部文件管理系统，单凭文件发放，不仅效率低下，而且浪费 纸张 1。 文档作为一种信息资源在企业中发挥着重要的作用。 随着计算机技术的发 展， 人们不免会在工作中经常通过各种办公软件产生很多文档， 而文档对于企 业信息的管理有着越来越重要的地位 2。 Web 技术以网页为浏览的载体 3，方便快捷，可能很好的满足大部分人使 用的需要。而且随着技术的发展，以百度网盘，坚果云为代表的文档共享技术 逐渐成为热点。 “基于 web 的在线文件管理系统”的开发目的就是为了更好的管理企业 的文档， 解决企业内部文件在线管理， 实现共享， 授权控制和版本控制的问题。 1.2 选题在计算机水平 目前很多企业都采用办公自动化系统进行公司内部文档之间的分享， 部分 解决了文档授权阅览、分级使用等问题 4，但仍然有不足。一是重要的文档难 以实现授权访问和上传， 二是难以实现大家手中的文档的共享， 三是难以实现 文档的版本控制，四是难以实时准确的记录人们的操作记录。 5 1.3 设计的内容和实施方案 设计的主要内容：网站的页面设计主要是登录注册页，欢迎页面，首页三 大页面。 （1） 登录注册页：实现登录注册功能。 （2） 欢迎页面：显示各个盘符下的不同文件类型的文件总数。 大连工业大学 2018 届本科生毕业设计（论文） - 2 - （3） 首页：又分为左侧导航和右侧主体两个部分。 左侧导航包括：文件夹（快捷方式） ，磁盘，其他。其他包括回收站和操 作历史。 右侧主体包括：当前文件夹，面包屑，操作选项卡，文件列表。 右侧的主要功能如下： （1） 文件在线查看 用户可对部分类别的文件进行在线查看， 该操作需要用户登录并且登录用 户对该文件有查看的权限。 （2） 文件删除 用户可以删除当前文件下的指定文件， 实现逻辑删除， 删除的文件将在回 收站中显示， 并且操作记录显示到操作历史中， 该操作需要用户登录并对该文 件有删除权限 （3） 上传文件 用户可上传文件， 该操作需要用户登录并且登录用户对上传到的目标文件 夹有写入的权限。 （4） 创建文件夹 用户可以在当前文件夹下进行新的文件夹的创建， 即在当前文件夹下新建 一个文件夹，该操作需要用户登录并且需要对当前文件夹有写入的权限。 （5） 复制文件夹 用户可以复制当前文件夹， 包括当前文件夹下的全部内容， 即实现深拷贝。 （6） 粘贴文件夹 用户可以在复制的文件中选择要粘贴的文件夹，并粘贴到当前文件夹下， 该操作需要用户登录并且对当前文件夹有写入的权限。 （7） 清空文件夹 用户可以清空当前文件夹下的所有内容， 该操作需要用户登录并且对当前 文件夹有删除的权限。 （8） 创建快捷方式和删除快捷方式 用户可以创建当前文件夹为快捷方式， 快捷方式将显示在左侧导航， 便于 用户快速访问。 （9） 权限管理 大连工业大学 2018 届本科生毕业设计（论文） - 3 - 用户可以将指定的文件或文件夹的显示、 写入、 删除的权限授予不同的用 户，该操作需要用户登录并且对将授权的文件或文件夹有相应的权限。 （10） 版本控制 用户上传文件时， 如果文件名称已经存在， 则新上传的文件的版本号为上 一个版本号加一，并显示最新版本的文件。 1.4 主要技术和理论依据 后端： PHP 6+TwoThink 框架7 Tomcat 服务器8 前端： Vue 框架 9+iView 组件库10 数据库：MySQL 11 主要建立用户信息表，文件表，文件夹表，磁盘表，文 件类型表，权限表，操作历史表，快捷方式表，文件版本表。后续会根据具体 的需求进行详细的表设计。 整体：MVC 设计模式 12 1.5 设计的特色和创新之处 高效的文件操作： 建立于企业内网之上， 可以充分利用内网的高速传输使 用户的文件的操作在较短的时间内完成。 高效的权限管理：用户登录后，账号信息就可以自动完成权限的更新。 大连工业大学 2018 届本科生毕业设计（论文） - 4 - 第二章 需求说明 这一部分概述了“基于 web 的在线文件管理系统”网站的运行环境，使 用此网站的主要群体，此网站的主要功能，对此网站进行假设，进一步确定用 户需求，消除语义歧义，完善实现细节。 2.1 需求综述 2.1.1 产品的状况 此网站是一个新型的在线文件管理系统。 2.1.2 产品的目标 （1） 友好的用户页面，操作方便快捷，界面简约美观。 （2） 用户登录后即可访问相应权限的文件，实现文件共享，达到方便快 捷的目的。 2.1.3 用户特点 使用本软件的用户是企业内部的工作人员，需要访问文件的相关人员。 2.1.4 运行环境和实现上的限制 （1） 客户端：带有浏览器软件的电脑 （2） 需要良好的网络连接状态 （3） 有足够的预留空间能够让程序正常运行 （4） 编码标准：UTF-8 2.2 外部接口需求 2.2.1 用户界面 （1） GUI 标准 字体和字号：字体为系统字体，字号 14px。 文章标题和图标名称：18px 到 30px 左侧导航标题：14px 大连工业大学 2018 届本科生毕业设计（论文） - 5 - UI 中可触摸组件的标准大小：48px UI 中最小可点击区域的标准大小：64px(图)，14px(字) UI 配色的设计：以黑色、浅灰、蓝色为主，突出简洁美观的特点 （2） 主要界面 “基于 web 的在线文件管理系统”的主要界面和主要内容如下表 2.1 所 示。 表 2.1 主要界面和主要内容表 页面 主要内容 登录注册 登录注册页面 欢迎页面 各个存储盘符下不同文件类型的文件总个数页面 首页 预览文件，删除文件，上传文件，创建文件夹，复制文 件夹， 粘贴文件夹， 清空文件夹， 创建和删除快捷方式， 权限管理，回收站操作管理，操作历史管理。 （3） 失败或者成功信息提示 用户在操作失败或者系统发生错误时给予错误信息提示， 用户在操作成功 时给予成功的信息提示。 信息提示的表现形式： 在网页的顶部显示， 采用iView组件库中的message 全局消息提示组件进行消息提示。 2.2.2 软件接口 采用 http 协议， 通过 ajax 技术实现数据交互， 发送 get 请求向服务器端 请求数据，发送 post 请求向服务器端发送数据。 2.3 系统功能需求 2.3.1 系统用例图 此网站的用户均为普通用户，其用例图如下图 2.1 所示。 大连工业大学 2018 届本科生毕业设计（论文） - 6 - 图 2.1 用户用例图 2.3.2 功能概述 用户登录注册功能模块 访问此网站的前提是需要访问者拥有账号。 可通过注册功能注册一个账号， 注册成功后即可用该账号进行登录，访问此网站。 用户登录注册模块需求如下表2.2所示。 大连工业大学 2018 届本科生毕业设计（论文） - 7 - 表 2.2 用户登录注册模块功能需求 功能 使用对象 业务场景 描述 注册账号 没有访问此网站账号 信息 用户填写注册信 息进行注册 用户输入网址，进入登录页面， 没有账号， 点击注册， 跳转到注 册页面进行注册。 用户登录 已经注册但是未登录 用户访问此网站 用户输入网址，进入登录页面， 输入正确的用户名和密码进入 欢迎页面， 点击左侧导航进入主 页面。 文件功能模块 用户登录成功后，可以对文件进行操作，包括预览文件，删除文件和上传 文件。上传文件的过程中，如果上传相同名字的文件则需要进行版本控制，新 文件的版本号在当前版本号的基础上加一，并且显示新版本的文件。 文件功能需求如下表 2.3 所示。 表 2.3 文件功能需求表 功能 使用对象 业务场景 描述 预览文件 已经登录的用户 用户想查看文件 的具体内容 用户点击指定文件的相应的行 的预览按钮，即可查看文件的具 体内容。 删除文件 已经登录的用户 用户想删除文件 用户点击指定文件的相应的行 的删除按钮，即可删除相应行的 文件。 上传文件 已经登录的用户 用户上传新文件 用户点击上传图标，弹出上 传对话框，选择本地文件，点击 上传，实现上传文件功能。 文件夹功能模块 已经登录的用户可对文件夹进行操作，如新建文件夹，复制文件夹，粘贴 大连工业大学 2018 届本科生毕业设计（论文） - 8 - 文件夹，清空文件夹，删除文件夹。 文件夹功能模块功能需求如下表 2.4 所示。 表 2.4 文件夹功能模块功能需表 功能 使用对象 业务场景 描述 新建文件夹 已经登录的用户 用户进行新的文 件夹的创建 点击新建文件夹图标，弹出创 建文件夹对话框，输入文件夹 的名字，点击创建即可创建新 的文件夹。 复制文件夹 已经登录的用户 用户复制当前文 件夹，之后用于 粘贴 用户点击复制文件夹图标即可 复制当前文件夹的内容， 进行深 拷贝，并提示复制成功。 粘贴文件夹 已经登录的用户 选择已经复制成 功的文件夹进行 粘贴 点击粘贴文件夹图标，弹出粘 贴文件夹对话框，选择粘贴的 文件或者文件夹， 点击粘贴， 即 可将所选文件粘贴到当前文件 夹下。 清空文件夹 已经登录的用户 清空当前文件夹 点击清空文件夹图标，弹出清 空文件夹对话框，确认是否清 空当前文件夹，点击确认即可 清空当前文件的所有内容。 删除文件夹 已经登录的用户 删除指定的文件 夹 用户点击指定文件夹的相应的 行的删除按钮，即可删除相应行 的文件夹。 快捷方式功能模块 为了快速访问指定的文件夹， 可以将该文件夹添加为快捷方式， 快捷方式 将在左侧导航中的文件夹中展示。同时可以删除已经创建的快捷方式。 快捷方式功能需求如下表 2.5 所示。 大连工业大学 2018 届本科生毕业设计（论文） - 9 - 表 2.5 快捷方式功能模块功能需表 功能 使用对象 业务场景 描述 创建快捷方式 已经登录的用户 用户快速访问指 定文件夹，可将 指定文件夹设置 为快捷方式 选择想要创建快捷方式的文件 夹为当前文件夹，点击创建快 捷方式图标，即可常见当前文 件夹为快捷方式，并提示创建 快捷方式成功。 删除快捷方式 已经登录的用户 删除指定的快捷 方式 选择将要删除的快捷方式为当 前文件夹，点击删除快捷方式 图标，即可删除指定的快捷方 式，并提示删除快捷方式成功。 权限管理功能模块 用户可以将指定的文件或文件夹的显示、 写入、 删除的权限授予不同的用 户。 权限管理功能模块功能需求如下表 2.6 所示。 表 2.6 权限管理模块功能需求 功能 使用对象 业务场景 描述 权限管理 已经登录的用户 用户对不同的文 件进行授权操作 选择权限选项卡， 点击权限管理 图标， 弹出授权对话框， 根据提 示进行授权， 分别是， 选择文件， 选择用户和组，授权，完成。出 现授权成功提示即完成了授权 操作。 回收站功能模块 用户删除文件时， 进行了逻辑删除， 即将删除的文件的状态属性设置为 1。 删除后的文件或者文件夹将显示在回收站中， 回收站功能包括， 还原文件或文 件夹，清除文件或文件夹，清除文件从数据库中删除该条记录。 回收站功能模块需求如下表 2.7 所示。 大连工业大学 2018 届本科生毕业设计（论文） - 10 - 表 2.7 回收站功能模块功能需表 功能 使用对象 业务场景 描述 还原文件和文 件夹 已经登录用户 还原被删除的文 件或文件夹 左侧导航， 选择其他， 点击回收 站，右侧主体将进入回收站页 面，选择将要还原的文件或文 件夹，点击该行后面的还原按 钮，该文件将被还原到原来的 目录下显示。 清除文件或文 件夹 已经登录的用户 将 回 收 站 的 中 的 文 件 或 文件夹清除 左侧导航， 选择其他， 点击回收 站，右侧主体将进入回收站页 面，选择将要清除的文件或文 件夹，点击该行后面的清除按 钮，该文件将从回收站中清除。 2.4 性能需求 2.4.1 易用性需求 此网站功能使用，操作简单，界面简约，美观，每步操作都有信息提示， 并且操作失败后者成功后都会给出友好的信息提示。 用户可以快速使用此网站， 易用性良好。 2.4.2 准确性和及时性 用户拥有访问权限的文档将及时更新到用户界面， 具有良好的准确性和及 时性。 2.4.3 兼容性 能够在各个主流浏览器中使用，兼容性良好。 2.4.4 安全性需求 没有涉及支付功能和个人重要信息，只需用户名和密码，安全性良好。 大连工业大学 2018 届本科生毕业设计（论文） - 11 - 第三章 方案设计 3.1 设计概述 （1） 技术条件： 掌握数据库相关知识， 及相关软件的使用， 如 MySQL 数据库。 熟悉 Vue 的 使用语法， 掌握 PHP 的语法， 熟悉基于 TwoThink 的二次开发， 掌握 sql 语句。 熟悉开发工具 JeBrains Phpstorm 的使用。 （2） 开发环境： 后端：PHP 语言，TwoThink5.0 框架，Tomcat 服务器 前端：Vue 框架，iView 组件库 数据库：MySQL 3.2 命名规则设计 在网站开发过程中，按照开发的规范对 CSS 的类名和 JS 的方法名等进行 命名，增加程序的可读性，养成良好的代码风格。由于此网站是个人发开，周 期可能有点长，使用规范命名，便于后期的调试，增强阅读性，尽力做到看其 名知其意。同时开发过程中，给予有意义的代码加以注释，便于阅读，养成良 好的代码风格。 （1） 组件命名规范设计 组件命名规则：定义组件名的方式有两种。 使用 kebab-case：当使用 kebab-case(短横线分隔命名)定义一个组件 时，你也必须在引用这个自定义元素时使用 kebab-case。 12 使用 PascalCase： 当使用 PascalCase(驼峰式命名)定义一个组件时， 你 在引用这个自定义元素时两种命名法都可以使用。也就是说和都是可接受的。 12 代码中类选择器的命名规范： 主要体现类名的意义， 采用 “-” 进行连接。 举例说明如下表 3.1 所示。 大连工业大学 2018 届本科生毕业设计（论文） - 12 - 表 3.1 控件命名例子表 组件 组件名称 类选择器名称 Authority my-authorize myInfo deleteDialog my-delete ive-modal-max home my-home breadcrumb operationsHistory recycleBin removeDialog restoreDialog viewDialog welcome my-operationHistory my-recyclebin my-btn-remove my-restore my-view my-welcome btn-clearHistory recycle recyclebin-page recyclebin-table my-view-img right-content （2） 方法名命名设计 主要遵循驼峰命名法：第一个单词首字母小写，之后的首字母需要大写， 要能表达出方法的具体功能和具体的含义，具体设计举例如下表 3.2 所示。 表 3.2 类名设计规范例子表 方法的功能和意义 命名规范 注册 doRegister 登录 doLogin 上传文件 uploadFile 创建文件夹 createFolder 复制文件夹 copyFolder （3）变量的命名规范 采用驼峰命名法,例如：$folders,$files。 （4）JS 常量的命名规范使用驼峰命名法，能体现其含义，例如： filesId,breadcrumbId。 大连工业大学 2018 届本科生毕业设计（论文） - 13 - 3.3 总体设计 3.3.1 网络拓扑结构图 本网站通过浏览器访问服务器，系统拓扑结构图如下图 3.1 所示。 图 3.1 系统拓扑结构图 3.3.2 系统结构框图 “基于 web 的在线文件管理系统” 网站有如下功能模块， 分别是用户登录 注册功能模块，文件功能模块，文件夹功能模块，快捷方式功能模块，权限管 理功能模块，回收站功能模块，操作历史功能模块，该网站的系统组织架构图 如下图 3.2 所示。 大连工业大学 2018 届本科生毕业设计（论文） - 14 - 3.2 系统结构框图 3.3.3 程序流程图 文件预览功能流程图如下图 3.3 所示，快捷方式功能流程图如下图 3.4 所示，授权功能流程图如下图 3.5 所示。 图 3.3 文件预览功能流程 大连工业大学 2018 届本科生毕业设计（论文） - 15 - 图 3.4 快捷方式功能流程图 大连工业大学 2018 届本科生毕业设计（论文） - 16 - 图 3.5 授权功能流程图 3.3.4 需求规定 系统性能 由于该网站主要的使用人群是企业内的工作人员， 为了方便工作 人员进行文件的查找，要求操作简单，符合用户的操作习惯，能够兼 容大部分浏览器， 并且需要考虑容易扩展， 能够适应新的需求的产生。 （1） 用户页面 网站的页面设计需要简洁，符合用户使用的习惯，操作简单，方便使用。 大连工业大学 2018 届本科生毕业设计（论文） - 17 - （2） 可维护性能 为了增强可维护的性能，此网站采用 MVC 设计模式，采用分层设计的思 想，尽量保证功能的完整性和独立性。 （3） 可扩展性能 为了方便后期的扩展， 接口的设计要求功能唯一， 独立性好， 实现低耦合， 高内聚。 （4） 数据的完备性 为了保证安全，数据库中的数据需要定期刷新进行备份。 输入和输出要求 输入：用户从电脑的键盘输入，文件从本地计算机中的文件进行选择。 输出：程序运行的结果将在电脑的显示器（屏幕）上显示。 数据管理能力需求 由于此网站的服务器端暂时是由开发者的电脑充当， 所以暂时能处理一定 范围内的数据。 故障处理要求 （1） 硬件故障 客户端：备用电脑。 服务器端：服务器启动失败时，应有备用的服务器继续进行工作。 （2） 软件故障 客户端应用软件故障： 检查网络的连接状态是否良好， 浏览是否能够正常 工作。 3.3.5 运行环境 设备 客户端：windows 电脑 服务器端：Apache Tomcat 服务器 网络环境：网络的连接状态良好 支持协议：TCP/IP 协议和 HTTP 协议 接口 数据传输采用的协议： TCP/IP 协议（传输层协议） 大连工业大学 2018 届本科生毕业设计（论文） - 18 - 封装数据使用的协议： HTTP 协议（应用层协议） 3.4 用户界面设计 用户的界面大体上的设计效果图如下， 后期可以根据用户的需求， 在此基 础上进行调整。 （1） 登录，注册页面分别如下图 3.6所示，如下图 3.7所示。 图 3.6 登录页 图 3.7 注册页 大连工业大学 2018 届本科生毕业设计（论文） - 19 - （2） 欢迎页面，如下图3.8所示。 图 3.8 欢迎页面 （3） 主页面，如下图3.9所示。 图 3.9 主页面 大连工业大学 2018 届本科生毕业设计（论文） - 20 - 3.5 数据结构设计 3.5.1 E-R 图 图 3.10 整体 E-R 图 3.5.2 数据库表设计 数据库相关表的设计如下图，包括九个表，权限表如下表 3.11 所示，磁 盘表如下表 3.12 所示， 文件表如下表 3.13 所示， 文件夹表如下表 3.14 所示， 操作历史表如下表 3.15 所示， 快捷方式如下表 3.16 所示， 文件类型表如下表 3.17 所示，用户表如下表 3.18 所示，版本表如下表 3.19 所示。 大连工业大学 2018 届本科生毕业设计（论文） - 21 - 表 3.11 twothink-authority权限表 字段名 字段含义 类型（长度） 允许为空 主键 说明 id 权限 id bigint(20) 否 是 从 1 开始自增 userId 用户 id bigint(20) 否 否 同用户表id targetId 目标 id bigint(20) 否 否 同文件或文件夹 表 id authority 权限类型 smallint(6) 否 否 包括查看， 写入， 删除 type 目标类型 smallint(6) 否 否 类型包括文件或 文件夹 表 3.12 twothink-disk磁盘表 字段名 字段含义 类型（长度） 允许为空 主键 说明 Id 磁盘 id bigint(20) 否 是 从 1 开始自增 name 磁盘名称 varchar(256) 否 否 磁盘的名称 letter 盘符 char(1) 否 否 盘符的名称 path 物理路径 varchar(1024) 否 否 存放的物理路径 type 目标类型 smallint(6) 否 否 类型包括文件或 文件夹 大连工业大学 2018 届本科生毕业设计（论文） - 22 - 表 3.13 twothink-files文件表 字段名 字段含义 类型（长度） 允许为空 主键 说明 Id 文件 id bigint(20) 否 是 从 1 开始自增 name 文件名称 varchar(256) 否 否 文件名 size 文件大小 bigint(20) 否 否 文件大小 typeid 文件类型 bigint(20) 否 否 同 文 件类 型 表 id modifyBy 创建者 bigint(20) 否 否 同用户表 id modifyTime 创建时间 datatime 否 否 创建时间 foldeId 文件夹 id bigint(20) 否 否 文 件 所在 的 文 件夹的 id diskId 磁盘 Id bigint(20) 否 否 文 件 夹所 在 的 磁盘 id status 状态 smallint(6) 否 否 文件的状态（是 否显示） 表 3.14 twothink-folder文件夹表 字段名 字段含义 类型（长度） 允许为空 主键 说明 id 文件夹 id bigint(20) 否 是 从 1 开始自增 name 文件夹名 varchar(256) 否 否 文件夹名 diskId 磁盘 id bigint(20) 否 否 同磁盘表的 id parentId 父 文 件 夹 id bigint(20) 否 否 同文件夹表id modifyBy 创建者 bigint(20) 否 否 同用户表 id modifyTime 创建时间 datatime 否 否 创建时间 path 物理路径 varchar(1024) 否 否 存储的物理路径 status 状态 smallint(6) 否 否 文 件 夹的 状 态 （是否显示） 大连工业大学 2018 届本科生毕业设计（论文） - 23 - 表 3.15 twothink-history操作历史表 字段名 字段含义 类型（长度） 允许为空 主键 说明 id 操作历史 id bigint(20) 否 是 从 1 开始自增 userId 用户 Id varchar(256) 否 否 同用户表的 id modifyTim e 修改时间 datatime 否 否 操作时间 actionId 操作类型 samllint(6) 否 否 显示（1） ，写入 （2） ，删除（3） targetId 目标 id bigint(20) 否 否 同文件表或者文 件夹表的 id comment 备注 varchar(1024) 否 否 记录进行的操作 targetType 目标类型 samllint(6) 否 否 包括文件 （1） 或 者文件夹（2） name 文档的名称 varchar(1024) 否 否 文件或者文件夹 名 表 3.16 twothink-shortcut快捷方式表 字段名 字段含义 类型（长度） 允许为空 主键 说明 id 快捷方式 id bigint(20) 否 是 从 1 开始自增 folderId 文件夹 id bigint(20) 否 否 同 文 件 夹 表 的 id userId 用户 id bigint(20) 否 否 同用户表的 id 表 3.17 twothink-type文件类型表 字段名 字段含义 类型（长度） 允许为空 主键 说明 id 文件类型 id bigint(20) 否 是 从 1 开始自增 name 类型名称 varchar(256) 否 否 文件类型的名称 extentName 文件扩展名 varchar(256) 否 否 文件扩展名 isView 是否可以预 览 bit(1) 否 否 该类型的文件是 否可以预览 大连工业大学 2018 届本科生毕业设计（论文） - 24 - 表 3.18 twothink-users用户表 字段名 字段含义 类型（长度） 允许为空 主键 说明 id 用户 id bigint(20) 否 是 从 1 开始自增 userName 用户名 varchar(256) 否 否 用户的账号名称 password 用户密码 varchar(1024) 否 否 用户账号的密码 表 3.19 twothink-version版本表 字段名 字段含义 类型（长度） 允许为空 主键 说明 id 版本表 id bigint(20) 否 是 从 1 开始自增 fileId 文件 id bigint(20) 否 否 同文件表的 id version 版本号 int(20) 否 否 文件的版本号 iscurrent 是否是当前 版本 bit(1) 否 否 是否是当前版本 modifyBy 操作者 bigint(20) 否 否 同用户表的 id modifyTime 更改时间 datatime 否 否 更改版本的时间 comment 备注 varchar(1024) 否 否 更改版本的备注 3.6 出错处理设计 程序运行的过程中， 如果出错应给出友好的用户提示， 并且有足够友好的 操作指南，指导用户的操作，操作成功时也应该给予提示，做到友好的用户交 互页面。 3.7 系统维护设计 此网站接口的设计实现了单一功能， 命名规范， 基本做到看其名知其意， 有良好的可读性，便于后期的修改的复用，具有良好的可维护性。 大连工业大学 2018 届本科生毕业设计（论文） - 25 - 第四章 软件详细设计 4.1 详细设计概述 4.1.1 特定用语与缩写 特定用语与缩写表如下表 4.1 所示。 表 4.1 特定用语与缩写表 用语/缩写 全称 含义 APP Application 应用程序 MVC Model View Controller 模型视图控制器 4.1.2 工具及环境 开发硬件配置 如下表 4.2 所示。 表 4.2 开发硬件配置表 名称 详情 处理器 Inter(R)Core(TM)i5-4200U CPU 1.60GHz 1.6GHz 系统类型 64 位操作系统 已安装的 RAM 8GB 研发语言及编译器 此网站开发所用的语言是 PHP 语言，开发的工具是JeBrains Phpstorm。 第三方工具 如下表 4.3 所示。 大连工业大学 2018 届本科生毕业设计（论文） - 26 - 表 4.3 第三方开发工具表 编号 工具包/名称 用途 1 iView 搭建页面 2 Vue 前端用户交互 3 axios http 发送请求 4 pdf 预览 office 文档 5 TwoThink PHP 开源框架，进行二次开发 6 MySQL 数据库 7 Apache Tomcat 服务器端 4.2 程序描述 前端使用 Vue 进行数据的交互，主要体现在前台所获取的数据主要是通 过发送 http 请求，后台接受前台发送的参数，进行一系列逻辑处理，将前台 想要的数据发送给前台， 前台接受后台发送的数据后， 将数据显示在相应的位 置，从而实现数据交互。后台处理业务逻辑的时候需要考虑效率，代码的整洁 性等因素。 4.2.1 主页初始化数据 获取当前文件夹下的所有文件和文件夹 前 台 发 送 请 求getFileAndFoldersByFolder的 参 数 包id ， type,index,keyword,typeId,sortColumn,isAsc， 服务器接收前台发送的参数， 通过 getFileAndFoldersByFolder（）方法接送参数。 服务器根据参数 type 的不同调用不同的方法，查询不同的表，如果 type 是 folder 调用 queryFileAndFolder（）方法查询当前文件夹为文件夹时的所 有的文件和文件夹， 否则的话type是disk,调用queryFileAndFolderForDisk() 方法，查询当前文件夹为磁盘时，当前文件夹下的所有文件和文件夹，具体代 码如下： public function getFileAndFoldersByFolderId() 大连工业大学 2018 届本科生毕业设计（论文） - 27 - $id = Request:instance()-get(id); / 获取某个 get 变量 $type = Request:instance()-get(type); / 获取某个 get 变量 $index = Request:instance()-get(index); / 获取某个 get 变量 $keyWord = Request:instance()-get(keyWord); $typeId = Request:instance()-get(typeId); $sortColumn = Request:instance()-get(sortColumn); $isAsc = Request:instance()-get(isAsc); $pageSize = 10; $pageIndex = ($index - 1) * 10; if ($type = “folder“) $data=$this-queryFileAndFolder($id,$keyWord,$typeId,$index, $pageSize,$sortColumn,$isAsc); else $data=$this-queryFileAndFolderForDisk($id,$keyWord,$typeId, $index,$pageSize,$sortColumn,$isAsc); if (empty($data) $this-successAjax(); $this-successAjax($data); 当前目录的类型为文件夹时（folder）:获取当前文件夹下的所有文件和 文件夹如下：首先根据 folderId 查询文件夹表，查询当前文件夹下的所有文 件夹，然后根据 folderId 查询文件表，查询当前文件夹下的所有文件，最后 将子查询 1 的结果和子查询 2 的结果进行合并，合并的最终结果就是文件夹 下的所有文件和文件夹，也是前台表格要显示的全部内容以及各项具体信息。 调用方法如下： public function queryFileAndFolder($folderId,$keyWord,$typeId,$indexPage, $pageSize,$sortColumn,$isAsc) 根据需求，前台显示的时候需要进行过滤，搜索，分页，以及排序，所以 大连工业大学 2018 届本科生毕业设计（论文） - 28 - 后台查询数据的时候， 需要对查询的结果进行相应的排序， 分页， 过滤等操作。 同理，当 type 是 disk(磁盘)的时候，需要查询磁盘表和文件表，获取当 前文件夹下的所有文件和文件夹。 前台通过 http 请求接收后台返回的结果，将结果重新格式化，格式化成 想要的格式，然后将其显示到相应的位置，即将数据渲染到表格中。 4.2.2 文件功能模块 预览文件功能 前台主页初始化的数据包括文件和文件夹， 文件夹可以点击跳转， 文件则 根据类型的不同判断是否可以进行预览。 点击表格中每行后面的预览按钮可以 预览对应的文件，向服务器端发送请求 getView(),参数包括 type(类型)和 id(预览的文件的 id)。 后台接收参数，首先判断是否有查看的权限，如