树莓派WEB服务器(Boa)CGI编程入门

通过上一个课程“Boa基本设置与使用”的学习,大家在树莓派上应已经会安装、配置、运行Boa服务器,并且访问到服务器上的一个静态网页。
这不是运行Web服务器最终的目的,最终应是通过B/S(浏览器/服务器)模式实现两端的相互。

下面通过一个CGI编程实例来学习,WEB服务器的动态编程技术。“体重指数(BMI)计算器”,用户输入自己的身高与体重后点击计算,服务器就会计算出BMI数值。

课程资源(程序参考代码,图片)http://pan.baidu.com/s/1dF3WIiP

体重指数(BMI)计算器

这里写图片描述

开发设计流程

Created with Raphaël 2.1.0 界面功能设计 静态html文件,html程序显示界面 静态cgi文件,cgi程序显示界面 动态cgi文件,cgi程序处理用户数据显示 调试运行

一、HTML静态显示

1 . 静态的html文件

cgi.html

<html>
<body>
<div align="center">

<form action="bmi.cgi" method="GET">

<table> 
<tr><td rowspan="3"><img src="bmi.png" hight="60" width="120"></td>
<td align="center" colspan="3"><h2>体重指数(BMI)计算器</h2></td></tr>

<tr><td >身高 : <input type="text" name="cm"  size="3"> cm </td>
<td >体重 : <input type="text" name="kg"  size="3"> kg </td>
<td align="center" ><input type=submit value=" 计 算 " size="16"> </td></tr>

<tr><td align="center" colspan="3">BMI = 
<input type="text" name="ret" value=""  size="3" readonly></tr> 
</table>    

</form>
</br><img src=bmi_index.png >
</div>

</body>     
</html> 

二、CGI程序输出页面

CGI基本概念

CGI:通用网关接口(Common Gateway Interface)是一个Web服务器主机提供信息服务的标准接口。通过CGI接口,Web服务器就能够获取客户端提交的信息,转交给服务器端的CGI程序进行处理,最后返回结果给客户端。

WEB服务器和CGI程序之间的通讯
服务器和CGI程序之间是通过标准输入输出来进行数据传递的,而这个过程需要环境变量的协作方可实现。

1.服务器将URL指向一个应用程序
2.服务器为应用程序执行做准备
3.应用程序执行,读取标准输入和有关环境变量
4.应用程序进行标准输出

这里写图片描述

服务器上运行的cgi 通过标准输入(环境变量)来取得客户端用户数据,通过标准输出向客户端返回数据显示。

CGI数据输出
CGI程序如何将信息处理结果返回给客户端?这实际上是CGI格式化输出。
在CGI程序中的标准输出stdout是经过重定义了的,它并没有在服务器上产生任何的输出内容,而是被重定向到客户浏览器,这与它是由C,还是Perl或Python实现无关。
所以,我们可以用打印来实现客户端新的HTML页面的生成。比如,C的printf是向该进程的标准输出发送数据,Perl和Python用print向该进程的标准输出发送数据。

课程中CGI程序使用C语言编程。
向标准输出发送网页内容时要遵守MIME格式规则:
任意输出前面必须有一个用于定义MIME类型的输出内容(Content-type)行,而且随后还必须跟一个空行。

printf( "Content-type:text/html\n\n" );

2 . cgi显示界面程序

bmi.c

#include<stdio.h>

