實用 | 10分鐘教你通過網(wǎng)頁點燈
大家好，我是ZhengN。
上一篇我們已經(jīng)基于我們的開發(fā)板搭好了一個基于boa的web服務(wù)器：10分鐘教你搭建一個嵌入式web服務(wù)器。這一篇接著分享如何使用網(wǎng)頁來點燈。
網(wǎng)頁點燈的整個流程大致為：
從上到下，前面兩部分我們就是我們上一篇做的實驗，已經(jīng)打通了。而第三部分就是本篇筆記的重點，我們要點燈，自然需要寫一個程序來解析數(shù)據(jù)及進(jìn)行點燈操作，即這里的CGI程序。
什么是CGI?
CGI即通用網(wǎng)關(guān)接口(Common Gateway Interface)，是一個Web服務(wù)器主機(jī)提供信息服務(wù)的標(biāo)準(zhǔn)接口。通過CGI接口，Web服務(wù)器就能夠獲取客戶端提交的信息，轉(zhuǎn)交給服務(wù)器端的CGI程序進(jìn)行處理，最后返回結(jié)果給客戶端。
根據(jù)CGI標(biāo)準(zhǔn)，編寫外部擴(kuò)展應(yīng)用程序，可以對客戶端瀏覽器輸入的數(shù)據(jù)進(jìn)行處理，完成客戶端與服務(wù)器的交互操作。CGI規(guī)范定義了Web服務(wù)器如何向擴(kuò)展應(yīng)用程序發(fā)送消息，在收到擴(kuò)展應(yīng)用程序的信息后又如何進(jìn)行處理等內(nèi)容。
一般情況下，服務(wù)器和CGI程序之間是通過標(biāo)準(zhǔn)輸入輸出來進(jìn)行數(shù)據(jù)傳遞的，CGI程序中的標(biāo)準(zhǔn)輸出stdout是經(jīng)過重定義了的，它并沒有在服務(wù)器上產(chǎn)生任何的輸出內(nèi)容，而是被重定向到客戶瀏覽器。
即我們的CGI程序是在我們的板子服務(wù)器里運(yùn)行，但實際調(diào)用printf輸出信息時并不會輸出到我們的板子終端，而是輸出到客戶端瀏覽器。
CGI程序小例子
CGI程序可以使用多種語言來實現(xiàn)，這里我們選用我們比較熟悉的C語言來實現(xiàn)。先來看一個簡單的示例：
「test.c：」
- #include <stdio.h>
- int main()
- {
- printf("Content-type: text/html\n\n") ; // 這一句是必須的，設(shè)定輸出到HTML
- printf("Hello CGI\n") ;
- return 0;
- }
利用交叉編譯工具，編譯上述文件：
- arm-linux-gnueabihf-gcc test.c -o test.cgi
把test.cgi程序傳到開發(fā)板上的/www/cgi-bin目錄
- scp test.cgi root@192.168.1.8:/www/cgi-bin
修改權(quán)限;
- chmod 777 test.cgi
瀏覽器進(jìn)行訪問：
- http://192.168.1.8/www/cgi-bin/test.cgi
網(wǎng)頁點燈
我們已經(jīng)知道了CGI程序是什么了。下面我們來進(jìn)行網(wǎng)頁點燈。首先，需要說明的是，我們有兩種方式來編寫CGI程序。一種是借助環(huán)境變量來獲取相關(guān)信息;另一種是使用CGIC庫。
方法一：
對于CGI程序來說，它繼承了系統(tǒng)的環(huán)境變量。CGI環(huán)境變量在CGI程序啟動時初始化，在結(jié)束時銷毀。當(dāng)一個CGI程序不是被服務(wù)器調(diào)用時，它的環(huán)境變量幾乎是系統(tǒng)環(huán)境變量的復(fù)制。當(dāng)這個CGI程序被服務(wù)器調(diào)用時，它的環(huán)境變量就會多了以下關(guān)于服務(wù)器、客戶端、CGI傳輸過程等項目。如：
方法二：
用C語言寫CGI程序還可以有比較簡單的方式，那就是我們可以借助使用第三方庫CGIC(CGIC是一個功能比較強(qiáng)大的支持CGI開發(fā)的標(biāo)準(zhǔn)C庫，并支持Linux, Unix 和Windows等多操作系統(tǒng))來編寫，省去了必須自己去遵循CGI規(guī)范來編碼的痛苦。
CGIC庫下載地址：
https://github.com/boutell/cgic
這里只是簡單地介紹了兩種方法。還不理解沒關(guān)系，下面我們通過具體的實例來認(rèn)識這兩種方法。
首先，我們需要點燈，自然需要先設(shè)計一個簡單的led.html網(wǎng)頁。我們要通過網(wǎng)頁控制開發(fā)板上的led，需要兩條信息：led的序號及l(fā)ed的狀態(tài)。在網(wǎng)上找到了現(xiàn)成的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>
- <!--新建一個表單，動作鏈接到開發(fā)板的/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放到我們開發(fā)板上的/www/中，通過瀏覽器訪問：
- http://192.168.1.8/led.html
實際效果如：
下面我們編寫我們的CGI程序。
「方法一：借助環(huán)境變量來獲取相關(guān)信息?！?/strong>
- #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()讀取環(huán)境變量的當(dāng)前值的函數(shù)
- if(sscanf(data, "led_num=%d&led_state=%d", &led_num, &led_state) != 2)
- { //利用sscnaf（）函數(shù)的特點將環(huán)境變量分別提取出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函數(shù)就是獲取環(huán)境變量當(dāng)前值的函數(shù)，其中，各環(huán)境變量的意義可以參考上面的表。這里的QUERY_STRING環(huán)境變量就是采用GET時所傳輸?shù)男畔?。在這個例子中就是：
- led_num=3&led_state=1
上面的CGI程序把收到網(wǎng)頁發(fā)送過來的led_num及l(fā)ed_state的至再使用printf返回至網(wǎng)頁中顯示。從網(wǎng)頁中也可以看到相關(guān)信息，整個流程也就打通了。
「方法二：使用CGIC庫。」
第二種方法我們使用CGIC庫來編寫我們的CGI程序。首先我們需要下載CGIC庫，下載地址如：
https://github.com/boutell/cgic
下載得到：
整個包的內(nèi)容不多，就幾個文件。其中：
- cgic.c 函數(shù)庫。
- capture.c 一個很簡單的CGI例子。僅僅輸出兩行提示文字。
- cgictest.c 一個演示讀取form表單數(shù)據(jù)的CGI例子。
因為我們的CGI程序要運(yùn)行在我們的arm板中，當(dāng)然要交叉編譯，首先需要修改Makefile文件，需要修改如下幾處內(nèi)容：
「第①個修改點：」
- 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，大家需根據(jù)自己的實際環(huán)境進(jìn)行修改。
make編譯得到cgictest.cgi及capture程序，大家可以自行傳到板子上進(jìn)行測試。下面我們在這個文件夾下新曾一個led.c文件，用于編寫我們的leg cgi程序：
- #include "cgic.h"
- // cgic程序以cgiMain作為入口點, cgic的函數(shù)庫會自動把cgiMain連接到相應(yīng)的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"); // 設(shè)定輸出的內(nèi)容格式 這里我們要輸出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及l(fā)ed_state。有了這兩個信息，我們就可以愉快地點燈了，這里沒有加上點燈相關(guān)地操作，大家可以自己加上。
以上就是本次關(guān)于網(wǎng)頁點燈的實戰(zhàn)筆記，如有錯誤，歡迎指出，謝謝!
本文轉(zhuǎn)載自微信公眾號「嵌入式大雜燴」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系嵌入式大雜燴公眾號。
