Document

Download Report

Transcript Document 

第9章 嵌入式WEB服务器的建立
本章结构
9.1、嵌入式WEB服务器及远程测控简介
9.2、嵌入式BOA 服务器移植
9.3、HTML 中表单的使用
9.4、CGI 及表单提交方式介绍
9.5、简单的LED 控制
9.1、嵌入式WEB服务器及远程测控简介(1)
 嵌入式WEB 服务器及远程测控总的思想就是网络
化仪器。
B/S 结构
9.1、嵌入式WEB服务器及远程测控简介(2)
 使用嵌入式WEB 服务器的好处
 只需浏览器，无需开发应用软件，降低系统成。
 监控终端平台与服务器平台无关，真正实现了跨
平台。
 操作界面简单统一，表达直观生动。
 易于扩展新的功能，系统升级仅需在Web 服务
器一端添加相应模块，与远程监控终端无关，降
低系统升级维护费用。
 可提供分布式并行处理，基于Web 的测控系统
可构成一个多CPU 协调工作的分布式测控系统，
可并行处理多个测控指令。
9.1、嵌入式WEB服务器及远程测控简介(2)
测控服务器 示例：
家庭环境监测
9.2、嵌入式BOA 服务器移植
9.2.1、嵌入式BOA 服务器的简介
9.2.2、嵌入式BOA 服务器的移植
9.2.3、CGI 脚本测试
9.2.1、嵌入式BOA 服务器的简介(1)
Boa是一款单任务的HTTP服务器，与其他传统的Web服务器不
同的是当有连接请求到来时．它并不为每个连接单独创建进程，
也不通过复制自身进程来处理多链接，而是通过建立HTTP请
求列表来处理多路HTTP连接请求，同时它只为CGI程序创建新
的进程，这样就在最大程度上节省了系统资源，这对嵌入式系
统来说至关重要．同时它还具有自动生成目录、自动解压文件
等功能，因此，Boa具有很高的HTTP请求处理速度和效率，在
嵌入式系统中具有很高的应用价值．
9.2.1、嵌入式BOA 服务器的简介(2)
Boa的整体工作流程图
9.2.2、嵌入式BOA 服务器的移植(1)
1. 下载Boa源码
2. 解压源代码
3. 进行config,生成Makefile文件
4. 修改Makefile文件
5. 编译
6. 去掉文本信息，使boa文件变小
9.2.2、嵌入式BOA 服务器的移植(2)
7、BOA的配置
Boa需要在/etc目录下建立一个boa目录，里面放入Boa的主
要配置文件boa.conf。
1、Group的修改
2、ScriptAlias的修改
3、ServerName的设置
9.2.2、嵌入式BOA 服务器的移植(3)
8、BOA的运行
成功配置以后，还需要创建日志文件所在目录/var/log/boa，创
建HTML文档的主目录/var/www，将静态网页存入该目录下
（可以将主机 /usr/share/doc/HTML/目录下的index.html文件和
img目录复制到/var/www目录下），创建CGI脚本所在目录
/var/www/cgi-bin，将cgi的脚本存放在该目录下。另外还要将
mime.types文件复制/etc目录下，通常可以从linux主机的 /etc
目录下直接复制即可。
9.2.3、CGI 脚本测试(1)
 CGI 的概念
CGI(Common Gateway Interface) 通用网关接口的简称。其主
要的功能是在WWW 环境下，从客户端传递一些信息给Web 服
务器，再由Web 服务器去启动所指定的程序来完成特定的工作。
所以简单点说，CGI 是一种通用的接口标准。
CGI 可以为我们提供许多HTML（HyperText Markup
Language,超文本标记语言）无法做到的功能。比如一个计算
器、顾客表格的提交以及统计、搜索引擎、Web 数据库等等。
用HTML 是没有办法记住客户的任何信息的。要把顾客的信息
记录在服务器的硬盘上，就要用到CGI。
9.2.3、CGI 脚本测试(2)
 写一个简单的helloworld.c 程序，如下：
