整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，我是ZhengN。
上一篇實用 | 10分鐘教你搭建一個嵌入式web服務器我們已經基于我們的開發板搭好了一個基于boa的web服務器。這一篇接著分享如何使用網頁來點燈。
網頁點燈的整個流程大致為：
從上到下，前面兩部分我們就是我們上一篇做的實驗，已經打通了。而第三部分就是本篇筆記的重點，我們要點燈，自然需要寫一個程序來解析數據及進行點燈操作，即這里的CGI程序。
CGI即通用網關接口（Common Gateway Interface），是一個Web服務器主機提供信息服務的標準接口。通過CGI接口，Web服務器就能夠獲取客戶端提交的信息，轉交給服務器端的CGI程序進行處理，最后返回結果給客戶端。
根據CGI標準，編寫外部擴展應用程序，可以對客戶端瀏覽器輸入的數據進行處理，完成客戶端與服務器的交互操作。CGI規范定義了Web服務器如何向擴展應用程序發送消息，在收到擴展應用程序的信息后又如何進行處理等內容。
一般情況下，服務器和CGI程序之間是通過標準輸入輸出來進行數據傳遞的，CGI程序中的標準輸出stdout是經過重定義了的，它并沒有在服務器上產生任何的輸出內容，而是被重定向到客戶瀏覽器。即我們的CGI程序是在我們的板子服務器里運行，但實際調用printf輸出信息時并不會輸出到我們的板子終端，而是輸出到客戶端瀏覽器。
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
下載得到：
整個包的內容不多，就幾個文件。其中：
因為我們的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.htmlled 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，即可免費獲??！
戶通過瀏覽器和ESP32控制LED的開關的方法
要實現這個功能，您需要以下幾個步驟：
以下是一個簡單的程序代碼示例，它可以實現上述功能：
作者根據 Robert C. Martin 《代碼整潔之道》總結了適用于 JavaScript 的軟件工程原則《Clean Code JavaScript》。
本文是對其的翻譯。
不必嚴格遵守本文的所有原則，有時少遵守一些效果可能會更好，具體應根據實際情況決定。這是根據《代碼整潔之道》整理的代碼優化建議，但也僅僅只是一份建議。
軟件工程已經發展了 50 多年，至今仍在不斷前進。現在，把這些原則當作試金石，嘗試將他們作為團隊代碼質量考核的標準之一吧。
最后你需要知道的是，這些東西不會讓你立刻變成一個優秀的工程師，長期奉行他們也并不意味著你能夠高枕無憂不再犯錯。千里之行，始于足下。我們需要時常和同行們進行代碼評審，不斷優化自己的代碼。不要懼怕改善代碼質量所需付出的努力，加油。
反例:
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
