CGI是如何工作的

CGI的一些背景 Web在设计之初只是可以提供静态内容,用于诸如文档分享,论文引用这样的内容。但是很快人们就不满足于静态的内容了,根据UNIX系统的哲学,人们倾向于让不同的应用程序通过已有的机制(进程间通信如管道,UNIX域socket,以及TCP/IPsocket)连接起来。 在Web服务器,诸如Apache httpd中加入与外部应用程序的通信接口就显得非常自然了。CGI(Common Gateway Interface)即是在这种背景下被发明的。 基本来说,CGI可以是任何的可执行程序,可以是Shell脚本,二进制应用,或者其他的脚本(Python脚本,Ruby脚本等)。CGI的基本流程是这样: Apache接收到客户端的请求 通过传统的fork-exec机制启动外部应用程序(cgi程序) 将客户端的请求数据通过环境变量和重定向发送给外部应用(cgi程序) 将cgi程序产生的输出写回给客户端(浏览器) 停止cgi程序(kill) 配置Apache支持CGI 本文的所有示例都是在Mac OSX环境下编写和实验。 先创建一个cgi的运行目录/Users/jtqiu/Sites/cgi-bin/,然后创建一个空的文件echo.cgi: $ mkdir -p /Users/jtqiu/Sites/cgi-bin/ $ touch echo.cgi 在这个文件中,添加一小段python代码: #!/usr/bin/env python print("Content-Type: text/html\n\n") print("<b>Hello, World</b>\n") 修改文件的执行权限: $ chmod +x echo.cgi 这段python代码并无特别,如果在shell运行这个脚本,可以得到: Content-Type: text/html <b>Hello, World</b> 这个可执行文件将作为我们的第一个CGI脚本,完成了这一步,我们需要配置Apache来支持CGI,首先,在目录/etc/apache2/users/中创建一个文件,文件名就是你的用户名称,如jtqiu.conf。 $ sudo vi /etc/apache2/users/jtqiu.conf 添加以下配置,其中/Users/jtqiu/Sites/cgi-bin/目录就是所有cgi脚本所在的目录,在次配置中AddHandler cgi-script .cgi表示为所有后缀为cgi的添加cgi-script的Handler。 <Directory "/Users/jtqiu/Sites/cgi-bin/"> AddHandler cgi-script .cgi Options +ExecCGI </Directory> 然后重启apache: $ sudo apachectl restart 下面我们就通过curl来进行测试: curl -v http://localhost/~jtqiu/cgi-bin/echo.cgi 更进一步 传统的CGI脚本的生命周期很短,Web服务器在接收到一次请求之后,会fork出一个进程来执行CGI脚本,一旦请求完成,这个进程就会被终止。 我们可以设置一个超时来查看:...

April 20, 2014 · 1 min · 邱俊涛 | Juntao Qiu

CSS中的Before和After伪元素

###before和after伪元素 所谓伪元素,可以理解为浏览器为某元素附加的元素(根据名字,附加在这个元素之前/之后)。用来完成特定的效果,before/after需要和content属性一起使用: .css-class:before { content: " "; } .css-class:after { content: " "; } 通过使用before/after伪元素,可以做一些很有意思的效果。这里有一些有意思的示例。 ###四个三角形 页面上经常会遇到小三角形这种视觉元素,比如表示一个可以打开/关闭的开关(将不会频繁使用的元素隐藏起来,点击可以展开/收起),或者一个模拟消息盒子(纯CSS实现),最早的做法是使用一个小的图片来完成,但是这个事实上可以通过纯CSS来实现。 原理是利用block元素的border属性,当border的值很小的时候,border之间的连接处并无异常,但是当border较大,而元素本身的尺寸小于border自身时,则每一个border都会呈现为梯形,而当元素的width和height都为0时,就会看到一个正方形,而每个边都变成了一个三角形: .container .color-box { content: " "; width: 0; height: 0; border: 10px solid transparent; border-left-color: #00ff00; border-right-color: #000000; border-top-color: #ff0000; border-bottom-color: #0000ff; } ###小三角形 这时候,如果将其他的三条边隐藏起来(通过将border的颜色置为透明): .container .color-box { content: " "; width: 0; height: 0; border: 10px solid transparent;//朝下的三角形 border-top-color: #ff0000; } 先将所有的边都设置为透明色,然后根据需要显示某一个边,来完成三角形的指向。 ###一个普通的消息框 一个普通的消息框,通过设置box-shadow和border-radius之后,可以变得比较“好看”,但是如果可以给这个消息框加上一个小的三角形(可以指向用户的头像等)。 HTML代码: <div class="container"> <div class="chat-box"> <p> Resque (pronounced like "rescue") is a Redis-backed library for creating background jobs, placing those jobs on multiple queues, and processing them later....

May 16, 2013 · 1 min · 邱俊涛 | Juntao Qiu