从头开始制作OJ-在线IDE的搭建
大家好，我是Fred913。
之前，我看过各种OJ（OpenJudge）
但是，还是没有自己做的好。
所以，我就来写了这篇教程。
环境
这次，我打算使用这些：
PHP 5.6
Nginx/Apache
Python
Python可以使用命令
For Ubuntu/Debian:
apt install python3 -y For CentOS:
yum install python3 -y
安装Python
那么，环境安装就结束了
代码部分
刚刚，我们准备好了环境，现在就是代码部分。
因为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,"<").replace(/>/g,">").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,"<").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>
这次，我使用了Bootstrap3进行美化，效果应该是这样的：
我们还需要添加更多皮肤的支持。
index.php代码138行，使用了网站根目录的skin.html
里面存有ace编辑器的所有皮肤，我已经整理好了
大家依旧可以直接拿去用
<option value='chrome'>Chrome</option>
<option value='clouds'>Clouds</option>
<option value='crimson editor'>Crimson Editor</option>
<option value='dawn'>Dawn</option>
<option value='dreamweaver'>Dreamweaver</option>
<option value='eclipse'>Eclipse</option>
<option value='github'>GitHub</option>
<option value='iplastic'>IPlastic</option>
<option value='solarized light'>Solarized Light</option>
<option value='textmate'>TextMate</option>
<option value='tomorrow'>Tomorrow</option>
<option value='xcode'>XCode</option>
<option value='kuroir'>Kuroir</option>
<option value='katzenmilch'>KatzenMilch</option>
<option value='sqlserver'>SQL Server</option>
<option value='ambiance'>Ambiance</option>
<option value='chaos'>Chaos</option>
<option value='clouds_midnight'>Clouds Midnight</option>
<option value='cobalt'>Cobalt</option>
<option value='gruvbox'>Gruvbox</option>
<option value='gob'>Green on Black</option>
<option value='idle_fingers'>idle Fingers</option>
<option value='kr_theme'>krTheme</option>
<option value='merbivore'>Merbivore</option>
<option value='merbivore_soft'>Merbivore Soft</option>
<option value='mono_industrial'>Mono Industrial</option>
<option value='monokai'>Monokai</option>
<option value='pastel_on_dark'>Pastel on dark</option>
<option value='solarized_dark'>Solarized Dark</option>
<option value='terminal'>Terminal</option>
<option value='tomorrow_night'>Tomorrow Night</option>
<option value='tomorrow_night_blue'>Tomorrow Night Blue</option>
<option value='tomorrow_night_bright'>Tomorrow Night Bright</option>
<option value='tomorrow_night_eighties'>Tomorrow Night 80s</option>
<option value='twilight'>Twilight</option>
<option value='vibrant_ink'>Vibrant Ink</option>
skin.html
那么，大家就可以访问你的网站根目录下/editor了
是不是灰常简单呢？
对了，如果还有问题，可以在评论区回复我哦
从头开始制作OJ-在线IDE的搭建的更多相关文章
- 手把手搭建一个属于自己的在线 IDE
背景 这几个月在公司内做一个跨前端项目之间共享组件/区块的工程,主要思路就是在 Bit 的基础上进行开发.Bit 主要目的是实现不同项目 共享 与 同步 组件/区块,大致思路如下: 在 A 项目中通过 ...
- runnable:在线IDE+代码片段分享
在我之前的博客20个最好的在线IDE中列举过很多在线IDE,可以很方便的在云端执行代码,这样在你手头没有编译器时想试个小程序会非常有用. 今天介绍的这个网站runnable把在线IDE和代码片段结合了 ...
- 方案：在Eclipse IDE 中搭建Python开发环境
Eclipse是一款功能强大的IDE,Python是一种功能强大的计算机语言,但是Python的IDE环境确实很缺乏,如果在强大的Eclipse中添加Python开发环境,那样就很完美了. 在这里,我 ...
- Python基础入门一文通 | Python2 与Python3及VSCode下载和安装、PyCharm激活与安装、Python在线IDE、Python视频教程
目录 1. 关键词 2. 推荐阅读 2.1. 视频教程 3. 本文按 4. 安装 4.1. 视频教程 4.2. 资源下载 4.3. 安装教程 1. 关键词 Python2 与Python3及VSCod ...
- Python在线IDE | 谷歌Colaboratory云端IDE介绍
目录 1. 推荐阅读 2. 本文地址 3. 按 4. 使用篇 6. 教学篇 1. 推荐阅读 Python基础入门一文通 | Python2 与Python3及VSCode下载和安装.PyCharm破解 ...
- 程序员最喜欢用的在线IDE代码编译器，什么？你竟然不知道！
1.网址https://tech.io/snippet 支持 20+ 种编程语言,页面上没有杂七杂八的东西,非常简约,非常干净,另外,它上面的代码段还可以嵌入到网页之中. 2.网址 https://w ...
- Selenium----Selenium简单介绍以及Selenium IDE环境搭建，脚本录制
1.selenium简单介绍 心得:作为一个新手开始了解这个工具,打算从录制脚本开始学习,“录制,看,学习,写”,总结网友说得打算先使用Selenium IDE录制学习,再使用Selenium RC开 ...
- Common Lisp 编译器IDE环境搭建
搭建Common Lisp编程环境的方法有很多种,这里我使用的是最常见的一种:SBCL + Emacs + SLIME. SBCL是Steel Bank Common Lisp的简称,它是Common ...
- 在线教育平台搭建 预览和models
一.前言 1.1.项目介绍 在线演示地址:mxonline.mtianyan.cn 开发环境: python:3.6.4 Django:2.0.2 后台管理:xadmin 系统概括: 系统具有完整的用 ...
随机推荐
- Kafka Eagle V1.3.4更新预览
1.概述 Kafka Eagle是一款开源的Kafka集群监控系统,源代码托管在Github.目前Kafka Eagle已更新到V1.3.4版本,域名已经统一更新为http://www.kafka-e ...
- struts2入门Demo
一.引入必要的jar包,所需jar包如下: 二.配置web.xml.主要目的是拦截请求 <?xml version="1.0" encoding="UTF-8&qu ...
- JavaScript-浏览器的三种弹窗方式
//BOM 弹窗 //同步 阻断 alert("alert弹窗"); //返回布尔值 (是/否) var bcf = confirm("confirm弹窗"); ...
- 浅入深出Vue：注册
基本布局已经有了, 现在我们来开始做我们的注册页面~ 当然需要注册才能发表文章啊(糟老头子坏得很, 我可以只有我一个人能发啊). 这里我们设定只有注册才能发表文章,也就淡化了管理员这个概念.在开发中先 ...
- fastjson1.2.48以下版本存在重大漏洞
1. 场景描述 今天接公司通知:阿里的Fastjson,今天爆出了一个反序列化远程代码漏洞,比较严重的一个漏洞. 影响范围: 1.2.48以下的版本(不包括1.2.48). 2. 解决方案 查看项目f ...
- 个人永久性免费-Excel催化剂功能第86波-人工智能之图像OCR文本识别全覆盖
在上一年中,Excel催化剂已经送上一波人工智能系列功能,鉴于部分高端用户的需求,再次给予实现了复杂的图像OCR识别,包含几乎所有日常场景,让公司个人手头的图像非结构化数据瞬间变为可进行结构化处理分析 ...
- 【区分】Typescript 中 interface 和 type
在接触 ts 相关代码的过程中,总能看到 interface 和 type 的身影.只记得,曾经遇到 type 时不懂查阅过,记得他们很像,相同的功能用哪一个都可以实现.但最近总看到他们,就想深入的了 ...
- linux初学者-磁盘配额篇
linux初学者-磁盘配额篇 在使用磁盘时,只要有权限,不管什么用户都可以在其中写入数据,但是如果是多人在一个磁盘中写入数据,就会出现争议,如果一个用户将磁盘空间用完,那么其他人无法再使用.如下图所示 ...
- Spring Boot如何设计防篡改、防重放攻击接口
Spring Boot 防篡改.防重放攻击 本示例要内容 请求参数防止篡改攻击 基于timestamp方案,防止重放攻击 使用swagger接口文档自动生成 API接口设计 API接口由于需要供第三方 ...
- google、谷歌浏览截图
对于前端好用的浏览器---谷歌浏览器(没有插件)截取全屏很难受! 特备是前端,想截图下来,好好的量一下容器之前的尺寸(手动恼火) 对于程序员来说不一定需要插件,有很多大佬应该都知道, 小白记忆不好,每 ...