摘要:本设计主要在WEB上实现管理实验室和展示实验室的功能。系统主体分为三个部分：前台展示、教师管理、超级用户管理。在本次设计中采用React.js作为基础框架，然后选取蚂蚁金服的企业级React组件ant design作为界面组件库。结合react-router框架的前端路由和Webpack的按需打包的特性，实现了高性能、小体积的单页应用。
本系统编写主要采用了WebStorm编写代码。为了提高前端静态文件的转发性能，改用nginx作为静态资源服务器。在代码组织方面，将重复出现的代码提取为公共组件。一来减少打包文件的大小，二来也优化了软件的内存占用情况。
通过对js语言特性的合理运用，实现了体验接近原生应用的WEB App。
关键词：React.js ；单页应用；Webpack
目录
摘要
Abstract
1引言-1
1.1国内外发展现状-1
1.2系统开发目的-1
2.需求分析和系统架构-3
2.1需求分析-3
2.2 系统架构-3
3 系统概述-5
3.1 系统组成-5
3.2 设计流程-5
3.2.1前台展示模块-5
3.2.2教师后台管理模块-5
3.2.3超级用户管理模块-6
4模块设计-7
4.1 前台展示模块设计-7
4.1.1 实验室选择部分-7
4.1.2 实验室简介部分-8
4.1.3 实验室设备使用说明、实验室设备、实验室项目部分-10
4.1.4 登录、注册、更改密码部分-10
4.2教师后台管理模块设计-11
4.2.1 界面框架设计-11
4.2.2 添加实验室设备使用说明、设备、项目部分-12
4.2.3 编辑实验室设备使用说明、设备、项目部分-12
4.2.4 添加首页巨幕、上传实验室视频部分-13
4.3超级用户管理模块设计-14
4.3.1 用户注册、班级注册管理部分-14
4.3.2 添加实验室部分-15
5实现细节-17
5.1 前端路由的实现-17
5.2视频、图片等文件上传实现-18
5.3富文本编辑框实现-19
6打包发布-22
6.1 Webpack打包文件配置-22
6.2 按需加载-23
7 系统测试-24
7.1 性能测试-24
7.2 功能测试-25
结 论-26
参 考 文 献-27
附录A 程序源代码-28
致 谢-53
