摘要现今，基于网络的考试已经成为常态。虽然市面上有许多基于Web的网上考试系统，但大多数存在难以使用，不易维护等问题。由于HTML5的流行，提供了基于浏览器的离线存储的必要条件，使得设计一个基于前端的考试系统成为可能。62372

本文利用了MEAN stack技术栈，设计并构建一个基于前端的考试系统。该系统包括了常见的在线考试系统功能：如出卷，答题；亦基于Web Storage技术，实现了考试部分离线运行：如考试答题后，即使刷新页面甚至关闭浏览器，再次使用时，考生的答案依然存在。当网络出现故障时，能够离线计算考生的得分。最后，对系统进行了必要的测试，以确保系统能够如期运行。

本文详细介绍了基于浏览器的离线存储技术，同时对Web Storage提出了一些改进方法，望对Web Storage技术感兴趣的人提供帮助。

毕业论文关键词：考试系统；Web Storage；MEAN

 Abstract Today, the online examination has become normal. Although there are many online examination system based on Web, most of them are difficult to be used and not easy to be maintained. With the growing popularity of HTML5, it provides the necessary conditions for the browser based off-line storage, which makes it possible to design an examination system based on the front end.

In this paper, the MEAN technology stack is used to design and build an examination system based on the front. The system includes not only the common function of online examination system: such as making up examination and submitting answer; but also the realization of the offline examination basing web storage technology -- candidates' answer still exists after the exam, even they have refreshed the page or closed the browser. When the network fails, the candidates' score can be calculated offline. At last, the system is tested to ensure that the system can run on schedule. 

This paper describes the browser based on the offline storage technology, and some improved methods about Storage Web, hoping to help developers interested in Storage Web technology.

Keywords:  examination system；Web Storage；MEAN

目录

第一章 绪论 1

1.1 研究背景与意义 1

1.2 前端考试系统的研究现状 1

1.2.1 本地存储的研究现状 1

1.2.2 考试系统的现状 2

1.3 本文的主要内容 2

第二章  相关技术及环境配置 4

2.1 相关技术介绍 4

2.1.1 MEAN介绍 4

2.1.2 基于HEML5的本地存储 5

2.2 开发工具与运行环境 5

2.2.1 编辑工具Webstorm 5

2.2.2 Google Chrome 浏览器 6

2.3 调试工具 6

2.3.1 VSC debug 6

2.3.2 Chrome DevTools 8

2.4 小结 11

第三章  考试系统的分析与设计 12

3.1 需求分析 12

3.1.1 功能性需求分析 12

3.1.2 非功能性需求分析 12

3.2 数据库的分析与设计 13

3.3 小结