简介
用HTML页面模仿CMD的界面,通过输入命令来控制php后台,略去编写繁杂的交互界面。
这个命令控制台工具不是给用户使用的,而是用于开发调试,尤其是对于那些不必做交互界面的操作。
演示
代码
//CMD.php 前端 引用了JQuery
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="max-age=30" http-equiv="Cache-Control" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<title>命令行控制台</title>
<style>
table {
border-collapse: separate;
border-spacing: 0;
border-left: 1px solid #e9e9e9;
border-top: 1px solid #e9e9e9;
}
th {
border-bottom: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
}
td {
text-align: center;
border-right: 1px solid #e9e9e9;
border-bottom: 1px solid #e9e9e9;
}
#main{
width:98%;
height:98%;
overflow:auto;
margin:0px;
padding:10px;
background-color:black;
color:white;
}
.resp{
margin:5px 0px;
}
.resa{
margin:5px 0px;
display:inline-block;
}
.cmdp{
color:white;
margin:5px 0px;
width:80%;
background-color:black;
border:0px;
display:inline-block;
outline:none;
}
</style>
</head>
<body id="main" onclick="activeCMD(event)">
<div id="result">
<p class="resp">
【XXX系统】命令行控制台 --当前用户:$username
</p>
<p class="resp">
用法提示:<br/>
  1.输入“命令 参数1 参数2 ……”回车<br/>
  2.鼠标选中文本即可复制<br/>
  3.输入空命令或“命令 ?”获取帮助<br/>
  4.按向上、向下键切换用过的命令,"cls"清屏
</p>
</div>
<div>
<a id="host" class="resa" >
$host:>
</a>
<input id="command" type="text" class="cmdp" value=""/>
<input id="copyIn" type="hidden" />
</div>
<script>
var lastCMD=[];
var last=1;
function activeCMD(e)
{
if(e.target.id=="main")
{
setFocus("command");
}
}
document.onmouseup = document.ondbclick= function(){
var txt;
if(document.selection){
txt = document.selection.createRange().text
}else{
txt = window.getSelection()+'';
}
if(txt){
copyIn.value=txt;
copyIn.select();
document.execCommand('Copy');
}
}
$('#command').bind('keydown',function(event){
if(event.keyCode == "13")
{
var p=$('<p class="resp">');
var value=$('#command').val();
p.text('$host:>'+value);
$("#result").append(p);
$('#command').val("");
if(value.toLowerCase()=="cls")
{
$("#result").empty();
return false;
}
if(lastCMD.length==0 || lastCMD[0]!=value)
{
lastCMD.unshift(value);
last=0;
}
var cmd=value.split(" ");
var resp=sendCMD(cmd);
p=$('<p class="resp">');
p.html(resp);
$("#result").append(p);
}else if(event.keyCode == "38"){
if(last<=lastCMD.length-1)
{
$('#command').val(lastCMD[last]);
last++;
}
setTimeout('setFocus("command");',300);
}else if(event.keyCode == "40"){
if(last>0)
{
last--;
$('#command').val(lastCMD[last]);
}
}
});
var setFocus=function(id){
var t=$("#"+id).val();
$("#"+id).val("").focus().val(t);
}
function sendCMD(cmd)
{
var htmlobj=$.ajax({url:"CMDAjax.php",type:"POST",async:false,data:{"type":cmd[0].toLowerCase(),"data":JSON.stringify(cmd)}});
var data=GetJSON(htmlobj.responseText);
if(data.stateOK=='OK')
{
data=data.data;
if(data.url!=undefined)
{
var htmlobj=$.ajax({url:data.url,type:data.method,async:false,data:data.data});
return htmlobj.responseText;
}
if(data.type!=undefined)
{
if(data.type=="table")
{
return makeTable(data.dataHead,data.dataRow);
}
}
return data;
}else{
return "无正确响应";
}
}
function makeTable(dataHead,dataRow)
{
if(typeof(dataHead)!="object" || typeof(dataRow)!="object")
return false;
var table=$('<table>');
var tr=$('<tr>');
for(var i=0;i<dataHead.length;i++)
{
var th=$('<th>');
th.html(dataHead[i]);
tr.append(th);
}
table.append(tr);
for(var i=0;i<dataRow.length;i++)
{
tr=$('<tr>');
for(var j=0;j<dataRow[i].length;j++)
{
var td=$("<td>");
td.html(dataRow[i][j]);
tr.append(td);
}
table.append(tr);
}
return table;
}
function GetJSON(string)
{
if(string.indexOf("stateOK")>=0)
{
var res=eval("("+string+")");
return res;
}else{
return {stateOK:"NO",data:string,msg:"通讯不正常"};
}
}
</script>
</body>
</html>
//CMDAjax.php 后台
<?php
header('Content-Type: text/html; charset=UTF-8');
$myFun=array(
'test'=>array(
'Tips'=>'test',
'CSN'=>1,
'Todo'=>'测试',
'Function'=>'test',
),
'tabletest'=>array(
'Tips'=>'tabletest',
'CSN'=>1,
'Todo'=>'表格测试',
'Function'=>'tabletest',
),
'urltest'=>array(
'Tips'=>'urltest 任意字符串',
'CSN'=>2,
'Todo'=>'链接测试',
'Function'=>'urltest',
),
);
if($myFun[$_POST['type']]!=null)
{
$data=json_decode($_POST['data'],true);
if($data[1]=='?' || count($data)<$myFun[$_POST['type']]['CSN'])
{
$res=$myFun[$_POST['type']]['Todo'].':'.$myFun[$_POST['type']]['Tips'];
echo ReturnJSON($res,'ERROR');
die(0);
}
eval('echo '.$myFun[$_POST['type']]['Function'].'($data);');
}else{
$res=array();
foreach($myFun as $key=>$values)
{
$res[]=$values['Todo'].':'.$values['Tips'];
}
$res='无法识别的命令!提示:<br/>'.implode('<br/>',$res);
echo ReturnJSON($res,'OK');
}
//函数定义
function test()
{
$res='Hello World!';
return ReturnJSON($res,'OK');
}
function urltest($data)
{
$url="CMDURL.php";
$data=array("msg"=>$data[1]);
$res=array('url'=>$url,'method'=>'POST','data'=>$data);
return ReturnJSON($res,'OK');
}
function tabletest()
{
$res=array();
$res['type']='table';
$res['dataHead']=array('序号','名称','重量');
$res['dataRow']=array(
array(1,'A','1.2'),
array(2,'B','2.2'),
);
return ReturnJSON($res,'OK');
}
function ReturnJSON($data,$msg='OK')
{
$resp=array('stateOK'=>'OK','data'=>$data,'msg'=>$msg);
return json_encode($resp);
}
?>
//CMDURL.php 测试
<?php
header('Content-Type: text/html; charset=UTF-8');
echo 'you say '.$_POST['msg'];
?>