文章目录

1. API 问题
- 1.1 更改 Task 类
- 1.2 如何查找这个临时文件在哪
2. 前端界面
- 2.1 前端主页界面
- 2.2 前端交互, 交互1
- 2.3 前端题目详情界面
- 2.4 前端交互, 交互2
- 2.5 前端交互, 交互3
- 2.6 代码输入框优化
- - 首先引入 ace.js
  - 然后初始化我们的编译器
  - 编辑框要套一层 div
  - 更改交互中的代码
3. 测试代码
- 3.1 查看主页界面
- 3.2 查看题目详情界面
- 3.3 测试提交按钮
4. 项目安全性问题
- 4.1 checkCodeSafe 方法
- 4.2 加入到 Task 类中

1. API 问题

之前的临时文件都是存储在tmp目录下的.当多个请求并发进行的时候, 可能就分不清哪个请求对应哪个文件了.
解决办法: 使用 Java 中的 UUID 这个类就能生成一个 UUID了

1.1 更改 Task 类

采用构造方法的方式, 每次调用 Task 类的时候就生成一个 UUID ,这个UUID就是存放这些文件的上级目录.

public class Task {// 约定临时文件所在的目录private String WORK_DIR = null;// 约定代码的类名private String CLASS = null;// 约定要编译的代码文件名private String CODE = null;// 约定存放编译错误信息的文件名private String COMPILE_ERROR = null;// 约定存放运行时的标准输出的文件名private String STDOUT = null;// 约定存放运行时的标准错误的文件名private String STDERR = null;public Task() {WORK_DIR = "./tmp/" + UUID.randomUUID().toString() + "/";CLASS = "Solution";CODE = WORK_DIR + "Solution.java";COMPILE_ERROR = WORK_DIR + "compileError.txt";STDOUT = WORK_DIR + "stdout.txt";STDERR = WORK_DIR + "stderr.txt";}// ....以下内容不变
}

1.2 如何查找这个临时文件在哪

使用 System.getProperty("user.dir") 这个方法可以获取当前的工作目录
将这段代码加入到 ResultServlet 中
启动服务器, 并使用postman发送一个请求

进入这个目录

2. 前端界面

这里我的前端模板是从网上下载过来的. 然后保留需要的地方, 不需要的就删除了.

2.1 前端主页界面

查看主要代码

这里主要的思路就是访问主页的时候, 进行交互1, 读取题目列表页, 然后构建表格.

2.2 前端交互, 交互1

