百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

实用 | 10分钟教你通过网页点灯

yuyutoo 2025-02-15 18:05 1 浏览 0 评论

大家好,我是ZhengN。

上一篇实用 | 10分钟教你搭建一个嵌入式web服务器我们已经基于我们的开发板搭好了一个基于boa的web服务器。这一篇接着分享如何使用网页来点灯。

网页点灯的整个流程大致为:

从上到下,前面两部分我们就是我们上一篇做的实验,已经打通了。而第三部分就是本篇笔记的重点,我们要点灯,自然需要写一个程序来解析数据及进行点灯操作,即这里的CGI程序。

什么是CGI?

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

根据CGI标准,编写外部扩展应用程序,可以对客户端浏览器输入的数据进行处理,完成客户端与服务器的交互操作。CGI规范定义了Web服务器如何向扩展应用程序发送消息,在收到扩展应用程序的信息后又如何进行处理等内容。

一般情况下,服务器和CGI程序之间是通过标准输入输出来进行数据传递的,CGI程序中的标准输出stdout是经过重定义了的,它并没有在服务器上产生任何的输出内容,而是被重定向到客户浏览器。即我们的CGI程序是在我们的板子服务器里运行,但实际调用printf输出信息时并不会输出到我们的板子终端,而是输出到客户端浏览器。

CGI程序小例子

CGI程序可以使用多种语言来实现,这里我们选用我们比较熟悉的C语言来实现。先来看一个简单的示例:

test.c:

#include 

int main()
 {
    printf("Content-type: text/html\n\n") ;  // 这一句是必须的,设定输出到HTML
    printf("Hello CGI\n") ;
    return 0;
}

利用交叉编译工具,编译上述文件:

arm-linux-gnueabihf-gcc test.c -o test.cgi

把test.cgi程序传到开发板上的/www/cgi-bin目录

scp test.cgi root@192.168.1.8:/www/cgi-bin

修改权限;

chmod 777 test.cgi

浏览器进行访问:

http://192.168.1.8/www/cgi-bin/test.cgi

网页点灯

我们已经知道了CGI程序是什么了。下面我们来进行网页点灯。首先,需要说明的是,我们有两种方式来编写CGI程序。一种是借助环境变量来获取相关信息;另一种是使用CGIC库。

方法一:

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

方法二:

用C语言写CGI程序还可以有比较简单的方式,那就是我们可以借助使用第三方库CGIC(CGIC是一个功能比较强大的支持CGI开发的标准C库,并支持Linux, Unix 和Windows等多操作系统)来编写,省去了必须自己去遵循CGI规范来编码的痛苦。

CGIC库下载地址:

https://github.com/boutell/cgic

这里只是简单地介绍了两种方法。还不理解没关系,下面我们通过具体的实例来认识这两种方法。

首先,我们需要点灯,自然需要先设计一个简单的led.html网页。我们要通过网页控制开发板上的led,需要两条信息:led的序号及led的状态。在网上找到了现成的html代码,稍微修改一下就直接拿来用了(文末给出参考的博客)。

led.html:


    
        
    led control
    
    
    
    

基于ARM的web控制LED灯

Web端的led的控制测试

请输入需要控制的led

请输入控制led的动作

把led.html放到我们开发板上的/www/中,通过浏览器访问:

http://192.168.1.8/led.html

实际效果如:

下面我们编写我们的CGI程序。

方法一:借助环境变量来获取相关信息。

#include
#include 
#include 
#include 
#include 
#include 
#include 
#include 
#include 

