食用菌监控系统人机交互层的设计与实现
食用菌监控系统人机交互层的设计与实现[2019122301]
食用菌监控系统（以下简称监控系统）是一个通过对预设多种食用菌生产的经典环境
参数，如 CO2 浓度、湿度、温度等，进行量化跟踪和控制，达到智能化种植目的的系统。
监控系统由数据采集层（硬件层），数据层，人机交互层三部分组成。
人机交互层属于监控系统的展示层，由服务器和客户端两部分组成。其中，服务器部
分使用 Python 语言，Django 框架，MySQL 和 SQL Server 数据库以及 Memcached 缓存系
统，构建一个高效的 WEB 服务系统；客户端部分使用 CoffeeScript、Less 和 HTML5，实
现一个具有丰富交互功能的人机界面。本论文详细阐述了如何设计和实现服务器和客户端
系统，以及这两者之间的交互过程。此外，本论文还对系统的数据存储、可视化分析、远
程控制等方面提出了一些改进方案。
关键字：食用菌 人机交互 数据可视化 远程控制
1 绪论 ........................................................1
1.1 选题背景和研究意义 .................................................... 1
1.2 研究内容和成果 ........................................................ 2
1.3 系统开发及运行环境 .................................................... 4
2 开发工具和技术介绍 ..........................................5
2.1 开发工具 .............................................................. 5
2.2 开发语言 .............................................................. 5
2.3 HTTP .................................................................. 6
2.4 RESTful ............................................................... 7
2.5 AJAX .................................................................. 7
2.6 JSON .................................................................. 7
2.7 Memcached ............................................................. 8
2.8 WSGI .................................................................. 9
2.9 Framework ............................................................. 9
2.9.1 WEB 服务器端框架和第三方库........................................ 9
2.9.2 前端框架和第三方库 ............................................... 9
3 人机交互层架构和设计 .......................................10
3.1 概述 ................................................................. 10
3.2 分析 ................................................................. 11
3.2.1 需求分析 ........................................................ 11
3.2.2 难点分析 ........................................................ 12
3.3 架构 ................................................................. 13
3.3.1 客户端和服务器交互架构 .......................................... 13
3.3.2 服务器端架构 .................................................... 15
3.3.3 客户端架构 ...................................................... 19
3.4.2 防范 CSRF........................................................ 20
3.4.3 身份认证和权限控制 .............................................. 20
4 人机交互层的实现 ...........................................21
4.1 概述 ................................................................. 21
4.2 控制交互层 ........................................................... 21
4.2.1 协议 ............................................................ 21
4.2.2 通信 ............................................................ 23
4.2.3 控制 ............................................................ 24
4.3 数据交互层 ........................................................... 26
4.3.1 与食用菌相关数据库交互 .......................................... 26
4.3.2 与用户相关数据库的交互 .......................................... 27
4.3.3 与 Memcached 缓存系统交互 ........................................ 29
4.4 用户交互层 ........................................................... 30
4.4.1 策略模块 ........................................................ 30
4.4.2 数据模块 ........................................................ 33
4.4.3 设备模块 ........................................................ 36
4.4.4 其他模块 ........................................................ 37
4.5 系统部署 ............................................................. 38
4.6 测试结果和分析 ....................................................... 39
5 总结和展望 .................................................44
参考文献........................................................46
致谢 .......................................................... 47
3.4 安全 ................................................................. 20
3.4.1 防范 XSS......................................................... 20
1.3系统开发及运行环境
本系统以 B/S 结构展示，系统分为服务器端和客户端（浏览器端）。具体的
开发和测试环境如下：
服务器端：
? 操作系统： Windows Server 2008 R2 Enterprise / Linux Ubuntu
3.13.0-24-generic
? SQL 数据库：Mysql / SQL Server 2008
? Memcache 版本：Memcached 1.4.19
? Web 服务器：Apache 2.2 / Nginx-1.4.7
? Wsgi: mod_wsgi 3.4 / uwsgi-2.0.4
? Python 版本：Python 2.7.6
? Django 版本：Django 1.5.5
客户端：
? Chrome
? Internet Explorer 10
2 开发工具和技术介绍
2.1开发工具
Emacs 是一个可扩展的、可定制的、自我编制文档实时显示的编辑器。它提
供真正的 LISP 平滑地集成进编辑器，用于编写扩展并提供 X Window 系统的一
个界面。
Chrome 开发工具（以下简称开发工具），是一套集成进谷歌 Chrome 的发布
和调试工具。该工具让网页开发者能够进入到浏览器内部以及他们写的代码内部
一探究竟。使用开发工具可以有效的追查布局问题，设置 JavaScript 断点以及获
取代码优化方面的建议。
2.2开发语言
Python（英语发音：/?pa?θ?n/）, 是一种面向对象、解释型计算机程序设计
语言，由 Guido van Rossum 于 1989 年底发明，第一个公开发行版发行于 1991
年。Python 语法简洁而清晰，具有丰富和强大的类库。它常被昵称为胶水语言，
它能够很轻松的把用其他语言制作的各种模块（尤其是 C/C++）轻松地联结在一
起。常见的一种应用情形是，使用 Python 快速生成程序的原型（有时甚至是程
序的最终界面），然后对其中有特别要求的部分，用更合适的语言改写，比如 3D
游戏中的图形渲染模块，性能要求特别高，就可以用 C++重写。
CoffeeScript 是一个轻量级的，编译成 JavaScript 的语言，但不是 JavaScript
的超集，所以仍然可以在 CoffeeScript 中使用外部的 JavaScript 类库，她试图提
供一种简单的方式包含 JavaScript 的精华部分。
LESSCSS 是一种动态样式语言，属于 CSS 预处理语言的一种，它使用类似
CSS 的语法，为 CSS 的赋予了动态语言的特性，如变量、继承、运算、函数等，
更方便 CSS 的编写和维护。LESSCSS 可以在多种语言、环境中使用，包括浏览
器端、桌面客户端、服务端。
HTML5 是 HTML 下一代版本，HTML5 将整个页面结构将更加的语义化，
具体表现如图 2-1 所示：
2.3HTTP
HTTP 是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适
用于分布式超媒体信息系统。它于 1990 年提出，经过几年的使用与发展，得到
不断地完善和扩展。目前使用的是 HTTP/1.1。
HTTP 请求由三部分组成，分别是：请求行、请求报头、请求正文
2.4RESTful
REST 的全称是 Representational State Transfer，可译为“表征状态转移”。是
Roy Fielding 博士在 2000 年他的博士论文中提出的一种软件架构风格。目前，与
SOA 和 RPC 相比，REST 的实现更为简洁。
表征状态转移类型的 Web 服务类似 HTTP 或其他协议，它们以资源为核心，
把接口限定在一组广为人知的标准动作中（如 GET, POST, PUT, DELETE 等），
以供调用。这类 Web 服务与前面两个相比，更加关注资源本身，而非消息或动
作。因而，这种 Web 服务的方式并不受限于编程语言种类，组织庞大的 URI 也
不是很繁琐，而且以资源为核心，以 HTTP 协议为基础，更便于在互联网上传播。
2.5AJAX
AJAX 即 Asynchronous JavaScript and XML（异步 JavaScript 和 XML) ，
AJAX 并非缩写词，而是由 Jesse James Gaiiett 创造的名词，是指一种创建交互
式网页应用的网页开发技术。
AJAX 工作原理的核心是 JavaScript 对象 XmlHttpRequest，采用异步的形式
交换过程。AJAX 在用户与服务器之间引入一个中间媒介，从而消除了网络交互
过程中的处理——等待——处理——等待缺点。这样做可以达到一种不用刷新整
个页面便可与服务器通讯的办法。提高用户的体验指数,同时在另一方面也增强
了 WEB APP 的功能。
2.6JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。其编码形
式非常适合人类阅读和编写。同时，也易于机器解析和生成。JSON 采用的是独
立于语言的文本，使用了类似于 C 语言家族的习惯，因此成为非常适合进行数
据交换。
食用菌监控系统（以下简称监控系统）是一个通过对预设多种食用菌生产的经典环境
参数，如 CO2 浓度、湿度、温度等，进行量化跟踪和控制，达到智能化种植目的的系统。
监控系统由数据采集层（硬件层），数据层，人机交互层三部分组成。
人机交互层属于监控系统的展示层，由服务器和客户端两部分组成。其中，服务器部
分使用 Python 语言，Django 框架，MySQL 和 SQL Server 数据库以及 Memcached 缓存系
统，构建一个高效的 WEB 服务系统；客户端部分使用 CoffeeScript、Less 和 HTML5，实
现一个具有丰富交互功能的人机界面。本论文详细阐述了如何设计和实现服务器和客户端
系统，以及这两者之间的交互过程。此外，本论文还对系统的数据存储、可视化分析、远
程控制等方面提出了一些改进方案。
关键字：食用菌 人机交互 数据可视化 远程控制
1 绪论 ........................................................1
1.1 选题背景和研究意义 .................................................... 1
1.2 研究内容和成果 ........................................................ 2
1.3 系统开发及运行环境 .................................................... 4
2 开发工具和技术介绍 ..........................................5
2.1 开发工具 .............................................................. 5
2.2 开发语言 .............................................................. 5
2.3 HTTP .................................................................. 6
2.4 RESTful ............................................................... 7
2.5 AJAX .................................................................. 7
2.6 JSON .................................................................. 7
2.7 Memcached ............................................................. 8
2.8 WSGI .................................................................. 9
2.9 Framework ............................................................. 9
2.9.1 WEB 服务器端框架和第三方库........................................ 9
2.9.2 前端框架和第三方库 ............................................... 9
3 人机交互层架构和设计 .......................................10
3.1 概述 ................................................................. 10
3.2 分析 ................................................................. 11
3.2.1 需求分析 ........................................................ 11
3.2.2 难点分析 ........................................................ 12
3.3 架构 ................................................................. 13
3.3.1 客户端和服务器交互架构 .......................................... 13
3.3.2 服务器端架构 .................................................... 15
3.3.3 客户端架构 ...................................................... 19
3.4.2 防范 CSRF........................................................ 20
3.4.3 身份认证和权限控制 .............................................. 20
4 人机交互层的实现 ...........................................21
4.1 概述 ................................................................. 21
4.2 控制交互层 ........................................................... 21
4.2.1 协议 ............................................................ 21
4.2.2 通信 ............................................................ 23
4.2.3 控制 ............................................................ 24
4.3 数据交互层 ........................................................... 26
4.3.1 与食用菌相关数据库交互 .......................................... 26
4.3.2 与用户相关数据库的交互 .......................................... 27
4.3.3 与 Memcached 缓存系统交互 ........................................ 29
4.4 用户交互层 ........................................................... 30
4.4.1 策略模块 ........................................................ 30
4.4.2 数据模块 ........................................................ 33
4.4.3 设备模块 ........................................................ 36
4.4.4 其他模块 ........................................................ 37
4.5 系统部署 ............................................................. 38
4.6 测试结果和分析 ....................................................... 39
5 总结和展望 .................................................44
参考文献........................................................46
致谢 .......................................................... 47
3.4 安全 ................................................................. 20
3.4.1 防范 XSS......................................................... 20
1.3系统开发及运行环境
本系统以 B/S 结构展示，系统分为服务器端和客户端（浏览器端）。具体的
开发和测试环境如下：
服务器端：
? 操作系统： Windows Server 2008 R2 Enterprise / Linux Ubuntu
3.13.0-24-generic
? SQL 数据库：Mysql / SQL Server 2008
? Memcache 版本：Memcached 1.4.19
? Web 服务器：Apache 2.2 / Nginx-1.4.7
? Wsgi: mod_wsgi 3.4 / uwsgi-2.0.4
? Python 版本：Python 2.7.6
? Django 版本：Django 1.5.5
客户端：
? Chrome
? Internet Explorer 10
2 开发工具和技术介绍
2.1开发工具
Emacs 是一个可扩展的、可定制的、自我编制文档实时显示的编辑器。它提
供真正的 LISP 平滑地集成进编辑器，用于编写扩展并提供 X Window 系统的一
个界面。
Chrome 开发工具（以下简称开发工具），是一套集成进谷歌 Chrome 的发布
和调试工具。该工具让网页开发者能够进入到浏览器内部以及他们写的代码内部
一探究竟。使用开发工具可以有效的追查布局问题，设置 JavaScript 断点以及获
取代码优化方面的建议。
2.2开发语言
Python（英语发音：/?pa?θ?n/）, 是一种面向对象、解释型计算机程序设计
语言，由 Guido van Rossum 于 1989 年底发明，第一个公开发行版发行于 1991
年。Python 语法简洁而清晰，具有丰富和强大的类库。它常被昵称为胶水语言，
它能够很轻松的把用其他语言制作的各种模块（尤其是 C/C++）轻松地联结在一
起。常见的一种应用情形是，使用 Python 快速生成程序的原型（有时甚至是程
序的最终界面），然后对其中有特别要求的部分，用更合适的语言改写，比如 3D
游戏中的图形渲染模块，性能要求特别高，就可以用 C++重写。
CoffeeScript 是一个轻量级的，编译成 JavaScript 的语言，但不是 JavaScript
的超集，所以仍然可以在 CoffeeScript 中使用外部的 JavaScript 类库，她试图提
供一种简单的方式包含 JavaScript 的精华部分。
LESSCSS 是一种动态样式语言，属于 CSS 预处理语言的一种，它使用类似
CSS 的语法，为 CSS 的赋予了动态语言的特性，如变量、继承、运算、函数等，
更方便 CSS 的编写和维护。LESSCSS 可以在多种语言、环境中使用，包括浏览
器端、桌面客户端、服务端。
HTML5 是 HTML 下一代版本，HTML5 将整个页面结构将更加的语义化，
具体表现如图 2-1 所示：
2.3HTTP
HTTP 是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适
用于分布式超媒体信息系统。它于 1990 年提出，经过几年的使用与发展，得到
不断地完善和扩展。目前使用的是 HTTP/1.1。
HTTP 请求由三部分组成，分别是：请求行、请求报头、请求正文
2.4RESTful
REST 的全称是 Representational State Transfer，可译为“表征状态转移”。是
Roy Fielding 博士在 2000 年他的博士论文中提出的一种软件架构风格。目前，与
SOA 和 RPC 相比，REST 的实现更为简洁。
表征状态转移类型的 Web 服务类似 HTTP 或其他协议，它们以资源为核心，
把接口限定在一组广为人知的标准动作中（如 GET, POST, PUT, DELETE 等），
以供调用。这类 Web 服务与前面两个相比，更加关注资源本身，而非消息或动
作。因而，这种 Web 服务的方式并不受限于编程语言种类，组织庞大的 URI 也
不是很繁琐，而且以资源为核心，以 HTTP 协议为基础，更便于在互联网上传播。
2.5AJAX
AJAX 即 Asynchronous JavaScript and XML（异步 JavaScript 和 XML) ，
AJAX 并非缩写词，而是由 Jesse James Gaiiett 创造的名词，是指一种创建交互
式网页应用的网页开发技术。
AJAX 工作原理的核心是 JavaScript 对象 XmlHttpRequest，采用异步的形式
交换过程。AJAX 在用户与服务器之间引入一个中间媒介，从而消除了网络交互
过程中的处理——等待——处理——等待缺点。这样做可以达到一种不用刷新整
个页面便可与服务器通讯的办法。提高用户的体验指数,同时在另一方面也增强
了 WEB APP 的功能。
2.6JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。其编码形
式非常适合人类阅读和编写。同时，也易于机器解析和生成。JSON 采用的是独
立于语言的文本，使用了类似于 C 语言家族的习惯，因此成为非常适合进行数
据交换。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/qrs/227.html
