今天想在树莓派上自己搭一个在线的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 ...

随机推荐

Idea离线安装plugins插件如Lombok
由于公司不允许使用外网,之前用的idea 15 安装了一次.但是idea15的提示不够友好,今天升级idea2017.3.2,同样又需要安装,那就写个教程吧. 网上其他的安装教程不通用,也是针对不同i ...
std::chrono计算程序运行时间
void CalRunTime() { auto t1=std::chrono::steady_clock::now(); //run code auto t2=std::chrono::steady ...
修改vs默认浏览器
右键你的Html或者网页项目,选择"使用以下工具浏览" 跳出选择框,选择你想要的浏览器作为默认值即可,也可以添加你想要的浏览器.
python从零开始基础入门——开发环境搭建：Visual Studio Code
前言文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:山海皆可平z PS:如有需要Python学习资料的小伙伴可以加点击下方 ...
食物链 POJ - 1182 (并查集的两种写法)
这是一个非常经典的带权并查集,有两种写法. 1 边权并查集规定一下,当x和y这条边的权值为0时,表示x和y是同类,当为1时,表示x吃y,当为2时,表示x被y吃. 一共有三种状态,如图,当A吃B,B吃 ...
网站假死重启NGINX无效必须重启PHP 原因分析
一.错误提示说明: Nginx 502 Bad Gateway:请求的PHP-CGI已经执行,但是由于某种原因(一般是读取资源的问题)没有执行完毕而导致PHP-CGI进程终止. Nginx 504 G ...
[JS] 自己弄得个倒计时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Nginx（1）---安装及基础命令
一.简述 Nginx是一个高性能WEB服务器,除它之外Apache.Tomcat.Jetty.IIS,它们都是Web服务器 Nginx 相对基它WEB服务有什么优势:Tomcat.Jetty 面向j ...
[leetcode] 并查集（Ⅰ）
预备知识并查集 (Union Set) 一种常见的应用是计算一个图中连通分量的个数.比如: a e / \ | b c f | | d g 上图的连通分量的个数为 2 . 并查集的主要思想是在每个连 ...
20199308《Linux内核原理与分析》第十一周作业
缓冲区溢出漏洞实验实验步骤一.初始设置 1.Ubuntu 和其他一些 Linux 系统中,使用地址空间随机化来随机堆(heap)和栈(stack)的初始地址,这使得猜测准确的内存地址变得十分困难, ...

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

主要环境

主要步骤

1) /api/python.php

2) /editor/src

3) 调试运行

待解决问题

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

随机推荐

热门专题