int main(int argc, const char *argv[])
{
    int led_num,led_state;
    char *data;

    printf("Content-type: text/html;charset=utf-8\n\n");
    printf("\n");
    printf("cgi control led web\n");
    printf("\n");
    printf("

led is setted successful! you can watch the led's change

\n"); printf("

\n"); printf("\n"); data = getenv("QUERY_STRING"); //getenv()读取环境变量的当前值的函数 if(sscanf(data, "led_num=%d&led_state=%d", &led_num, &led_state) != 2) { //利用sscnaf()函数的特点将环境变量分别提取出led_num和led_state这两个值 printf("

please input right"); printf("

"); } printf("

led_num = %d,led_state = %d

", led_num, led_state); if(led_num < 2 || led_num > 5) { printf("

Please input 2<=led_num<=5!"); printf("

"); } if(led_state>1) { printf("

Please input 0<=led_state<=1!"); printf("

"); } printf("\n"); return 0; }

这里的getenv函数就是获取环境变量当前值的函数,其中,各环境变量的意义可以参考上面的表。这里的QUERY_STRING环境变量就是采用GET时所传输的信息。在这个例子中就是:

led_num=3&led_state=1

上面的CGI程序把收到网页发送过来的led_num及led_state的至再使用printf返回至网页中显示。从网页中也可以看到相关信息,整个流程也就打通了。

方法二:使用CGIC库。

第二种方法我们使用CGIC库来编写我们的CGI程序。首先我们需要下载CGIC库,下载地址如:

https://github.com/boutell/cgic

下载得到:

整个包的内容不多,就几个文件。其中:

  • cgic.c 函数库。
  • capture.c 一个很简单的CGI例子。仅仅输出两行提示文字。
  • cgictest.c 一个演示读取form表单数据的CGI例子。

因为我们的CGI程序要运行在我们的arm板中,当然要交叉编译,首先需要修改Makefile文件,需要修改如下几处内容:

第①个修改点:

CFLAGS=-g -Wall
CC=gcc
AR=ar
RANLIB=ranlib
LIBS=-L./ -lcgic

修改为:

CFLAGS=-g -Wall
CC=arm-linux-gnueabihf-gcc
AR=arm-linux-gnueabihf-ar
RANLIB=arm-linux-gnueabihf-ranlib
LIBS=-L./ -lcgic

第②个修改点:

gcc cgictest.o -o cgictest.cgi ${LIBS}

修改为:

arm-linux-gnueabihf-gcc cgictest.o -o cgictest.cgi ${LIBS}

第③个修改点:

gcc capture.o -o capture ${LIBS}

修改为:

arm-linux-gnueabihf-gcc cgictest.o -o cgictest.cgi ${LIBS} capture.o -o capture ${LIBS}

第④个修改点:

gcc -D UNIT_TEST=1 cgic.c -o cgicunittest

修改为:

arm-linux-gnueabihf-gcc -D UNIT_TEST=1 cgic.c -o cgicunittest

这里我的编译器是arm-linux-gnueabihf-gcc,大家需根据自己的实际环境进行修改。make编译得到cgictest.cgi及capture程序,大家可以自行传到板子上进行测试。下面我们在这个文件夹下新增一个led.c文件,用于编写我们的leg cgi程序:

// 微信公众号:嵌入式大杂烩
#include "cgic.h"

// cgic程序以cgiMain作为入口点, cgic的函数库会自动把cgiMain连接到相应的main()上去
int cgiMain() 
{ 
	char led_num[10];  
	char led_state[10]; 
	cgiFormString("led_num",  led_num, 10);    // 从表单中的led_num字段获取值存入到led_num
	cgiFormString("led_state",  led_state, 10);// 从表单中的led_state字段获取值存入到led_state
	cgiHeaderContentType("text/html");         // 设定输出的内容格式 这里我们要输出HTML
	fprintf(cgiOut,"LED Test");   
	fprintf(cgiOut,"

recv from arm:

"); fprintf(cgiOut,"led_num: %s", led_num); fprintf(cgiOut,"
"); fprintf(cgiOut,"led_state: %s", led_state); return 0; }

修改Makefile,把我们的led.c也加入编译。编译得到led.cgi,传入到板子中的/www/cgi-bin文件夹下:

浏览器访问:

http://192.168.1.8/led.html

led cgi程序可以正确地解析led_num及led_state。有了这两个信息,我们就可以愉快地点灯了,这里没有加上点灯相关的操作,大家可以自己加上。

以上就是本次关于网页点灯的实战笔记,如有错误,欢迎指出,谢谢!

巨人肩膀:

1、
https://blog.csdn.net/weixin_39148042/article/details/81252538

2、
https://blog.csdn.net/yaomianfa/article/details/103575425

3、
https://blog.csdn.net/kaloha3/article/details/8548027

4、
https://www.cnblogs.com/lidabo/p/4736216.html

5、
https://blog.csdn.net/qq_695538007/article/details/9153187

猜你喜欢:

实用 | 10分钟教你搭建一个嵌入式web服务器

实用 | 如何远程登录开发板?


1024G 嵌入式资源大放送!包括但不限于C/C++、单片机、Linux等。私信回复1024,即可免费获取!

相关推荐

史上最全的浏览器兼容性问题和解决方案

微信ID:WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄(页底留言开放,欢迎来吐槽)●●●...

平面设计基础知识_平面设计基础知识实验收获与总结
平面设计基础知识_平面设计基础知识实验收获与总结

CSS构造颜色,背景与图像1.使用span更好的控制文本中局部区域的文本:文本;2.使用display属性提供区块转变:display:inline(是内联的...

2025-02-21 16:01 yuyutoo

写作排版简单三步就行-工具篇_作文排版模板

和我们工作中日常word排版内部交流不同,这篇教程介绍的写作排版主要是用于“微信公众号、头条号”网络展示。写作展现的是我的思考,排版是让写作在网格上更好地展现。在写作上花费时间是有累积复利优势的,在排...

写一个2048的游戏_2048小游戏功能实现

1.创建HTML文件1.打开一个文本编辑器,例如Notepad++、SublimeText、VisualStudioCode等。2.将以下HTML代码复制并粘贴到文本编辑器中:html...

今天你穿“短袖”了吗?青岛最高23℃!接下来几天气温更刺激……

  最近的天气暖和得让很多小伙伴们喊“热”!!!  昨天的气温到底升得有多高呢?你家有没有榜上有名?...

CSS不规则卡片,纯CSS制作优惠券样式,CSS实现锯齿样式

之前也有写过CSS优惠券样式《CSS3径向渐变实现优惠券波浪造型》,这次再来温习一遍,并且将更为详细的讲解,从布局到具体样式说明,最后定义CSS变量,自定义主题颜色。布局...

柠檬科技肖勃飞:大数据风控助力信用社会建设

...

你的自我界限够强大吗?_你的自我界限够强大吗英文

我的结果:A、该设立新的界限...

行内元素与块级元素,以及区别_行内元素和块级元素有什么区别?

行内元素与块级元素首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block)、行内(inline)。块级元素:(以下列举比较常...

让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华
让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华

去年的两会期间,习近平总书记在参加人大会议四川代表团审议时,对治蜀兴川提出了明确要求,指明了前行方向,并带来了“祝四川人民的生活越来越安逸”的美好祝福。又是一年...

2025-02-21 16:00 yuyutoo

今年国家综合性消防救援队伍计划招录消防员15000名

记者24日从应急管理部获悉,国家综合性消防救援队伍2023年消防员招录工作已正式启动。今年共计划招录消防员15000名,其中高校应届毕业生5000名、退役士兵5000名、社会青年5000名。本次招录的...

一起盘点最新 Chrome v133 的5大主流特性 ?

1.CSS的高级attr()方法CSSattr()函数是CSSLevel5中用于检索DOM元素的属性值并将其用于CSS属性值,类似于var()函数替换自定义属性值的方式。...

竞走团体世锦赛5月太仓举行 世界冠军杨家玉担任形象大使

style="text-align:center;"data-mce-style="text-align:...

学物理能做什么?_学物理能做什么 卢昌海

作者:曹则贤中国科学院物理研究所原标题:《物理学:ASourceofPowerforMan》在2006年中央电视台《对话》栏目的某期节目中,主持人问过我一个的问题:“学物理的人,如果日后不...

你不知道的关于这只眯眼兔的6个小秘密
你不知道的关于这只眯眼兔的6个小秘密

在你们忙着给熊本君做表情包的时候,要知道,最先在网络上引起轰动的可是这只脸上只有两条缝的兔子——兔斯基。今年,它更是迎来了自己的10岁生日。①关于德艺双馨“老艺...

2025-02-21 16:00 yuyutoo

取消回复欢迎 发表评论: