用pcduino实现应用监控服务器html5前端设计
摘 要团队需要用pcDuino单片机实现监控服务器，做到应用监控服务器小型化。课题分成三部分，前端，后台和安全模块。本子课题完成监控服务器前端设计。传统实现应用服务器监控的Web项目，多使用低版HTML作为前端设计语言。新版的HTML5无论是从页面的精美度，还是内部代码的简洁程度，都更占优势，给使用者更好的用户体验。HTML5作为当前流行的前端设计语言，广泛应用于各大移动App中。本课题采用HTML5作为前端设计语言。采用了Bootstrap框架，可以适应多种设备，如：手机、平板、PC设备，而不用自己动手做各种设备的适配，大大提高了开发效率。系统周期性更新监控状态数据，用动态图表表示服务运行状况。图表采用ECharts设计实现。
目 录
第一章 技术选型及工具选择 1
1.1选用HTML5 1
1.1.1结构上的优势 1
1.1.2标签上的优势 1
1.2布局框架选择 3
1.3开发工具选择 3
1.3.1Adobe Dreamweaver 3
1.3.2Hbuilder 4
1.3.3开发工具选择决策 4
1.4设计用浏览器选择 4
第二章 前端架构及REST API设计 6
2.1使用JSP提供页面 6
2.2动态页面设计 6
2.2.1使用EL表达式 6
2.2.2使用隐藏域 7
2.2.3异步获取数据 7
2.3HTML5与jQuery 7
2.3.1用jQuery处理服务器数据 7
2.3.2HTML5节点中的内容填充 8
2.4REST API设计 8
2.4.1采用前后端分离架构 8
2.4.2REST API设计 9
第三章 前端页面实现 12
3.1布局样式的集中管理 12
3.2图表实现实时性能监控 13
3.3设计响应式页面 13
3.4菜单设计 15
3.5使用插件实现邮件发送提示 17
3.6利用Bootstrap美化控
*好棒文|www.hbsrm.com +Q: #351916072#
件 17
3.7display标签的使用 20
结束语 21
致 谢 22
参考文献 23
第一章 技术选型及工具选择
本课题是基于pcDuino单板机的监控系统前端开发，为了达到应用监控Web服务器简化部署的目的，系统需要完善的跨平台多浏览器支持。本系统前端设计目标是：除开初装配置系统环节，用户完全可以通过移动端操纵管理监控服务器，从而达到简化部署的目的。项目前端设计的所有环节，包括技术选型及工具选择，都服务于该目标。
1.1选用HTML5
基于HTML的Web前端设计，构建页面的基本结构和基本标签是否能支撑设计目标十分重要。HTML5相比于低版HTML的优势首先体现在结构和标签上。
1.1.1结构上的优势
(1)文档声明优势
HTML: "http://www.w3.org/TR/html4/strict.dtd">
HTML5:
可以看到，HTML的文档类型声明很长，要符合W3C的各种规则，每次书写都是需要复制粘贴。而HTML5的声明直接简写成，十分简洁。，方便记忆和书写。
(2)语义优势
HTML:通常都是用标签表示一块内容，例如：，表示网站的导航部分。
HTML5: 提供了一些新的结构性标签，比如:
目 录
第一章 技术选型及工具选择 1
1.1选用HTML5 1
1.1.1结构上的优势 1
1.1.2标签上的优势 1
1.2布局框架选择 3
1.3开发工具选择 3
1.3.1Adobe Dreamweaver 3
1.3.2Hbuilder 4
1.3.3开发工具选择决策 4
1.4设计用浏览器选择 4
第二章 前端架构及REST API设计 6
2.1使用JSP提供页面 6
2.2动态页面设计 6
2.2.1使用EL表达式 6
2.2.2使用隐藏域 7
2.2.3异步获取数据 7
2.3HTML5与jQuery 7
2.3.1用jQuery处理服务器数据 7
2.3.2HTML5节点中的内容填充 8
2.4REST API设计 8
2.4.1采用前后端分离架构 8
2.4.2REST API设计 9
第三章 前端页面实现 12
3.1布局样式的集中管理 12
3.2图表实现实时性能监控 13
3.3设计响应式页面 13
3.4菜单设计 15
3.5使用插件实现邮件发送提示 17
3.6利用Bootstrap美化控
*好棒文|www.hbsrm.com +Q: #351916072#
件 17
3.7display标签的使用 20
结束语 21
致 谢 22
参考文献 23
第一章 技术选型及工具选择
本课题是基于pcDuino单板机的监控系统前端开发，为了达到应用监控Web服务器简化部署的目的，系统需要完善的跨平台多浏览器支持。本系统前端设计目标是：除开初装配置系统环节，用户完全可以通过移动端操纵管理监控服务器，从而达到简化部署的目的。项目前端设计的所有环节，包括技术选型及工具选择，都服务于该目标。
1.1选用HTML5
基于HTML的Web前端设计，构建页面的基本结构和基本标签是否能支撑设计目标十分重要。HTML5相比于低版HTML的优势首先体现在结构和标签上。
1.1.1结构上的优势
(1)文档声明优势
HTML: "http://www.w3.org/TR/html4/strict.dtd">
HTML5:
可以看到，HTML的文档类型声明很长，要符合W3C的各种规则，每次书写都是需要复制粘贴。而HTML5的声明直接简写成，十分简洁。，方便记忆和书写。
(2)语义优势
HTML:通常都是用标签表示一块内容，例如：，表示网站的导航部分。
HTML5: 提供了一些新的结构性标签，比如: