今天想在樹莓派上自己搭一個線上的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,"<").replace(/>/g,">").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), 估計是互動性沒法滿足, 希望後續能補上這個不足吧! - 不知道效能佔用怎麼樣, 如果多人同時呼叫的話, 有可能會有新問題, 以後再測試.