shell脚本作为cgi程序--以web版man为例

man.cgi源码

#! /bin/sh
eval `sh proccgi.sh $*`
echo "Content-type: text/html"
echo
echo
echo "<html>"
echo "<head>"
echo "<meta charset="UTF-8">"
echo "<title>shell-cgi实现man命令</title>"
echo "<style>"
echo "pre {margin:0 auto; width:"50%"; height:"100%"; font-size:12pt;}"
echo "</style>"
echo "</head>"
echo "<body>"
if man $FORM_command>/dev/null
then
echo "<pre>"
man $FORM_command
echo "</pre>"
else
echo "<p>对不起，没有查询到相关信息"
fi
echo "</body>"
echo "</html>"

　　

 

html源码

<!DOCTYPE html> 
<head>  
    <meta charset="UTF-8">  
    <title>man for web</title>  
    <link rel="stylesheet" type="text/css" href="man.css"/>  
<script type="text/javascript">
window.onload=function()
{
var submit=document.getElementById("submit");
submit.onclick=function(){
if(document.myform.command.value==""){
        alert("你没有输入任何信息");
        return false;
        }
    }
}
</script>
</head>  
<body>  
    <div id="box">  
        <h1>man for web</h1>  
        <form method="post" action="/cgi-bin/man.cgi" name="myform">  
            <input type="text" placeholder="命令" name="command"></input>  
            <button class="but" type="submit" id="submit">确定</button>  
        </form>  
    </div>  
</body>  
</html>

　　

man.css源码

html{
    width: 100%;   
    height: 100%;   
    overflow: hidden;   
}   
body{   
    width: 100%;   
    height: 100%;   
    margin: 0;   
    background-color: #4A374A; 
}   
#box{   
    position: absolute;   
    top: 50%;   
    left:50%;   
    margin: -150px 0 0 -150px;   
    width: 300px;   
    height: 300px;   
}   
#box h1{   
    color: #fff;   
    letter-spacing: 1px;   
    text-align: center;   
}   
h1{   
    font-size: 2em;   
    margin: 0.67em 0;   
}   
input{   
    width: 278px;   
    height: 18px;   
    margin-bottom: 10px;   
    outline: none;   
    padding: 10px;   
    font-size: 13px;   
    color: #fff;   
    border-top: 1px solid #312E3D;   
    border-left: 1px solid #312E3D;   
    border-right: 1px solid #312E3D;   
    border-bottom: 1px solid #56536A;   
    border-radius: 4px;   
    background-color: #2D2D3F;   
}   
.but{   
    width: 300px;   
    min-height: 20px;   
    display: block;   
    background-color: #4a77d4;   
    border: 1px solid #3762bc;   
    color: #fff;   
    padding: 9px 14px;   
    font-size: 15px;   
    line-height: normal;   
    border-radius: 5px;   
    margin: 0;   
}
View Code

 

效果图

 

proccgi.sh是在网上很容易找到，就不贴出源码了。它的作用是取得post过来的数据。

参考链接：

http://www.jb51.net/web/458871.html

posted @ 2016-11-17 20:54  sherlock-merlin  阅读(343)  评论(0)  编辑  收藏  举报