shell腳本做爲cgi程序--以web版man爲例

man.cgi源碼javascript

#! /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源碼css

<!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

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

 

效果圖java

 

proccgi.sh是在網上很容易找到,就不貼出源碼了。它的做用是取得post過來的數據。web

參考連接:shell

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

相關文章
相關標籤/搜索