之前约定的是 GET 请求, 交互的mehod为problem.

    <script>function getProblem(){$.ajax({url: "problem",method: "GET",success: function(data,status){makeProblem(data);}})}function makeProblem(problems){let tbody = document.querySelector('.tb-body');for(let problem of problems){// 创建 trlet tr = document.createElement('tr');// 创建 Id列的tdlet tdId = document.createElement('td');// 插入响应中的idtdId.innerHTML = problem.id;tr.appendChild(tdId);// 创建 level列的tdlet tdLevel = document.createElement('td');// 创建 响应中的难度tdLevel.innerHTML = problem.level;tr.appendChild(tdLevel);// 创建 title列的tdlet td = document.createElement('td');// 创建 超链接let tdTitle = document.createElement('a');// 内容为 响应的标题tdTitle.innerHTML = problem.title;// 这里设置这个题号链接(带上id)tdTitle.href = "details.html?id=" + problem.id;// _block是跳转新页面tdTitle.target = "_block";td.appendChild(tdTitle);tr.appendChild(td);tbody.appendChild(tr);}}getProblem();</script>

2.3 前端题目详情界面

这个界面主要就是加载对应id的题目的内容. 并有一输入框, 提交按钮, 以及对应的结果展示.

主要代码

2.4 前端交互, 交互2

这里是 GET请求, method为 desc. 但是desc后面会带id
js中可以使用 location.search 来表示 ?id=1 这部分

        function getProblem() {$.ajax({url: "desc" +location.search,method: "GET",success: function(data,status){loading(data);}})}function loading(problem){// 获取详情页的方框let desc = document.querySelector("#myleft");// 创建一个h2大小的标题let h = document.createElement("h2");// 这个标题 展示 id 和 题目名称h.innerHTML = problem.id+"."+problem.title;desc.appendChild(h);// 创建一个plet level = document.createElement('p');// 这一段放等级level.innerHTML = problem.level;// 根据等级来展现字体颜色.if(problem.level == "简单"){level.style = "color:rgb(48, 221, 32)";}else if(problem.level == "困难"){level.style = "color:red";}else{level.style = "color:gold";}desc.appendChild(level);// 由于直接使用p标签 无法完全正常换行.就外面套一层prelet pre = document.createElement('pre');let p = document.createElement('p');p.innerHTML = problem.description;pre.appendChild(p);desc.appendChild(pre);// 把约定好的代码放入到输入框中let codeEditor = document.querySelector("#codeEditor");codeEditor.innerHTML = problem.templateCode;

2.5 前端交互, 交互3

再点击按钮之后, 会有一个 post 请求, method为result.,将响应的内容写入结果框中.

继续在刚刚的交互2中写入以下代码

let submitButton = document.querySelector('.mysubmit');submitButton.onclick = function() {let body = {id: problem.id,code: problem.code,};$.ajax({url: "result",method: "post",data: JSON.stringify(body),success: function(data,status){let result = document.querySelector("#result");if(data.error == 0){// 编译运行成功console.log("编译运行成功");result.innerHTML = data.stdout;}else{console.log("编译运行失败");result.innerHTML = data.reason;}}})}

2.6 代码输入框优化

这里我们发现这里的代码输入框非常不好用.
可以采用前端的 ace 库

首先引入 ace.js

    <script src="https://cdn.bootcss.com/ace/1.2.9/ace.js"></script><script src="https://cdn.bootcss.com/ace/1.2.9/ext-language_tools.js"></script>

然后初始化我们的编译器

<script>function initAce() {// 参数 editor 就对应到刚才在 html 里加的那个 div 的 idlet editor = ace.edit("editor");editor.setOptions({enableBasicAutocompletion: true,enableSnippets: true,enableLiveAutocompletion: true});// 这是设置背景主题的editor.setTheme("ace/theme/twilight");// 这是设置代码的语言的editor.session.setMode("ace/mode/java");editor.resize();document.getElementById('editor').style.fontSize = '20px';return editor;}let editor = initAce();

编辑框要套一层 div

更改交互中的代码

这个是为了在代码框中显示当前的代码

3. 测试代码

3.1 查看主页界面

加载没有问题

3.2 查看题目详情界面

能够正确展示题目

3.3 测试提交按钮

能够正确的提交并展示

4. 项目安全性问题

由于你不知道你的用户是使用什么代码, 可能运行会制造一些危险代码.
如: Runtime.getRuntime().exec("rm -rf /"); 就可能把服务器上东西都删了

那么为了防止这样的情况
可以提前将危险代码记录下来, 然后在提交的时候, 比较以下这个代码, 如果是危险代码, 就直接返回错误.

4.1 checkCodeSafe 方法

private boolean checkCodeSafe(String code) {List<String> list = new ArrayList<>();// 防止提交的代码运行恶意程序list.add("Runtime");list.add("exec");// 禁止提交的代码读写文件list.add("java.io");// 禁止提交的代码访问网络list.add("java.net");for (String str : list){int post = code.indexOf(str);if (post >= 0){return false;}}return true;}

4.2 加入到 Task 类中

// 安全性判定if (!checkCodeSafe(question.getCode())){System.out.println("用户提交了不安全的代码");answer.setError(3);answer.setReason("您提交的代码不安全, 危害了服务器!");return answer;}

JavaWeb 项目 --- 在线 OJ 平台 (四)相关推荐

JavaWeb 项目 --- 在线 OJ 平台 (一)
文章目录 1. 项目设计 2. 项目效果图 3. 创建项目 ① 创建一个 maven 项目 ② 创建 webapp/WEB-INF/web.xml ③ 写入 web.xml ④ 导入依赖 ⑤ 验证创 ...
JavaWeb 项目 --- 在线 OJ 平台 (三)
文章目录 1. 设计网页页面 1.1 列表页 1.2 详情页 2. 设计网页的前后端交互接口约定交互1: 获取题目的列表约定交互2: 获取指定题目的详情信息约定交互3: 向服务器提交编写的代码 ...
JavaWeb项目——基于Servlet实现的在线OJ平台（项目问答+代码详解）
文章目录项目演示预先知识请问在处理用户同时提交代码时是多进程处理还是多线程处理? 你是如何创建多进程的逻辑的如何获取到编译与运行后的结果? 编译运行模块子进程之间如何并发? 文件读写操 ...
数仓项目——在线教育平台离线数据仓库效果展示
背景:基于阿里云的3台ECS云服务器搭建了在线教育平台的离线数据仓库,本文仅用于记录最终的效果,从0到1的实现过程后续进行补充,由于抢占式实例的云服务器按量进行每小时计费,为了避免持续的收费,所以我急 ...
B站手把手layui+javaWeb项目全纪录（四）
目录错误注意: 一.管理员界面添加学生/教师二.分角色 1. login.jsp登录身份判断 2. 新建两个视图,对应教师和学生 3. 新建两个mainform,对应教师和学生三.模糊查找教师 ...
在线OJ项目(3)------实现接口与网页前端进行交互
我们先想一下:我们要具体进行设计那些网页呢?有几个页面?都是干啥的?如何设计前后端交互的接口? 当前我们已经把数据库的相关操作给封装好了,接下来我们可以进行设计一些API,也就是HTTP风格的接口,通 ...
在线 OJ 项目(四) · 前端设计与项目总结
一.页面设计题目列表页题目详情页二.获取到后台数据实现思路遇到换行问题小结引入 ace.js 三.项目总结接下来将实现 online-oj 项目的前端界面. 先随便从各大网站上下载网页 ...
在线教育平台项目——需求分析
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 有一段时间没好好写文章了,可不 ...
Python基于php+MySQL的英语四六级在线报名平台
英语四六级基本上是每一个高校大学生都必考的一个考试项目.为了能够让在校大学生更加方便快捷地对英语四六级进行报名考试我开发了php英语四六级在线报名平台 php英语四六级在线报名平台采用Php:mysq ...
Dubbo+Flutter在线交友平台教程第一天项目介绍和框架搭建
课程介绍 <探花交友> 功能介绍项目介绍工程搭建短信验证码实现用户登录功能 1.功能介绍探花交友是一个陌生人的在线交友平台,在该平台中可以搜索附近的人,查看好友动态,平台还会通过 ...

JavaWeb 项目 --- 在线 OJ 平台 (四)