摘  要

 

本课题将设计并实现健康管理平台，研究方向侧重于平台的前端设计与实现。该课题采用了前后端分离的方案，使用前端开发框架VueJS搭建的单页面应用，具有用户交互友好、页面异步刷新加载速度快等优点。平台前端以Vue为核心，并使用Vue Router插件、Vuex插件、Ant Design组件库、Ajax技术等实现前后端分离的组件化开发。Vue Router插件构建应用的路由系统，负责前端页面路由的匹配和管理功能；Vuex插件采用集中式存储管理应用的所有组件的状态；Ant Design组件库作为平台前端定制化组件基础；Ajax技术作为数据请求层，处理平台前端数据与后台服务交互。

本课题设计与实现的健康管理平台前端部分，是以家庭健康监测系统为背景。具备页面交互友好、前端独立部署、页面性能良好等优点。通过课题所实现的平台前端部分，可以让用户更加友好地对家庭健康监测系统进行管理和维护，可以有效率地进行相关操作。

 

关键词：健康管理平台，单页面应用，前后端分离，VueJS，MVVM，Ajax

 

 

目  录

 

第一章 绪论 1

1.1 引言 1

1.2 国内外研究现状 1

1.2.1 国外研究现状 1

1.2.2 国内研究现状 2

1.3 本课题的主要工作 3

1.4 论文组织结构 3

第二章 相关技术介绍 4

2.1 Web前端概念 4

2.2 前后端分离 5

2.2.1 SPA（单页面应用）概念 6

2.2.2 MVVM架构 7

2.3 Vue渐进式框架 7

2.4 Ajax通信 10

2.5 JSON数据格式 10

2.6 Webpack 11

2.7 REST软件架构风格 11

2.8 前端工程化技术 12

2.9 本章小结 13

第三章 平台需求分析与设计 14

3.1 健康管理平台需求分析 14

3.1.1 平台构成模块拆分 14

3.1.1 平台实际功能需求分析 15

3.1.2 系统非功能需求分析 18

3.2 平台总体架构设计 19

3.3 平台前端架构设计 19

3.4 平台前端布局设计 21

3.5 平台各模块设计 22

3.5.1 登录模块 23

3.5.2 路由管理模块 24

3.5.3 状态管理模块 24

3.5.4 数据交互模块 26

3.5.5 错误处理模块 26

3.5.6 国际化模块 27

3.5.7 业务组件库 27

3.6 平台实际功能设计 28

3.5.1 健康生活数据记录 28

3.5.2 健康管理仪表盘 29

3.5.3 干预管理媒体类 29

3.7 系统优化设计 31

3.5.1 加载性能优化 31

3.5.2 代码级优化 31

3.5.3 用户体验优化 31

3.8 系统接口设计 31

3.9 本章小结 33

第四章 健康管理平台前端的具体实现 34

4.1 平台前端实现环境 34

4.2 前端框架搭建 35

4.3 平台前端整体布局 37

4.4 平台各子模块实现 41

4.4.1 登录模块实现 41

4.4.2 路由管理模块实现 43

3.4.3 状态管理模块 47

4.4.4 数据交互模块实现 50

4.4.5 错误处理模块实现 52

4.4.6 国际化模块实现 54

4.4.7 业务组件库实现 55

4.5 平台实际功能实现 59

4.5.1 健康生活数据记录 59

4.5.1 健康管理仪表盘 61

4.5.3 干预管理媒体类 63

4.6 系统优化 67

4.6.1 加载性能优化实现 67

4.6.2 代码级优化实现 68

4.6.3 用户体验优化 69

4.7 本章小结 70

第五章 总结与展望 71

5.1 总结 71

5.2 展望未来 71

参考文献 72

致  谢 74