今天想在树莓派上自己搭一个在线的python IDE，于是找到了一篇教程--Fred913大神的从头开始制作OJ-在线IDE的搭建

自己尝试动手做了一下, 还是发现不少细节需要注意, 记录在此

如果不知道怎么用树莓派搭建网站的可以参考我之前的文章: 树莓派4B踩坑指南 - （11）免费搭建网站（宝塔，花生壳）

demo地址: http://bowen.51mypc.cn/editor/

主要环境

PHP
Nginx/Apache
Python3

主要步骤

1) /api/python.php

网站根目录下新建文件夹api, 注意这里需要sudo或者su权限(下同), 然后使用mkdir api来创建
touch python.php # 在api中新建文件python.php,
nano python.php # 在文件中粘贴以下内容

<?php

//Powered By ShengFAN

//使用世界上最好的语言PHP进行开发-_-

$randint = rand();//为用户的代码取一个随机数作为唯一码

$f = fopen("/tmp/usrcode".$randint.".py", "w");

fwrite($f,$_GET['code']);

fclose($f);

echo str_replace("\n","<br>",passthru("python3 /tmp/usrcode".$randint.".py 2>&1")); //把换行转为html格式

unlink("/tmp/usrcode".$randint.".py"); //删除用户代码，以免造成tmp目录拥挤

保存退出

2) /editor/src

回到网站根目录, mkdir editor
去这里(https://github.com/ajaxorg/ace-builds)点download zip, 然后把ace-builds-master.zip随便解压到哪个地方, 然后把ace-builds-master里边所有的东西复制到editor文件夹, 如cp -r /home/pi/Desktop/n/ace-builds-master/* /www/wwwroot/bowen.51mypc.cn/editor/, 命令中的 -r 和 /* 不要漏了. 复制完确认一下应该有这样的一个目录:/editor/src
新建index.php, touch index.php(这里跟原文有出入, 下载的包里没有index.html)
在index.php中放入如下代码(这里跟原文有出入, 原文写的是作者自己的网址, 这里删掉了php和html的选项并将python.php的地址改成了相对路径):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <title>FredTools IDE</title>

    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>

      function runcode(code,type)

      {

        if(type == "python")

        {

          console.log(code);

          var xmlhttp;

          if (window.XMLHttpRequest)

          {

            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

            xmlhttp=new XMLHttpRequest();

          }

          else

          {

            // IE6, IE5 浏览器执行代码

            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

          }

          xmlhttp.open("GET","../api/python.php?code=" + escape(code),false);

          xmlhttp.send();

          var data = xmlhttp.responseText;

          $("#output").html("<pre class=\"fillall\">" + data.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\n/g,"<br>") + "</pre>");

        }

      }

    </script>

    <style type="text/css" media="screen">

      #editor {

        margin: 0;

        position: absolute;

        top: 0;

        bottom: 0;

        left: 0;

        right: 0;

      }

      .container {

        margin: 0;

        //position: absolute;

        top: 0;

        bottom: 0;

      }

      #editordiv {

        margin: 0;

        position: absolute;

        top: 0;

        bottom: 0;

        left:0;

        right:58.33333333333334%;

      }

      #iframediv {

        margin: 0;

        position: absolute;

        top: 0;

        bottom: 50%;

        left: 41.66666666666667%;

        right:16.66666666666667%;

      }

      #stepdiv {

        margin: 0;

        position: absolute;

        top: 50%;

        bottom: 0;

        left: 41.66666666666667%;

        right:16.66666666666667%;

      }

      .col-md-2 {

        margin: 0;

        position: absolute;

        top: 0;

        bottom: 0;

        left: 83.33333333333334%;

        right:0;

      }

    </style>

  </head>

  <body>

    <div class="container">

      <div class="col-md-5 column" id="editordiv">

        <pre id="editor"></pre>

      </div>

      <div class="col-md-5 column" id="iframediv">

        <h3>运行结果：</h3>

        <div id="output"></div>

      </div>

      <div class="col-md-5 column" id="stepdiv">

        <h3 id="stepcount">自由模式</h3>

        <p id="steptext">在此模式下，你可以自由的使用FredTools IDE。</p>

        <p id="task">任务：无</p>

      </div>

      <div class="col-md-2 column">

        <!-- 更改语言-start -->

        <div class="form-group">

          <select name="language" id="language" class="form-control">

            <option value="python" selected>Python（.py）</option>

          </select>

          <button id="changelang" class="btn btn-default">

            更改语言

          </button>

        </div>

        <!-- 更改语言-end -->

        <br>

        <!-- 更改皮肤-end -->

        <div class="form-group">

          <select name="skin" id="skin" class="form-control">

            <?php require "../skin.html"; ?>

          </select>

          <button id="changeskin" class="btn btn-default">

            更改皮肤

          </button>

        </div>

        <!-- 更改语言-end -->

        <button class="btn btn-default" id="cheak">

          <span class="glyphicon glyphicon-play-circle"></span>运行代码

        </button>

        <br><br>

        <div class="form-group">

          <input type="text" id="filename" placeholder="请输入此文件文件名......" class="form-control">

          <button class="btn btn-default" id="savecode">

            <span class="glyphicon glyphicon-save"></span>保存代码（通过Cookie）

          </button>

          <button class="btn btn-default" id="readcode">

            <span class="glyphicon glyphicon-open"></span>读入代码（通过Cookie）

          </button>

        </div>

      </div>

    </div>

    <script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>

    <script>

      var editor = ace.edit("editor");

      editor.setOptions({enableLiveAutocompletion: true});

      editor.setTheme("ace/theme/Chrome");

      editor.session.setMode("ace/mode/python");

      $("#changelang").click(function(){

        editor.session.setMode("ace/mode/" + $("#language").val());

      });

      $("#changeskin").click(function(){

        editor.setTheme("ace/theme/" + $("#skin").val());

      });

      $("#cheak").click(function(){

        var result = runcode(editor.getValue(), $("#language").val());

      });

      $("#savecode").click(function(){

        $.cookie("File-" + $("#filename").val(), editor.getValue());

      });

      $("#readcode").click(function(){

        editor.setValue($.cookie("File-" + $("#filename").val()));

      });

    </script>

  </body>