int main()
{
    printf( "Content-type:text/html\n\n" ); 

    printf("<html><body><div align=\"center\">\n");

    printf("<form action=\"bmi.cgi\" method=\"GET\"><table>     \n");

    printf("<tr><td rowspan=\"3\"><img src=\"../bmi.png\" hight=\"60\" width=\"120\"></td>    \n");
    printf("<td align=\"center\" colspan=\"3\"><h2>体重指数(BMI)计算器</h2></td></tr>    \n");
    printf("<tr><td >身高 : <input type=\"text\" name=\"cm\"  size=\"3\"> cm </td>    \n");
    printf("<td >体重 : <input type=\"text\" name=\"kg\"  size=\"3\"> kg </td>    \n");
    printf("<td align=\"center\" ><input type=submit value=\" 计 算 \" size=\"16\">   </td></tr>    \n");
    printf("<tr><td align=\"center\" colspan=\"3\">BMI =     \n");
    printf("<input type=\"text\" name=\"ret\" value=\" \"  size=\"3\" readonly></tr>     \n");
    printf("</table></form></br><img src=\"../bmi_index.png\" >    \n");
    printf("</div></body>   </html>     \n");

    return 0;                       

}
CGI程序的编译执行
 $gcc bmi.c -o bmi.cgi           //gcc编译器编译
 $cp bmi.cgi /var/www/cgi-bin/   //拷贝到boa服务器设定的cgi-bin目录

 //在客户端浏览器输入cgi程序地址如:10.1.1.123/cgi-bin/bmi.cgi 回车后就可看到本文最开始显示的web页面。

三、CGI程序数据处理

CGI环境变量
对于CGI程序来说,它继承了系统的环境变量。CGI环境变量在CGI程序启动时初始化,在结束时销毁。
当一个CGI程序不是被HTTP服务器调用时,它的环境变量几乎是系统环境变量的复制。当这个CGI程序被HTTP服务器调用时,它的环境变量就会多了关于HTTP服务器、客户端、CGI传输过程等项目。

这里写图片描述

CGI数据传输方式
REQUEST_METHOD:它的值一般包括两种:POST和GET,但我们写CGI程序时,最后还要考虑其他的情况。
1.POST方法
如果采用POST方法,那么客户端来的用户数据将存放在CGI进程的标准输入中,同时将用户数据的长度赋予环境变量中的CONTENT_LENGTH。
2.GET方法
在该方法下,CGI程序无法直接从服务器的标准输入中获取数据,因为服务器把它从标准输入接收到得数据编码到环境变量QUERY_STRING(或PATH_INFO)。
3.POST与GET的区别
以 GET 方式接收的数据是有长度限制,而用 POST 方式接收的数据是没有长度限制的。并且,以 GET 方式发送数据,可以通过 URL 的形式来发送,但 POST方式发送的数据必须要通过 Form 才到发送。

CGI程序实现步骤
从服务器获取数据
C语言实现代码:
POST方法
length = atoi(getenv(“CONTENT_LENGTH”));
inputstring = malloc(sizeof(char)*length + 1);
fread(inputstring, sizeof(char), length, stdin);

GET方法
inputstring = getenv(“QUERY_STRING”);

CGI程序获取数据都是连续字符串要进行解析才能得到独立数据。
getvalue.h文件中给出处理函数get_value( )

3 . cgi数据动态处理程序

在上面bmi.c基础上进行修改,首先在main函数最前面加上以下代码。

int main(){
    char *val_cm = NULL;
    char *val_kg = NULL;
    int cm,kg,len=0;
    float mm,bmi=0.0;

    set_env(getenv("REQUEST_METHOD"),
            getenv("CONTENT_LENGTH"),
            getenv("QUERY_STRING"));    

    //<input type="text" name="cm"  size="3">       
    val_cm = get_value("cm");   //通过变量名获取身高

    val_kg = get_value("kg");   //通过变量名获取体重 
    cm = atoi(val_cm);
    kg = atoi(val_kg);
    if(cm > 0 && kg > 0){
        mm = cm/100.0;
        bmi = (kg / (mm * mm));
    }
...
//这里是页面显示代码
...
}

下面输出bmi数据的html代码。

printf("<input type=\"text\" name=\"ret\" value=\" \"  size=\"3\" readonly></tr>     \n");

修改成输出计算出用户数据的代码。

if(bmi == 0.0)
    printf("<input type=\"text\" name=\"ret\" value=\"  \"  size=\"3\" readonly></tr>     \n");
else
      printf("<input type=\"text\" name=\"ret\" value=\" %4.2f  \"  size=\"3\" readonly></tr>     \n",bmi); 

编译后copy到cgi-bin目录,现在用户在浏览器就可以输入数据提交后,服务器计算结果显示。

如果浏览器出现502错误,说明 cgi程序运行有问题。可以在终端下运行调试。

  • 3
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值