從頭開始製做OJ-在線IDE的搭建

時間  2020-05-08
標籤 從頭開始 製做 在線 ide 搭建 简体版
原文   原文鏈接

你們好，我是Fred913。javascript

以前，我看過各類OJ（OpenJudge）php

可是，仍是沒有本身作的好。css

因此，我就來寫了這篇教程。html

環境

此次，我打算使用這些：
PHP 5.6java

Nginx/Apachepython

Pythonjquery

Python可使用命令git

For Ubuntu/Debian:
apt install python3 -y

For CentOS:
yum install python3 -y
安裝Python

那麼，環境安裝就結束了github

代碼部分

剛剛，咱們準備好了環境，如今就是代碼部分。ajax

由於OJ須要在線運行代碼的能力，因此咱們在站點根目錄下新建一個文件夾：api

在api文件夾裏新建一個文件：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目錄擁擠

這就是咱們Python代碼的處理器了。

接下來，咱們去使用ACE編輯器製做自由模式（不添加判題系統）

在網站根目錄建立editor目錄

去Github上獲取ACE編輯器的官方demo

這裏我已經準備好了命令

git clone git://github.com/ajaxorg/ace.git

你們直接執行便可。

應該有這些東西

咱們將index.html修改成index.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","http://ide.ft2.club/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>");
        }
        if(type=="html")
        {
          $("#output").html('<iframe style="width=100%;height=100%;" id="iframe" class="fillall" src="http://ide.ft2.club/api/mirror.php?code=' + escape(editor.getValue()) + '"></iframe>');
        }
        if(type == "php")
        {
          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","http://ide.ft2.club/api/php.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>

此次，我使用了Bootstrap3進行美化，效果應該是這樣的：

咱們還須要添加更多皮膚的支持。

 index.php代碼138行，使用了網站根目錄的skin.html

裏面存有ace編輯器的全部皮膚，我已經整理好了

你們依舊能夠直接拿去用

 1 <option value='chrome'>Chrome</option>
 2 <option value='clouds'>Clouds</option>
 3 <option value='crimson editor'>Crimson Editor</option>
 4 <option value='dawn'>Dawn</option>
 5 <option value='dreamweaver'>Dreamweaver</option>
 6 <option value='eclipse'>Eclipse</option>
 7 <option value='github'>GitHub</option>
 8 <option value='iplastic'>IPlastic</option>
 9 <option value='solarized light'>Solarized Light</option>
10 <option value='textmate'>TextMate</option>
11 <option value='tomorrow'>Tomorrow</option>
12 <option value='xcode'>XCode</option>
13 <option value='kuroir'>Kuroir</option>
14 <option value='katzenmilch'>KatzenMilch</option>
15 <option value='sqlserver'>SQL Server</option>
16 <option value='ambiance'>Ambiance</option>
17 <option value='chaos'>Chaos</option>
18 <option value='clouds_midnight'>Clouds Midnight</option>
19 <option value='cobalt'>Cobalt</option>
20 <option value='gruvbox'>Gruvbox</option>
21 <option value='gob'>Green on Black</option>
22 <option value='idle_fingers'>idle Fingers</option>
23 <option value='kr_theme'>krTheme</option>
24 <option value='merbivore'>Merbivore</option>
25 <option value='merbivore_soft'>Merbivore Soft</option>
26 <option value='mono_industrial'>Mono Industrial</option>
27 <option value='monokai'>Monokai</option>
28 <option value='pastel_on_dark'>Pastel on dark</option>
29 <option value='solarized_dark'>Solarized Dark</option>
30 <option value='terminal'>Terminal</option>
31 <option value='tomorrow_night'>Tomorrow Night</option>
32 <option value='tomorrow_night_blue'>Tomorrow Night Blue</option>
33 <option value='tomorrow_night_bright'>Tomorrow Night Bright</option>
34 <option value='tomorrow_night_eighties'>Tomorrow Night 80s</option>
35 <option value='twilight'>Twilight</option>
36 <option value='vibrant_ink'>Vibrant Ink</option>
skin.html

那麼，你們就能夠訪問你的網站根目錄下/editor了

是否是灰常簡單呢？

對了，若是還有問題，能夠在評論區回覆我哦

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程