[关闭]
@cyysu 2017-10-23T12:45:31.000000Z 字数 3618 阅读 870

cgi网页编写

  • 时间：2017年10月23日
  • 作者：Kali
  • 邮箱：cyysu.github.io@gmail.com/2869905223@qq.com/微信lwyx1413
  • 版本：4.0
  • 描述：ARM上的html代码实现。

嵌入式Linux

CGI简介

  1.     CGI主要的功能是在WWW环境下，藉由从客户端传递一些讯息给WWWServer，再由WWWServer去启动所指定的程式码来完成特定的工作。所以更明确的说，CGI仅是在WWWServer上可执行的程式码，而她的工作就是控制讯息要求而且产生并传回所需的文件。使用CGI，你的Server可以读取并显示在客户端无法读取的格式(像是SQLDataBase)。而且可以像闸道(Gateway)一样，在伺服端和客户端之间，产生客户端所需要的讯息。基本上，在此种主从式(Client/Server)的环境之下，其IPC(InterProcess Communication)的协定是利用讯息传递及记忆体分享(环境变数)的方式来完成。CGI有其特定的写法及规格，必须遵守其原则，方可达到主从端资讯交流的目的。

一个简单的例子

  1. #!/bin/bash
  3. PATH=/bin:/sbin:/usr/bin:/usr/sbin
  4. i="0"
  5. echo  -e "Content-type: text/html \n\n"
  6. echo "<html>"
  7. echo "<head>"
  8. echo "<title>系统状态</title>"
  9. echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />"
  10. echo "</head>"
  11. echo "<body>"
  12. echo "<center>"
  13. echo "<h3>系统状态(5秒刷新一次)</h3>"
  14. echo "</center>"
  15. echo "<hr>"
  17.     echo "<script>"
  18.     echo "setTimeout(\"javascript:location.href='./system.cgi'\", 5000);"
  19.     echo "</script>"
  21.     echo "<center>"
  22.     echo "<form>"
  23.     echo "<table width=\"75%\" style=\"table-layout:fixed;\">"
  24.         echo "<tr>"
  25.             echo "<td>服务名</td>"
  26.             echo "<td>内存使用率</td>"
  27.             echo "<td>当前状态</td>"
  28.         echo "</tr>"
  29.         wr top -n 1 > /tmp/top.txt
  30.         cat /tmp/top.txt | head -n 14 | tail -n 11 | while read line 
  31.         do
  32.             i=`expr $i + 1`
  33.             if [[ $i -eq 1 ]];then
  34.                 continue
  35.             fi
  36.             command=`echo ${line} | awk '{print $8}'`
  37.             memory=`echo ${line} | awk '{print $6}'`
  38.             cpu=`echo ${line} | awk '{print $7}'`
  39.             echo "<tr>"
  40.             echo "<td>"${command}"</td>"
  41.              echo "<td>"${memory}"</td>"
  42.             echo "<td>"${cpu}"</td>"
  43.             echo "</tr>"
  44.         done
  45.     echo "</table>"
  46.     echo "</form>"
  49.     echo "<br>"
  50.     echo "<hr>"
  52.     # 显示运行程序表格
  53.     echo "<h3>正在运行的应用程序</h3>"
  54.     echo "<form>"
  55.     echo "<table width=\"75%\" style=\"table-layout:fixed;\">" 
  56.         echo "<tr>"
  57.             echo "<td>应用程序名称</td>"
  58.             echo "<td>&nbsp;&nbsp</td>"
  59.             echo "<td>当前状态</td>"
  60.         echo "</tr>"
  64.         # 这里查OPENCUA进程是否在运行 
  65.         appName=`ps -a | grep -i OPEN | grep -v grep | cut -d " " -f7`
  66.         if [ "$appName" = "" ];then	
  67. 	   	 	status="挂起"
  68. 	   	 	appName="./OPUCA"
  69. 	   	 	echo "<tr>"
  70. 			echo "<td>"${appName}"</td>"
  71.             echo "<td></td>"
  72.             echo "<td><font color="red">"${status}"</font></td>"
  73. 			echo "</tr>" 
  74. 	   	else
  75. 	   		status="运行"
  76. 	   		echo "<tr>"
  77. 			echo "<td>"${appName}"</td>"
  78.             echo "<td></td>"
  79.             echo "<td><font color="green">"${status}"</font></td>"
  80.             echo "</tr>" 
  81.         fi
  83.         # 这里查NEWTON进程是否在运行 
  84.         appName=`ps -a | grep -i NEWTON | grep -v grep | cut -d " " -f7`
  85.         if [ "$appName" = "" ];then	
  86. 			appName="./NEWTON"
  87. 	   	 	status="挂起"
  88. 	   	 	echo "<tr>"
  89. 			echo "<td>"${appName}"</td>"
  90.             echo "<td></td>"
  91.             echo "<td><font color="red">"${status}"</font></td>"
  92. 			echo "</tr>" 
  93. 	   	else
  94. 	   		status="运行"
  95. 	   		echo "<tr>"
  96. 			echo "<td>"${appName}"</td>"
  97.             echo "<td></td>"
  98.             echo "<td><font color=\"green\">"${status}"</font></td>"
  99.             echo "</tr>" 
  100.         fi  
  103.         # 这里查MODBUS进程是否在运行 
  104.         appName=`ps -a | grep -i  MODBUS | grep -v grep | cut -d " " -f7`
  105.         if [ "$appName" = "" ];then	
  106. 	   	 	status="挂起"
  107. 	   	 	appName="./MODBUS"
  108. 	   	 	echo "<tr>"
  109. 			echo "<td>"${appName}"</td>"
  110.             echo "<td></td>"
  111.             echo "<td><font color="red">"${status}"</font></td>"
  112. 			echo "</tr>" 
  113. 	   	else
  114. 	   		status="运行"
  115. 	   		echo "<tr>"
  116. 			echo "<td>"${appName}"</td>"
  117.             echo "<td></td>"
  118.             echo "<td><font color="green">"${status}"</font></td>"
  119.             echo "</tr>" 
  120.         fi
  124.         # 这里查MQTT进程是否在运行 
  125.         appName=`ps -a | grep -i MQTT | grep -v grep | cut -d " " -f7`
  126.         if [ "$appName" = "" ];then	
  127. 	   	 	status="挂起"
  128. 	   	 	appName="./MQTT"
  129. 	   	 	echo "<tr>"
  130. 			echo "<td>"${appName}"</td>"
  131.             echo "<td></td>"
  132.             echo "<td><font color="red">"${status}"</font></td>"
  133. 			echo "</tr>" 
  134. 	   	else
  135. 	   		status="运行"
  136. 	   		echo "<tr>"
  137. 			echo "<td>"${appName}"</td>"
  138.             echo "<td></td>"
  139.             echo "<td><font color="green">"${status}"</font></td>"
  140.             echo "</tr>" 
  141.         fi
  144.     echo "</table>"
  145.     echo "</form>"  
  147. echo "</center>"
  148. echo "</body>"
  149. echo -e "</html>\n\n"

我这里举的例子是ARM板的web控制终端。我们这里采用的是shell方式去编写的程序，当然我们还可以采用其他脚本编写，比如C或者python，在比如perl等等。通过观察上面的例子我们可以发现这不就是在编写脚本嘛，对没错，其实这就是编写脚本，只不过在浏览器那边访问的时候这些代码被解析成了html代码，这样就可以看到我们网页了，如果这些程序在没有启动http服务器的那么浏览器访问的就是这些文件的内容。

由于PC上有很多http服务器了，这里我给出一个arm端的http服务器。

ARM端小型Http服务端

这里说明一下使用方法：
将这个程序放入你的网站根目录，程序会默认寻找你根目录下的index.html去解析，同时他还支持加入h5或者css3等网页解析。程序默认开启的端口是8080。下面给出一个效果图。

  1. [root@3352-T web]# ls
  2. banner.html  css/         img/         logo.html    test.html    webs*
  3. bottom.html  graphics/    index.html   main.html    tree.html
  4. cgi-bin/     httpd*       js/          menu.html    um/

web控制端

这里给一个演示动画。

web控制端演示动画

打赏

                    支付宝                                                         微信

微信与支付宝支付

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注