JS+PHP仿CMD命令行控制台

最新推荐文章于 2024-04-18 15:13:13 发布

慕容望月

最新推荐文章于 2024-04-18 15:13:13 发布

阅读量2.4k

点赞数 2

分类专栏：问题解决文章标签： php JS cmd 控制台免交互

本文链接：https://blog.csdn.net/bhzsisui/article/details/56668006

版权

问题解决专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简介

用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/>
                &emsp;&emsp;1.输入“命令 参数1 参数2 ……”回车<br/>
                &emsp;&emsp;2.鼠标选中文本即可复制<br/>
                &emsp;&emsp;3.输入空命令或“命令 ?”获取帮助<br/>
                &emsp;&emsp;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'];
?>

慕容望月

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS+PHP仿CMD命令行控制台

简介用HTML页面模仿CMD的界面，通过输入命令来控制php后台，略去编写繁杂的交互界面。
复制链接

扫一扫

专栏目录

JS+PHP仿CMD命令行控制台

简介

演示

代码

“相关推荐”对你有帮助么？