头像

LF112

从现在开始,我所期待的未来在哪里

《使用用网页操控树莓派》

 1年前  •   技术, 树莓派  •   , , , , , ,  •   1.14k  •   5

前言

很多时候,出门在外,懒得用SSH连接树莓派,干脆就写个WEB来控制树莓派吧!( • ̀ω•́ )✧


首先呢,你得给这个网页一个特殊的名字(要不然别人访问了就不关我事了),在 “服务器根目录” 下新建个文件夹,名字可以用复杂点的名字(MD5),当然,你也可以在打开网页的时候登录或者输入密码。

⌈搭建Nginx+PHP环境⌋

这在下一个的章节会讲哦-传送门

⌈编写WEB⌋

在使用网页控制树莓派之前,该有个好看的控制网页对吧!

效果图如上↑╰( ̄▽ ̄)╭

编写Html <head>部分
html<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LFPi | web控制</title>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .page-header { margin: 20px 0; border-bottom: 1px solid #eee; padding-bottom: 0; text-align: center; }
        .btn-item { text-align: center; }
        i { margin-right: 3px; display: inline-block; }
        h1 { text-align: center; }
        .tip { font-weight: bold; color: black; }
        .lead { font-size: small; }
    </style>
</head>

 

编写HTML <body>部分
html<body>
    <div class="container">
        <div class="page-header">
            <h3>
                LFPi | web控制</h3>
            <p class="lead">
                你是怎么知道这个网页的!老哥,别操作!
            </p>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                设备</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-3 btn-item">
                    </div>

                    <div class="col-xs-3 btn-item">
                        <button type="button" class="btn btn-primary btn-trigger">
                            <i class="fa fa-refresh"></i>重启</button>
                    </div>
					<div class="col-xs-3 btn-item">
						<form>
                          命令: <input type="text" name="fname" id="crd" />
						</form>
                        <button type="button" class="btn btn-primary btn-trigger">
                         <i class="fa fa-refresh"></i>提交</button>
                    </div>

                    <div class="col-xs-3 btn-item">
                    </div>
                    <script type="text/javascript">
                        var url = "ajax/pi.php";
                        $(function () {
                            $(".btn-trigger").click(function () {
                                var text = $(this).text().replace(/ /g, "").replace(/\n/g, "").replace(/\r/g, "").replace(/\t/g, "");
                                var cmd = "";
								var ts = document.getElementById("crd").value
                                switch (text) {
                                    case "关机":
                                        cmd = "sudo shutdown -h now";
                                        break;
                                    case "重启":
                                        cmd = "sudo reboot";
                                        break;
								    case "提交":
                                        cmd = ts;
                                        break;
                                }
                                if (confirm("确定要执行该命令吗?")) {
                                    $.ajax({
                                        type: "POST",
                                        url: url,
                                        data: {
                                            action: "set-linux-cmd",
                                            cmd: cmd
                                        },
                                        success: function (result) {
                                            $(".tip").html(result);
                                        }
                                    });
                                }
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                设备信息</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-12">
                        <span style="color: gray">待研究</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-primary" style="border-color:#555">
            <div class="panel-heading" style="background: #555">
                终端</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="alert alert-success" style="" role="alert">
                            执行:<span class="tip"> </span>
                        </div>
						<div class="alert alert-success" style="" role="alert">
                            输出:<span class="runin"> </span>
                        </div>
						<script>
							var urlr = "ajax/runsr.php";
                            var runin = "";
							function runsr(){
								$.ajax({
                                        type: "POST",
                                        url: urlr,
                                        data: {
                                            action: "get-runin-runig",
                                            runin: runin
                                        },
                                        success: function (result) {
                                            $(".runin").html(result);
                                        }
                                    });
							}
							var t1 = window.setInterval(runsr,1000);
							var t2 = window.setInterval("runsr()",3000);
							window.clearInterval(t1);
						</script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

这里有两段ajax异步

第一段异步的功能就是提交到 “pi.php” 里再让php写入文件 ╰( ̄▽ ̄)╭

javascript                  <script type="text/javascript">
                        var url = "ajax/pi.php";
                        $(function () {
                            $(".btn-trigger").click(function () {
                                var text = $(this).text().replace(/ /g, "").replace(/\n/g, "").replace(/\r/g, "").replace(/\t/g, "");
                                var cmd = "";
								var ts = document.getElementById("crd").value
                                switch (text) {
                                    case "关机":
                                        cmd = "sudo shutdown -h now";
                                        break;
                                    case "重启":
                                        cmd = "sudo reboot";
                                        break;
								    case "提交":
                                        cmd = ts;
                                        break;
                                }
                                if (confirm("确定要执行该命令吗?")) {
                                    $.ajax({
                                        type: "POST",
                                        url: url,
                                        data: {
                                            action: "set-linux-cmd",
                                            cmd: cmd
                                        },
                                        success: function (result) {
                                            $(".tip").html(result);
                                        }
                                    });
                                }
                            });
                        });
                    </script>

第二段异步的功能就是每隔循环提交到 “runsr.php” 里再让php读取文件 ╮( ̄▽ ̄)╭

javascriptvar urlr = "ajax/runsr.php";
                            var runin = "";
							function runsr(){
								$.ajax({
                                        type: "POST",
                                        url: urlr,
                                        data: {
                                            action: "get-runin-runig",
                                            runin: runin
                                        },
                                        success: function (result) {
                                            $(".runin").html(result);
                                        }
                                    });
							}
							var t1 = window.setInterval(runsr,1000);
							var t2 = window.setInterval("runsr()",3000);
							window.clearInterval(t1); 

结合起来的html代码如下:

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LFPi | web控制</title>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .page-header { margin: 20px 0; border-bottom: 1px solid #eee; padding-bottom: 0; text-align: center; }
        .btn-item { text-align: center; }
        i { margin-right: 3px; display: inline-block; }
        h1 { text-align: center; }
        .tip { font-weight: bold; color: black; }
        .lead { font-size: small; }
    </style>
</head>
<body>
    <div class="container">
        <div class="page-header">
            <h3>
                LFPi | web控制</h3>
            <p class="lead">
                你是怎么知道这个网页的!老哥,别操作!
            </p>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                设备</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-3 btn-item">
                    </div>

                    <div class="col-xs-3 btn-item">
                        <button type="button" class="btn btn-primary btn-trigger">
                            <i class="fa fa-refresh"></i>重启</button>
                    </div>
					<div class="col-xs-3 btn-item">
						<form>
                          命令: <input type="text" name="fname" id="crd" />
						</form>
                        <button type="button" class="btn btn-primary btn-trigger">
                         <i class="fa fa-refresh"></i>提交</button>
                    </div>

                    <div class="col-xs-3 btn-item">
                    </div>
                    <script type="text/javascript">
                        var url = "ajax/pi.php";
                        $(function () {
                            $(".btn-trigger").click(function () {
                                var text = $(this).text().replace(/ /g, "").replace(/\n/g, "").replace(/\r/g, "").replace(/\t/g, "");
                                var cmd = "";
								var ts = document.getElementById("crd").value
                                switch (text) {
                                    case "关机":
                                        cmd = "sudo shutdown -h now";
                                        break;
                                    case "重启":
                                        cmd = "sudo reboot";
                                        break;
								    case "提交":
                                        cmd = ts;
                                        break;
                                }
                                if (confirm("确定要执行该命令吗?")) {
                                    $.ajax({
                                        type: "POST",
                                        url: url,
                                        data: {
                                            action: "set-linux-cmd",
                                            cmd: cmd
                                        },
                                        success: function (result) {
                                            $(".tip").html(result);
                                        }
                                    });
                                }
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">
                设备信息</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-12">
                        <span style="color: gray">待研究</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-primary" style="border-color:#555">
            <div class="panel-heading" style="background: #555">
                终端</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="alert alert-success" style="" role="alert">
                            执行:<span class="tip"> </span>
                        </div>
						<div class="alert alert-success" style="" role="alert">
                            输出:<span class="runin"> </span>
                        </div>
						<script>
							var urlr = "ajax/runsr.php";
                            var runin = "";
							function runsr(){
								$.ajax({
                                        type: "POST",
                                        url: urlr,
                                        data: {
                                            action: "get-runin-runig",
                                            runin: runin
                                        },
                                        success: function (result) {
                                            $(".runin").html(result);
                                        }
                                    });
							}
							var t1 = window.setInterval(runsr,1000);
							var t2 = window.setInterval("runsr()",3000);
							window.clearInterval(t1);
						</script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

html over!(ノ゚▽゚)ノ

⌈编写PHP⌋

既然有了界面和ajax异步,那么就肯定有php啦⁄(⁄⁄•⁄ω⁄•⁄⁄)⁄

此处的php主要是用来获取html的post的,执行后就是让php写入 “linuxcmd.txt” 里的文本啦 (*ノω・*)テヘ

php<?php
$action=$_POST["action"];
$cmd=$_POST["cmd"];
if($action=="set-linux-cmd"){
	$myfile=fopen("linuxcmd.txt","w") or die("无权限访问!");
	fwrite($myfile,$cmd);
	$str=file_get_contents("linuxcmd.txt");
	echo($str);
}
?>

⌈编写Python⌋

php已经把命令写入到“linuxcmd.txt” 里了,那么就让Python来执行吧~(* ̄∇ ̄*) 

PS:把这个py文件放入到 “/home/pi” 下,食用更佳 (〃´-ω・) 

pythonimport os

while True:
    #read cmd
    file=open("/var/www/html/ajax/linuxcmd.txt","r")
    text=file.read()
    file.close()
    if(text!=""):
        #clear cmd
        file=open("/var/www/html/ajax/linuxcmd.txt","w")
        file.write("")
        file.close()
        #print(text)
        os.popen(text + '>' + '/var/www/html/ajax/cmdretyrn.txt')

PS:这里的/var/www/html/可改为你服务器的网页文件的存放目录(~ ̄▽ ̄)~ 

悄咪咪地告诉你,这段代码由博主与”Daniel Tong一起编写的哦(*/ω\*)

Daniel Tong“–>QQ:1335898353    别告诉他是我告诉你他QQ的哦~o(*////▽////*)q

完成了~╮( ̄▽ ̄)╭

⌈让Python脚本在开机的时候措不及防地运行⌋

(=´ω`=) 按照下面的指令在终端里输入哦~

在终端里输入:

cmdsudo nano /etc/rc.local

找到exit 0这行代码的前一行,写入:

cmdpython /home/pi/linuxcmd.py

完成!按Ctrl+O –> 回车 –> Ctrl+X –>回车 保存退出

⌈重启树莓派⌋

cmdsudo reboot

⌈赠送源码!⌋

点击下面就可以下载哦ヾ(◍°∇°◍)ノ゙

点我下载(๑>ڡ<)☆

上一篇:
下一篇:

 评论


 已有5条评论

  1. 过滤沙缸 潜水 Windows 7 | 谷歌浏览器 67.0.3396.79 6月前

    你bolg代码还有错误怎么没改呢?

  2. lss233 伏太 未知的操作系统 | 未知浏览器 1年前

    还不如直接丢个写好的webshell
    https://github.com/b374k/b374k

    • LF112 伏太 未知的操作系统 | 未知浏览器 1年前

      lss233老大,我不会写啊!

      • lss233 伏太 未知的操作系统 | 未知浏览器 1年前

        LF112“写好的”