</html>

3) 调试运行

满心欢喜的打开bowen.51mypc.cn/editor, 然后就悲剧了:
仔细读代码发现里边有一行<?php require "../skin.html"; ?> 哦, 原来没有这个文件所以卡这了, 那就回去新建一个吧
回到网站根目录, nano skin.html, 写入一行<option value='chrome'>Chrome</option>, 保存退出. (这里跟原文有出入, 因为实际上并没有皮肤可以换, 就把其他的删掉了...)
刷新页面, 诶, 果然可以了...吗?
百度了一下, 这个问题应该是php.ini中的passthru函数被禁用了, 本想去找这个ini文件, 后来想想这种东西估计宝塔面板里就有,就去找了一下, 还真找到了:
大功告成! print("hello world")

待解决问题

试了下, 这里用不了input()函数(EOFError: EOF when reading a line), 估计是交互性没法满足, 希望后续能补上这个不足吧!
不知道性能占用怎么样, 如果多人同时调用的话, 有可能会有新问题, 以后再测试.

树莓派4B踩坑指南 - （15）搭建在线python IDE的更多相关文章

树莓派4B踩坑指南 - （1）系统简介及特性
系统简介及特性 19年双十一入坑树莓派4B,发现不是一般的坑,对于新出来的4B,从外包装壳,到接口,到内核,很多老的资料已经不再适用,又没有什么特别大的论坛可以讨论,只能自己一点点的摸索. 所以将遇到 ...
树莓派4B踩坑指南 - （13）用samba建立家庭局域网共享中心
树莓派在家中至少三个作用:家庭资源共享中心.无线打印服务器.下载服务器. 家庭资源共享中心用samba实现家庭局域网共享,树莓派4B的话可以接2个3.0的移动硬盘. 实测速度不快,Win读2Mb/s写 ...
树莓派4B踩坑指南 - （11）免费搭建网站（宝塔，花生壳）
目录宝塔安装宝塔面板登录及初始化设置安装网站花生壳安装花生壳设置花生壳测试问题(未解决但不影响使用) 网站统计树莓派这么低的功耗,不用来当服务器总感觉有点浪费...完成效果:htt ...
树莓派4B踩坑指南 - （10）安装坚果云（更新：暂不支持）
191209更新: 根据坚果云用户支持(helpdesk@nutstore.net)的官方回复,客户端不支持arm,所以本篇后续内容可以不用看了.. 原文如下: "您好,客户端似乎不支持ar ...
树莓派4B踩坑指南 - （12）谷歌浏览器书签同步
书签和插件不能同步真的是不方便..使用时删掉※符号过程比较复杂,坑很多,但确认有效免费访问说明: https://github.com/max2max/fre※es※s 软件安装 https:// ...
树莓派4B踩坑指南 - （9）安装Git和Docker
安装Git sudo apt-get install wget git-core 安装Docker curl -sSL https://get.docker.com | sh # 树莓派专属脚本福利, ...
树莓派4B踩坑指南 - （7）root账户及权限设置
树莓派启用root账户树莓派默认用户是pi 密码为raspberry. root账户默认无密码,但是账户锁定. 开启root账户命令: sudo passwd root #执行后提示设置密码,输入2 ...
树莓派4B踩坑指南 - （6）安装常用软件及相关设置
安装软件安装LibreOffice中文包 sudo apt-get install libreoffice-l10n-zh-cn sudo reboot 安装codeblocks并汉化: sudo ...
树莓派4B踩坑指南 - （5）设置阿里云的源及解决apt提示依赖
解决树莓派apt升级/安装提示依赖问题: 注意!!buster是根据系统版本(cat /etc/os-release)来写的,如果是jessie或者stretch要改为buster.参考解决树莓派ap ...

