摘 要

本文借助了HTML5的新特性，以VueJS为前端框架，Spring为后端框架，MongoDB为数据库开发了一个云文档管理系统。该系统完成了云文件存储管理系统，Office文档的预览和Markdown文档的编辑和预览。该系统对个人用户提供了云端存储以及文档管理的解决方案。

论文主要研究了HTML 5应用的构建和基于文档型数据库云文件系统的构建。

研究结果表明了基于HTML 5的应用有优秀的跨平台性，基于文档型数据库的文件系统使用扁平式数据结构更利于分片与分布式部署。

关键词：云文档管理；Vue；单页面；Office Web预览

Abstract

This peper

In this paper, with the new features of HTML5, VueJS as the front-end framework, the spring for the back-end framework, MongoDB for the database development of a cloud document management system. The system completes the cloud file storage management system, the office document preview and the price reduction document editing and preview. The system provides a solution for cloud storage and document management for individual users.

The paper mainly studies the construction of HTML 5 application and the construction of document database cloud file system.

The results show that HTML5-based applications have excellent cross-platform, and file-based database-based file systems use flat data structures to facilitate fragmentation and distributed deployment.

Key Words：cloud document system；vue.js；single file；office web viewer

目 录

第1章 绪论 1

1.1 选题的背景和意义 1

1.2 国内外研究现状 1

1.3 本文结构 1

第2章 开发环境与技术选型 3

2.1 开发环境 3

2.1.1 环境概述 3

2.1.2 开发环境 3

2.2 技术选型 5

2.2.1 技术概述 5

2.2.2 客户端技术选型 6

2.2.3 服务端技术选型 8

第3章 需求分析和设计 10

3.1 需求分析 10

3.1.1 界面需求 10

3.1.2 功能需求 11

3.1.3 性能需求分析 18

3.2 系统整体设计 18

3.2.1 系统整体架构 18

3.2.2 系统整体流程 20

3.3 系统详细设计 21

3.3.1 扁平式文件系统设计 21

3.3.2 物理扁平和逻辑层级 23

3.3.3 访问控制与分享数据结构的设计 24

3.3.4 HTTP API设计 25

3.3.5 服务端模块设计 31

3.3.6 客户端模块设计 33

第4章 云文档管理系统的实现 38

4.1 后端架构整体实现 38

4.1.1 响应与自定义响应码 38

4.1.2 异常处理 39

4.1.3 访问控制 39

4.2 后端业务逻辑实现 41

4.2.1 登录登出的实现 41

4.2.2 文件管理的实现 41

4.2.3 第三方访问管理实现 42

4.2.4 分享的开启与管理 42

4.3 前端实现 43

4.3.1 前端布局实现 43

4.3.2 前端的事件与响应 43

4.3.3 编辑器的实现 46

第5章 测试与部署 49

5.1 测试环境 49

5.2 单元测试 50

5.2.1 用户模块 50

5.2.2 文件系统模块 51

5.3 功能测试 51

5.3.1 登录与用户模块 51

5.3.2 文件模块 52

第6章 总结与展望 54

6.1 总结 54

6.2 现状与展望 54

致谢 55

参考文献 56

绪论

选题的背景和意义

本系统是基于VueJS的云文档管理系统。通过使用Java Web作为服务器管理，使用VueJS作为前端页面控制来实现云平台下的文档管理系统。

随着云时代的到来，Web应用的轻量、灵活、跨平台迅速成为了云时代的生力军，以及HTML 5的发布，为Web移动端应用提供了技术支持。本系统是基于HTML 5的一个Web应用，用于对文档进行云端管理，通过本系统能够实现在云端进行文档的增删改查，以及文档内容的查看与修改。

本系统的研究意义有两点：作为普通的用户可以在任何平台通过支持HTML 5的浏览器进入本系统，并对文档进行操作，具有良好的跨平台性。其二，本系统中的文档能够在浏览器端进行在线的预览，通过浏览器就可以实现文档的查阅，比如Word文档。其三，本系统面向的应用场景为课堂与教学，支持目前较为流行的文本编辑格式——Markdown。通过Markdown可以快速简单的对笔记进行记录，并且有良好的阅读体验。

国内外研究现状

国内外较为优秀的云文档管理系统，以及云办公平台为Microsoft Office 365^[1]和金山推出的轻WPS办公云平台。该两大平台均提供了良好的用户界面和安全的用户信息保护机制。

尽管两大国内外平台提供了很好的服务，但是目前的云办公与云管理平台仍然没有很好的普及，原因如下。

1. 云办公系统没有提供一个良好的云存储平台
2. 目前的云文档管理系统中，大多仿照操作系统的文件系统，提供了复杂的文件系统，响应速度慢
3. 目前较为流行的云文档管理平台大多没有对Markdown文本提供很好的支持

本文结构

本文的第一章为绪论，介绍了一下研究背景及意义和国内外研究现状。第二章为环境和技术选型，讲解了本系统所使用的环境以及涉及到的技术的比较与选择。第三章进行了需求分析和系统设计，从架构的设计到API的设计，以及前后端具体的设计。第四章对本系统如何通过设计部分进行实现进行了详细的描述。第五章介绍了测试环境与关键API的单元测试，以及系统的功能测试。第六章为本系统的总结。后面的是致谢与参考文献。

开发环境与技术选型

开发环境

环境概述

本系统的开发环境分为：本地开发环境和远程部署环境。

本地开发环境是在Ubuntu 17.04 Desktop环境下进行所有的开发。远程部署环境是为阿里云ECS服务器。