#include<stdio.h>
int main()
{
printf("Content-type: text/html\n\n");
printf("<html>\n");
printf("<head><title>BOA CGI TEST</title></head>\n");
printf("<body>\n");
printf("<h1>BOA CGI TEST</h1>\n");
printf("</body>\n");
printf("</html>\n");
exit(0);
}
9.2.3、 CGI 脚本测试(2)
 进行交叉编译，将得到的helloworld 拷贝到var/www/cgibin 目录下。
 在浏览器中输入http://192.168.0.115/cgi-bin/helloworld
 可以看到下面页面，表示CGI 测试通过。
9.3、HTML 中表单的使用
9.3.1、HTML 简介
9.3.2、HTML 标签
9.3.3、HTML 中的表单
9.3.4、INPUT 标签
9.3.5、Select标签
9.3.6、Textarea标签
9.3.7、表单示例
9.3.8、HTML超链接示例
9.3.1、HTML 简介
 HTML 最初是由Tim Berners Lee 在CERN 开发的，由于当时
这种语言在NCSA 的Mosaic
 浏览器中使用，开始渐渐流传。1990 年以后，随着Internet 的
迅速发展，HTML 开始空前繁荣。HTML 开始出现了许多不同
的版本，不同的浏览器支持不同的HTML 版本。为了打破这种
混乱的标准，急需推出一种大家都共同遵守的HTML 语言，这
就要求把HTML 语言规范化、标准化。
9.3.2、HTML 标签(1)
 HTML文档中的所有文本内容是要显示在浏览器屏幕上的。
HTML标签包括影响文本表示和允许在文本中插入附加内
容的信息，比如图形图象及导航链接。标签由左右两个尖
括号及其中的文本组成，其文本通常不区分大小写的。
9.3.2、HTML 标签(2)
标签
属性
<!—This is a comment-->
注释--不显示
<a href=”test.htm”>Test page</a>
超链接
<a name=”help”>Help info</a>
锚名字
<b>Bold text</b>
粗体
<body>Sample text</body>
文档体
<br>Start of new line
另起一行
<em>Bold text</em>
粗体文本
<font face=’arial’ size=-2>Smaller text</font>
设置字体
<form action=resp.htm>...</form>
从...创建
<h2>Heading</h2>
标题层
<head><title>My Doc</title></head>
文档头
<hr>New section
水平分隔线
<i>Italic</i>
斜体文本
9.3.2、HTML 标签(3)
<img src=’graph.gif’alt=’Test results’>
图形图象
<input type=submit name=send>
表单的输入元素
<meta http-equiv=refresh content=”5;default.htm”>
附加文档信息
<p>New paragraph
图形分割符
<pre>Program text</pre>
预格式化文本
<table><tr><td>Dat1</td><td>Dat2</td></tr></table>
表格数据
<title>Test document</title>
文档标题
9.3.3、HTML 中的表单(1)
 HTML 中表单（FORM）在CGI 中是常见使用的输入界面，虽然
并不十分完美，但它的确是目前www 中最强大的输入工具。
 FORM 是由一组相关联的标签所组成，使用方法就像HTML 中的
其他标签一样。在FORM 中提供了多种输入资料的工具，如文字
输入区（Text）、下拉式菜单（select）、复选框(CheckBox)、单
选框(RadioButton)等等。就目前所定义的标准种，FORM 的标签
可以分为<INPUT>、<SELECT>以及<TEXTAREA>三个大类。
9.3.3、HTML 中的表单(2)

定义表单FORM 标签
一、表单的基本语法
<FORM MOTHOD=GET/POST ACTION=URL>
。。。
。。。
<FORM>
<FORM>标签定义了一个交互式表单，使用户可以通过表单提交信息。表单
的开始标记是<FORM>，结束标记是</FORM>
9.3.3、HTML 中的表单(3)
 二、表单中的属性
 <form>标签作为表单的定义，
