正文

实用|10分钟教你通过网页点灯(代码片段)

嵌入式大杂烩  嵌入式大杂烩  2022-12-16  504

关键词：

关注「嵌入式大杂烩」，选择「星标公众号」一起进步！

大家好，我是ZhengN。

上一篇我们已经基于我们的开发板搭好了一个基于boa的web服务器：实用 | 10分钟教你搭建一个嵌入式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 <stdio.h>

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：

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
 <title>led control</title>
 </head>
 
 <body>
 <h1 align="center">基于ARM的web控制LED灯</h1>
  <!--新建一个表单，动作链接到开发板的/cgi-bin/led.cgi，采用的方法为GET--> 
  <form action="/cgi-bin/led.cgi" method="get">  
   <p align="center">Web端的led的控制测试</p>
   <p align="center">请输入需要控制的led <input type="text" name="led_num"/></p>
   <p align="center">请输入控制led的动作 <input type="text" name="led_state"/></p>
   <p align="center"><input type="submit" value="sure"/>        
         <input type="reset" value="back"/>
   </p>
  </form>
 </body>
</html>

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

http://192.168.1.8/led.html

实际效果如：

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

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

#include<stdio.h>
#include <stdlib.h>
#include <sys/types.h>
#include <sys/stat.h>
#include <fcntl.h>
#include <unistd.h>
#include <sys/ioctl.h>
#include <linux/limits.h>
#include <errno.h>

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("<html>\\n");
    printf("<head><title>cgi control led web</title></head>\\n");
    printf("<body>\\n");
    printf("<p>led is setted successful! you can watch the led's change</p>\\n");
    printf("<p><a herf=led.html><button>get back</button></a></p>\\n");
    printf("</body>\\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("<p>please input right"); 
        printf("</p>");
     
    printf("<p>led_num = %d,led_state =  %d</p>",  led_num,  led_state);
    if(led_num < 2 || led_num > 5) 
     
        printf("<p>Please input 2<=led_num<=5!"); 
        printf("</p>");
     
    if(led_state>1)
    
        printf("<p>Please input 0<=led_state<=1!"); 
        printf("</p>"); 
    

    printf("</html>\\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,"<title>LED Test</title>");   
 fprintf(cgiOut,"<p>recv from arm:</p>");
 fprintf(cgiOut,"led_num: %s", led_num);
 fprintf(cgiOut,"<br>");                    
 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服务器

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

嵌入式中输出调试有几种方法？

实用 | 手头上无LCD却又急着开发UI？LCD模拟器了解一下~

实用|10分钟教你搭建一个嵌入式web服务器(代码片段)

关注「嵌入式大杂烩」，选择「星标公众号」一起进步！大家好，我是ZhengN，本次来教大家在10分钟内使用开发板搭建一个web服务器。之前分享的文章：常见的嵌入式web服务器有哪些？中分享了几种可以在... 查看详情

paddle点灯人之10分钟快速上手paddle(代码片段)

Paddle点灯人之10分钟快速上手Paddle文章目录Paddle点灯人之10分钟快速上手Paddle一、快速安装飞桨二、导入飞桨三、实践：手写数字识别任务3.1数据集定义与加载3.2模型组网3.3模型训练与评估3.3.1模型训练3.3.2模型评估3.4模型推... 查看详情

10分钟教你理解反射(代码片段)

什么是反射？反射反射，程序员的快乐，在.Net领域程序设计中，反射是无处不在的，MVC、ASP.Net、各种ORM、IOC、AOP几乎所有的框架都离不开反射。反编译工具使用的底层技术用的不是反射，是一种逆向工程。反射（Reflection、System... 查看详情

python实用工具速来！！一篇文章十分钟教你如何使用python第三方库basemap进行地图绘制(代码片段)

basemap地图绘制basemap地图绘制1basemap的使用1.1basemap安装1.2basemap使用1.3缩放区域与绘图2basemap综合示例2.1美国人口分布2.2全球地震可视化3pyecharts地图绘制3.1地图3.2地图坐标系basemap地图绘制地图绘制也是数据可视化的一部分，常... 查看详情

10分钟教你快速上手vue3中新增的api(代码片段)

1.初始化项目// ① npm i -g @vue/cli// ② vue create my-project// ③ npm install @vue/composition-api -S// ④ main,jsimport Vue from 'vue'import VueCompositionApi from '@vue/composition- 查看详情

10分钟教你快速上手vue3中新增的api(代码片段)

10分钟教你搭建一个好玩的python全文搜索引擎(代码片段)

有一个群友在群里问个如何快速搭建一个搜索引擎，在搜索之后我看到了这个代码所在Git:https://github.com/asciimoo/searx官方很贴心，很方便的是已经提供了docker镜像，基本pull下来就可以很方便的使用了，执行命令cid&#... 查看详情

10分钟教你用python做个打飞机小游戏超详细教程(代码片段)

更多精彩尽在微信公众号【程序猿声】我知道你们一定想先看效果如何00目录整体框架开始之前-精灵类Sprite子弹类classBullet玩家飞机类classPlayer敌机类classEnemy游戏主体循环以及帧率设置让子弹飞刷出敌机打怪把飞机敌机子弹都画... 查看详情

手把手教你用matlab制作一款[狗头翻牌子]小游戏(点灯游戏)(代码片段)

0游戏效果就是点击一个牌子时，该牌子和周围四个牌子也会相应发生变化，想办法让所有牌子都在同一面即为游戏胜利。1fig界面和背景板这一段比较简单，主要是对界面和背景板的属性设置，我们采用编程的方... 查看详情

micropythonesp32/8266ap模式下网页点灯控制示例(代码片段)

【Micropythonesp32/8266】AP模式下网页点灯控制示例📍相关篇《【Micropythonesp32/8266】网页点灯控制示例》⛳####前面一篇是关于STA模式下网页控制，本次带来的是Micropython设备作为AP模式下，去访问设备，并控制点灯程... 查看详情

10分钟教你用python玩转微信之抓取好友个性签名制作词云(代码片段)

01前言+展示各位小伙伴我又来啦。今天带大家玩点好玩的东西，用Python抓取我们的微信好友个性签名，然后制作词云。怎样，有趣吧~好了，下面开始干活。我知道你们还是想先看看效果的。后台登录：词云：02环境准备Python版本... 查看详情

技能速成！教你10分钟内在电脑上配置运行hivemetastore和presto(代码片段)

目录第一步：下载和启动HiveMetaStore第二步：下载并启动Presto服务器第三步：启动PrestoCLI（Presto命令行工具）第四步：停止服务器总结：作者：范斌；Alluxio创始成员、开源社区副总裁To初学者ÿ... 查看详情

“猜你喜欢”的背后揭秘--10分钟教你用python打造推荐系统(代码片段)

欲直接下载代码文件，关注我们的公众号哦！查看历史消息即可！话说，最近的瓜实在有点多，从我科校友李雨桐怒锤某男、陈羽凡吸毒被捕、蒋劲夫家暴的三连瓜，到不知知网翟博士，再到邓紫棋解约蜂鸟、王思聪花千芳隔空... 查看详情

10分钟教你快速上手vue3中新增的api(代码片段)

10分钟手把手教你用android手撸一个简易的个人记账app(代码片段)

用Android手撸一个简易的个人记账系统⛱️序言📋一、系统结构设计Design1.需求分析2.数据库设计3.界面设计4.过程设计📘二、编码阶段Coding1.项目结构🗂️（1）文件目录（2）AndroidManifest.xml（3）... 查看详情

10分钟教你手写vue-router(代码片段)

Vue-Router原理Hash模式URL中#后面的内容作为路径地址监听hashchange事件根据当前路由地址找到对应组件重新渲染History模式通过history.pushState()方法改变地址栏监听popstate事件根据当前路由地址找到对应组件重新渲染手写Router下列方法... 查看详情