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

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

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

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

主要环境

  • PHP
  • Nginx/Apache
  • Python3

主要步骤

1) /api/python.php

  1. 网站根目录下新建文件夹api, 注意这里需要sudo或者su权限(下同), 然后使用mkdir api来创建
  2. touch python.php # 在api中新建文件python.php,
  3. 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目录拥挤
  1. 保存退出

2) /editor/src

  1. 回到网站根目录, mkdir editor
  2. 去这里(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
  3. 新建index.php, touch index.php(这里跟原文有出入, 下载的包里没有index.html)
  4. 在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) 调试运行

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

待解决问题

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

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

  1. 树莓派4B踩坑指南 - （1）系统简介及特性

    系统简介及特性 19年双十一入坑树莓派4B,发现不是一般的坑,对于新出来的4B,从外包装壳,到接口,到内核,很多老的资料已经不再适用,又没有什么特别大的论坛可以讨论,只能自己一点点的摸索. 所以将遇到 ...

  2. 树莓派4B踩坑指南 - （13）用samba建立家庭局域网共享中心

    树莓派在家中至少三个作用:家庭资源共享中心.无线打印服务器.下载服务器. 家庭资源共享中心用samba实现家庭局域网共享,树莓派4B的话可以接2个3.0的移动硬盘. 实测速度不快,Win读2Mb/s写 ...

  3. 树莓派4B踩坑指南 - （11）免费搭建网站（宝塔，花生壳）

    目录 宝塔 安装宝塔面板 登录及初始化设置 安装网站 花生壳 安装花生壳 设置花生壳 测试 问题(未解决但不影响使用) 网站统计 树莓派这么低的功耗,不用来当服务器总感觉有点浪费...完成效果:htt ...

  4. 树莓派4B踩坑指南 - （10）安装坚果云（更新：暂不支持）

    191209更新: 根据坚果云用户支持(helpdesk@nutstore.net)的官方回复,客户端不支持arm,所以本篇后续内容可以不用看了.. 原文如下: "您好,客户端似乎不支持ar ...

  5. 树莓派4B踩坑指南 - （12）谷歌浏览器书签同步

    书签和插件不能同步真的是不方便..使用时删掉※符号 过程比较复杂,坑很多,但确认有效 免费访问说明: https://github.com/max2max/fre※es※s 软件安装 https:// ...

  6. 树莓派4B踩坑指南 - （9）安装Git和Docker

    安装Git sudo apt-get install wget git-core 安装Docker curl -sSL https://get.docker.com | sh # 树莓派专属脚本福利, ...

  7. 树莓派4B踩坑指南 - （7）root账户及权限设置

    树莓派启用root账户 树莓派默认用户是pi 密码为raspberry. root账户默认无密码,但是账户锁定. 开启root账户命令: sudo passwd root #执行后提示设置密码,输入2 ...

  8. 树莓派4B踩坑指南 - （6）安装常用软件及相关设置

    安装软件 安装LibreOffice中文包 sudo apt-get install libreoffice-l10n-zh-cn sudo reboot 安装codeblocks并汉化: sudo ...

  9. 树莓派4B踩坑指南 - （5）设置阿里云的源及解决apt提示依赖

    解决树莓派apt升级/安装提示依赖问题: 注意!!buster是根据系统版本(cat /etc/os-release)来写的,如果是jessie或者stretch要改为buster.参考解决树莓派ap ...

随机推荐

  1. Go语言 中文分词技术使用技巧（一）

    分词技术就是搜索引擎针对用户提交查询的关键词串进行的查询处理后根据用户的关键词串用各种匹配方法进行分词的一种技术. 中文分词(Chinese Word Segmentation)指的是将一个汉字序列( ...

  2. AJ学IOS（28）UI之Quartz2D简单介绍

    AJ分享,必须精品 iOS开发UI篇—Quartz2D简单介绍 什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : ...

  3. Gallery实现图片拖动切换

    Gallery中文意思为画廊,通过Gallery能够实现用手指在屏幕上滑动实现图片的拖动.效果如下: 上面,为了学习了解,只用了android默认的Icon图片. 主程序中创建了一个继承自BaseAd ...

  4. 使用SVGDeveloper画svg地图详细过程

    使用步骤 1.  安装svg 2.  具体操作 1.     打开svg,点击file ,new,默认svg,点击ok 显示界面如下: 然后点击image 把鼠标放到代码下面的的桌面上,鼠标箭头会变成 ...

  5. Python中有许多HTTP客户端，但使用最广泛且最容易的是requests

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:北京尚脑软件测试 PS:如有需要Python学习资料的小伙伴可以加点击 ...

  6. search（6）- elastic4s-CRUD

    如果我们把ES作为某种数据库来使用的话,必须熟练掌握ES的CRUD操作.在这之前先更正一下上篇中关于检查索引是否存在的方法:elastic4s的具体调用如下: //删除索引 val rspExists ...

  7. 详解 Map集合

    (请关注 本人"集合总集篇"博文--<详解 集合框架>) 首先,本人来讲解下 Map集合 的特点: Map集合 的特点: 特点: 通过 键 映射到 值的对象 一个 映射 ...

  8. Tensorflow 模型线上部署

    获取源码,请移步笔者的github: tensorflow-serving-tutorial 由于python的灵活性和完备的生态库,使得其成为实现.验证ML算法的不二之选.但是工业界要将模型部署到生 ...

  9. PHP文件包含漏洞(利用phpinfo)复现

    0x01 简介 PHP文件包含漏洞中,如果找不到可以包含的文件,我们可以通过包含临时文件的方法来getshell.因为临时文件名是随机的,如果目标网站上存在phpinfo,则可以通过phpinfo来获 ...

  10. 使用HashMap或Hashset优化使用循环判断字符串中是否含有重复元素

    原本遇到判断字符串中是否含有重复元素的问题总是使用for循环遍历进行判断,这一方法则需要O(n3)的时间复杂度,如果本身方法处于几个循环中,就会指数倍增加时间复杂度.类似于如下代码: String[] ...