随机推荐

Kubernetes 二进制部署
目录 1.基础环境 2.部署DNS 3.准备自签证书 4.部署Docker环境 5.私有仓库Harbor部署 6.部署Master节点 6.1.部署Etcd集群 6.2.部署kube-apiserve ...
Linux的文本编辑和文本内容查看命令
Linux的文本编辑和文本内容查看命令 1.文本编辑命令 vi:用于编辑文本文件,基本上可以分为三种模式,分别是一般模式.编辑模式.命令行模式. 一般模式:当编辑一个文件时,刚进入文件就是一般模 ...
MySQL中information_schema 数据库是干什么的
MySQL中information_schema是什么大家在安装或使用MYSQL时,会发现除了自己安装的数据库以外,还有一个information_schema数据库. information_sc ...
CSS也能计算：calc
举个例子ul li适配屏幕,如果加个border:1px,不用border-content得情况下,每个li多加了2px: <ul><li></li><li& ...
结束基础，开始MVC之旅!
今天终于把前端Extjs和基础折腾完,虽然每一个都只是实现一个小的实例,但是也算是把.NET基础和前端基础顺了一遍.也算是提升.不足就是高级的知识点并没有吃透,比如委托,lamda之类的,还得在后面的 ...
基于RabbitMQ的Rpc框架
参考文档:https://www.cnblogs.com/ericli-ericli/p/5917018.html 参考文档:RabbitMQ 实现RPC MQ的使用场景大概包括解耦,提高峰值处理能力 ...
R - C Looooops POJ - 2115 (exgcd)
题目大意:很好理解,一个for循环语句,从a开始到b结束,步长是c,模数是pow(2,k) 问,最少循环多少次,才能到达b,如果永远都到不了b,输出FOREVER 题解:其实就是求一个线性方程,cx= ...
Jquery中 $.Ajax() 参数详解
1.url:要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type:要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如pu ...
sort()实现排序的原理
很多人都只知道sort()是通过快速排序实现,但它并不只是简单的快排:首先它对普通的快速排序进行了优化:此外,它还结合了插入排序和堆排序.系统根据数据形式和数据量,来选择合适的排序方法,这并不是说每 ...
xpath爬虫实战-爬取小说斗罗大陆第四部
爬取思路用到的第三方库文件 lxml,requests,fake_agent 用fake_agent里的UserAgent修饰爬虫用requests进行基本的请求用lxml进行html的分析用 ...

树莓派4B踩坑指南 - （15）搭建在线python IDE

主要环境

主要步骤

1) /api/python.php

2) /editor/src

3) 调试运行

待解决问题

树莓派4B踩坑指南 - （15）搭建在线python IDE的更多相关文章

随机推荐

热门专题