摘要:本设计主要在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