摘要:本設計主要在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