<FORM>中具有下面几个属性：
它指定了：
* ACTION＝URL
*MOTHOD＝GET 或者POST
*ENCTYPE=ContentType
*Onsubmit=script
*onreset=script
*target=fram target
*accept-charset=charsets
*name=formname
（1）表单的界面（通过其他标
签给出）
（2）用来处理表单提交的数据
的程序（ACTION 属性）
（3）用户数据通过哪种方式送
到服务器（METHOD 属性）
（4）为了处理这个表单，字符
编码方式必须能够被服务器接
受（ACCEPT-CHARSET 属性）
9.3.4、INPUT 标签(1)
 一、INPUT 的基本用法
<INPUT TYPE=输入类型>
<INPUT>标签定义了一个输入类型，使用户可以通过表
单提交用户信息。INPUT 是单标签，开始标志<INPUT>
是需要的，无结束标志。
9.3.4、INPUT 标签(2)
 二、INPUT 中的属性
<INPUT>中具有一下几个属性：
TYPE=[text password
checkbox radio submit reset
file hidden image button]
NAME=Cdata
VALUE=Cdata
Size=Cdata
disabled
readonly
maxlength=integer
checked
src=url
alt=cdata
usemap=url
align=[left center right justify]
tabindex=interger
onfocus=script
onblur=script
onselect=script
onchange=script
accept=cdata
9.3.4、INPUT 标签(3)

三、input 标签中tpye 属性输入类型
tpye 属性中定义了10 个输入类型：
1. Text
2. Password
3. Checkbox
4. Radio
5. Submit
6. Reset
7. File
8. Hidden
9. Image
10. button。
test_input.html
9.3.5、Select标签(1)
一、select 的基本语法
<select name=””>
<option>
</select>
<select>标签定义了一个下拉选择表单，使用户可以通过选择表单
中的数据提交。下拉选择菜单的开始标志<select>是需要的，结束
标志</select>也是需要的。在select 标签中还有一个内嵌的标签
<option>，option 标签是单标签，开始标志是需要的，不需要结
束标志。
9.3.5、Select标签(2)

二、select 中的属性
select 中具有以下几个属性：
name = cdata
size = cdata
multiple
disabled
tabindex=integer
onfocus=script
onblur=script
onselect=script
onchange=script
9.3.5、Select标签(3)

三、option 中的属性
<option>中具有以下几个属性：
selected
disabled
value=cdata
说明；
selected
这个属性指定了此选项缺省情况时是被选中的。
disabled
这个属性禁止此输入类型被用户输入
value=cdata
这个属性指定了输入类型的初始值
test_select.html
9.3.6、Textarea标签(1)
 一、textarea 的基本语法
<textarea name =* rows=** cols=** >
<textarea>
<textarea> 标签定义了一个文本输入域，使用户可以输入文
本提交。textarea 标签的开始标志<textarea> 是需要的结
束标志也是需要的。
9.3.6、Textarea标签(2)

二、textarea 中的属性
<textarea>中具有以下几个属性：
name=cdata
rows=integer
cols=integer
disabled
readonly
tabindex=integer
onfocus=script
onblur=script
onselect=script
onchange=script
test_textarea.html
9.3.7、表单示例
test_form.html
9.3.8、HTML超链接示例(1)
 digout00.htm
<HTML><HEAD></HEAD>
<BODY bgcolor=#d0d0ff><font face=helvetica>
<h3><center>Control</center></h3>
<center><table>
<tr valign=middle>
<td><a href="digout10.htm"><img src="sw0.gif"></a></td>
<td><a href="digout01.htm"><img src="sw0.gif"></a></td>
</tr><tr valign=middle>
<td align=center><img src="led0.gif"></td>
<td align=center><img src="led0.gif"></td>
</tr>
</table></center>
</BODY>
</HTML>
9.3.8、HTML超链接示例(2)
9.4、CGI 介绍及表单提交方式
9.4.1、CGI的介绍
9.4.2、CGI程序
9.4.1、CGI的介绍
 CGI的概念
 CGI的工作原理
 CGI的输入与输出
 CGI编程语言的选择
 CGI变量
9.4.2、CGI程序


CGI程序的使用方法
CGI程序的编写
1. GET方式
2. POST方式
9.5、简单LED控制




LED驱动
CGI 程序
html程序
运行效果
运行效果