一.前期内容回顾
对前面的准备不熟悉的,可以看前面的内容,连接如下:
二.前端代码编写
2.1代码编辑页面的编写
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{number}}.{{title}}</title>
<!-- 引⼊ACE插件 -->
<!-- 官⽹链接:https://ace.c9.io/ -->
<!-- CDN链接:https://cdnjs.com/libraries/ace -->
<!-- 使⽤介绍:https://www.iteye.com/blog/ybc77107-2296261 -->
<!-- https://justcode.ikeepstudying.com/2016/05/ace-editor-%E5%9C%A8%E7%BA%BF%E4%BB%A3%E7%A0%81%E7%BC%96%E8%BE%91%E6%9E%81%E5%85%B6%E9%AB%98%E4%BA%AE/ -->
<!-- 引入ACE CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/extlanguage_tools.js"type="text/javascript"charset="utf-8"></script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container .navbar{
width: 100%;
height: 50px;
background-color: black;
/* 给父级标签设置overflow,取消后续float带来的影响 */
overflow: hidden;
}
.container .navbar a{
/* 设置a标签是行内块元素 */
display: inline-block;
/* 设置a标签的宽度 */
width: 100px;
/* 设置字体颜色和大小 */
color: white;
font-size: larger;
/* 设置文字高度 */
line-height: 50px;
/* 去掉a标签的下划线 */
text-decoration: none;
/* 设置a标签的文字居中 */
text-align: center;
}
/*设置鼠标事件*/
.container .navbar a:hover{
background-color: green;
}
.container .navbar .login{
float: right;
}
.container .navbar .Register{
float: right;
}
.container .part1{
width:100%;
height: 600px;
overflow: hidden;
}
.container .part1 .left_desc{
width: 50%;
height: 600px;
float: left;
overflow: scroll;
}
.container .part1 .left_desc h4{
padding-top: 10px;
padding-left: 10px;
}
.container .part1 .left_desc pre{
padding-top: 10px;
padding-left: 10px;
font-size: medium;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container .part1 .right_code{
width: 50%;
float: right;
}
.container .part1 .right_code .ace_editor{
height: 600px;
}
.container .part2{
width:100%;
overflow: hidden;
}
.container .part2 .result{
width:300px;
float:left;
}
.container .part2 .btn-submit{
width:120px;
height:50px;
font-size: large;
float: right;
background-color: #26bb9c;
color:#FFF;
/* 给按钮带圆角 */
border-radius: 1ch;
border: 0px;
margin-top: 10px;
margin-right: 10px;
}
.container .part2 button:hover{
color: greenyellow;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar">
<a href="/">首页</a>
<a href="/all_questions">题库</a>
<a href="#">竞赛</a>
<a href="#">讨论</a>
<a href="#">求职</a>
<a class="Register"href="#">登录</a>
<a class="login"href="#">注册</a>
</div>
<!--左右呈现,题目描述和预设代码-->
<div class="part1">
<div class="left_desc">
<h4>{{number}}.{{title}}.{{star}}</h4>
<pre>{{desc}}</pre>
</div>
<div class="right_code">
<pre id="code" class="ace_editor"><textarea class="ace_text-input">{{pre_code}}</textarea></pre>
</div>
</div>
<!-- 提交并且得到结果并显示 -->
<div class="part2">
<div class="result">我是结果</div>
<button class="btn-submit" onclick="submit()">提交代码</button>
</div>
</div>
<script>
//初始化对象
editor = ace.edit("code");
//设置⻛格和语⾔(更多⻛格和语⾔,请到github上相应⽬录查看)
// 主题⼤全:http://www.manongjc.com/detail/25-cfpdrwkkivkikmk.html
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/c_cpp");
// 字体⼤⼩
editor.setFontSize(16);
// 设置默认制表符的⼤⼩:
editor.getSession().setTabSize(4);
// 设置只读(true时只读,⽤于展⽰代码)
editor.setReadOnly(false);
// 启⽤提⽰菜单
ace.require("ace/ext/language_tools");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
function submit()
{
alert("嘿嘿!");
//1.收集当前页面的有关数据,1.题号 2.代码
//2.构建json,并向后台发起请求
//3.得到结果,解析并显示到result中
}
</script>
</body>
</html>

目前前后端是没有进行交互的(只是用了ctemplate进行渲染了),后续会讲怎么进行交互
2.2获取页面代码和题号
1.收集当前页面的有关数据
a.题号 b.代码,我们采用JQuery来进行获取html中的内容
可以直接去网上找jquery的插件库



html
// alert("嘿嘿!");
// 1.收集当前页面的有关数据,1.题号 2.代码
// 哈哈!打印在控制台上 console.log("哈哈!");
var code = edit.getSession().getValue();
console.log(code);
var number = $(".container .part1 .left_desc h3 #number").text();
console.log(number);
var judge_url = "/judge/" + number;
console.log(judge_url);
2.完成发起和获取结果请求
使用ajax向我们的后端发起http的请求,json串形式
html
$.ajax({
method: 'Post', //后端发起的请求方式
url: judge_url, //向后端指定的url发起请求
dataType: 'json',//告知server,我需要什么格式
contentType:"application/json;charset=utf-8",//告知server,我给你的格式
data:JSON.stringify({//我们给对方的数据
"code":code,
"input":""
}),
success:function(data)
{
//成功得到结果
consloe.log(data);
}
});
运行结果:




3.完成结果显示到网页上


html
success:function(data)
{
//成功得到结果
// consloe.log(data);
show_result(data);
}
html
function show_result(data)
{
//将错误码和原因拿到
// console.log(data.status);
// console.log(data.reason);
//拿到result结果标签
var result_div = $(".container .part2 .result");
//清空上一次的运行结果
result_div.empty();
//首先拿到结果的状态码和原因结果
var _status = data.status;
var _reason = data.reason;
var reason_div = $("<p>",{
text:_reason
});
if(_status == 0)
{
//编译运行成功
var _stdout = data.stdout;
var _stderr = data.stderr;
var stdout_label = $("<pre>",{
text:_stdout
});
var stderr_label = $("<pre>",{
text:_stderr
});
stdout_label.appendTo(result_div);
stderr_label.appendTo(result_div);
}
else
{
var _stderr = "编译报错\n";
_stderr.appendTo(result_div);
}
reason_div.appendTo(result_div);
}
运行效果

三.前端所有代码
html
one_questions.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{number}}.{{title}}</title>
<!-- 引⼊ACE插件 -->
<!-- 官⽹链接:https://ace.c9.io/ -->
<!-- CDN链接:https://cdnjs.com/libraries/ace -->
<!-- 使⽤介绍:https://www.iteye.com/blog/ybc77107-2296261 -->
<!-- https://justcode.ikeepstudying.com/2016/05/ace-editor-%E5%9C%A8%E7%BA%BF%E4%BB%A3%E7%A0%81%E7%BC%96%E8%BE%91%E6%9E%81%E5%85%B6%E9%AB%98%E4%BA%AE/ -->
<!-- 引入ACE CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/extlanguage_tools.js"type="text/javascript"charset="utf-8"></script>
<!-- 引⼊jquery CDN -->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.container .navbar{
width: 100%;
height: 50px;
background-color: black;
/* 给父级标签设置overflow,取消后续float带来的影响 */
overflow: hidden;
}
.container .navbar a{
/* 设置a标签是行内块元素 */
display: inline-block;
/* 设置a标签的宽度 */
width: 100px;
/* 设置字体颜色和大小 */
color: white;
font-size: larger;
/* 设置文字高度 */
line-height: 50px;
/* 去掉a标签的下划线 */
text-decoration: none;
/* 设置a标签的文字居中 */
text-align: center;
}
/*设置鼠标事件*/
.container .navbar a:hover{
background-color: green;
}
.container .navbar .login{
float: right;
}
.container .navbar .Register{
float: right;
}
.container .part1{
width:100%;
height: 600px;
overflow: hidden;
}
.container .part1 .left_desc{
width: 50%;
height: 600px;
float: left;
overflow: scroll;
}
.container .part1 .left_desc h4{
padding-top: 10px;
padding-left: 10px;
}
.container .part1 .left_desc pre{
padding-top: 10px;
padding-left: 10px;
font-size: medium;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container .part1 .right_code{
width: 50%;
float: right;
}
.container .part1 .right_code .ace_editor{
height: 600px;
}
.container .part2{
width:100%;
overflow: hidden;
}
.container .part2 .result{
width:300px;
float:left;
}
.container .part2 .btn-submit{
width:120px;
height:50px;
font-size: large;
float: right;
background-color: #26bb9c;
color:#FFF;
/* 给按钮带圆角 */
border-radius: 1ch;
border: 0px;
margin-top: 10px;
margin-right: 10px;
}
.container .part2 button:hover{
color: greenyellow;
}
.container .part2 .result{
margin-top: 15px;
margin-left: 15px;
}
.container .part2 .result pre{
font-size: large;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar">
<a href="/">首页</a>
<a href="/all_questions">题库</a>
<a href="#">竞赛</a>
<a href="#">讨论</a>
<a href="#">求职</a>
<a class="Register"href="#">登录</a>
<a class="login"href="#">注册</a>
</div>
<!--左右呈现,题目描述和预设代码-->
<div class="part1">
<div class="left_desc">
<h4><span id="number">{{number}}</span>.{{title}}.{{star}}</h4>
<pre>{{desc}}</pre>
</div>
<div class="right_code">
<pre id="code" class="ace_editor"><textarea class="ace_text-input">{{pre_code}}</textarea></pre>
</div>
</div>
<!-- 提交并且得到结果并显示 -->
<div class="part2">
<div class="result"></div>
<button class="btn-submit" onclick="submit()">提交代码</button>
</div>
</div>
<script>
//初始化对象
editor = ace.edit("code");
//设置⻛格和语⾔(更多⻛格和语⾔,请到github上相应⽬录查看)
// 主题⼤全:http://www.manongjc.com/detail/25-cfpdrwkkivkikmk.html
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/c_cpp");
// 字体⼤⼩
editor.setFontSize(16);
// 设置默认制表符的⼤⼩:
editor.getSession().setTabSize(4);
// 设置只读(true时只读,⽤于展⽰代码)
editor.setReadOnly(false);
// 启⽤提⽰菜单
ace.require("ace/ext/language_tools");
editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
function submit()
{
// alert("嘿嘿!");
// 1.收集当前页面的有关数据,1.题号 2.代码
// 哈哈!打印在控制台上 console.log("哈哈!");
var code = editor.getSession().getValue();
console.log(code);
var number = $(".container .part1 .left_desc h4 #number").text();
console.log(number);
var judge_url = "/judge/" + number;
console.log(judge_url);
//2.构建json,并通过ajax向后台发起基于http的json请求
$.ajax({
method: 'Post', //后端发起的请求方式
url: judge_url, //向后端指定的url发起请求
dataType: 'json',//告知server,我需要什么格式
contentType:"application/json;charset=utf-8",//告知server,我给你的格式
data:JSON.stringify({//我们给对方的数据
"code":code,
"input":""
}),
success:function(data)
{
//成功得到结果
// consloe.log(data);
show_result(data);
}
});
//3.得到结果,解析并显示到result中
function show_result(data)
{
//将错误码和原因拿到
// console.log(data.status);
// console.log(data.reason);
//拿到result结果标签
var result_div = $(".container .part2 .result");
//清空上一次的运行结果
result_div.empty();
//首先拿到结果的状态码和原因结果
var _status = data.status;
var _reason = data.reason;
var reason_div = $("<p>",{
text:_reason
});
if(_status == 0)
{
//编译运行成功
var _stdout = data.stdout;
var _stderr = data.stderr;
var stdout_label = $("<pre>",{
text:_stdout
});
var stderr_label = $("<pre>",{
text:_stderr
});
stdout_label.appendTo(result_div);
stderr_label.appendTo(result_div);
}
else
{
var _stderr = "编译报错\n";
_stderr.appendTo(result_div);
}
reason_div.appendTo(result_div);
}
}
</script>
</body>
</html>
html
all_questions.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线OJ-题目列表</title>
<style>
/*起手式,100%保证我们的样式设置可以不受默认影响*/
*{
/*消除网页的默认外边距*/
margin:0px;
/*消除网页的默认内边距*/
padding:0px;
}
html,
body{
width:100%;
height: 100%;
}
.container .navbar{
width: 100%;
height: 50px;
background-color: black;
/* 给父级标签设置overflow,取消后续float带来的影响 */
overflow: hidden;
}
.container .navbar a{
/* 设置a标签是行内块元素 */
display: inline-block;
/* 设置a标签的宽度 */
width: 100px;
/* 设置字体颜色和大小 */
color: white;
font-size: larger;
/* 设置文字高度 */
line-height: 50px;
/* 去掉a标签的下划线 */
text-decoration: none;
/* 设置a标签的文字居中 */
text-align: center;
}
/*设置鼠标事件*/
.container .navbar a:hover{
background-color: green;
}
.container .navbar .login{
float: right;
}
.container .navbar .Register{
float: right;
}
.container .question_list{
padding-top: 50px;
width:800px;
height:100%;
margin:0px auto;
/* background-color: #ccc; */
text-align: center;
}
.container .question_list table{
width:100%;
font-size: larger;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-top: 50px;
background-color: rgb(236,246,237);
}
.container .question_list h1{
color:green;
}
.container .question_list table .item{
width: 100px;
height: 40px;
font-size: large;
font-family: 'Times New Roman', Times, serif;
}
.container .question_list table .item a{
text-decoration: none;
color: black;
}
.container .question_list table .item a:hover{
color: blue;
font-size: larger;
text-decoration: underline;
}
.container .footer{
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
color:#ccc;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar">
<a href="/">首页</a>
<a href="/all_questions">题库</a>
<a href="#">竞赛</a>
<a href="#">讨论</a>
<a href="#">求职</a>
<a class="Register"href="#">登录</a>
<a class="login"href="#">注册</a>
</div>
<div class="question_list">
<h1>OnlineJudge题目列表</h1>
<table>
<tr>
<th class="item">编号</th>
<th class="item">标题</th>
<th class="item">难度</th>
</tr>
{{#question_list}}
<tr>
<td class="item"><a href="/questions/{{number}}">{{number}}</a></td>
<td class="item"><a href="/questions/{{number}}">{{title}}</a></td>
<td class="item"><a href="/questions/{{number}}">{{star}}</a></td>
</tr>
{{/question_list}}
</table>
</div>
<div class="footer">
<h4>@xxx大学</h4>
<h4>@计算机科学与技术学院</h4>
</div>
</div>
</body>
</html>
html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是我的个人oj系统</title>
<style>
/*起手式,100%保证我们的样式设置可以不受默认影响*/
*{
/*消除网页的默认外边距*/
margin:0px;
/*消除网页的默认内边距*/
padding:0px;
}
html,
body{
width:100%;
height: 100%;
}
.container .navbar{
width: 100%;
height: 50px;
background-color: black;
/* 给父级标签设置overflow,取消后续float带来的影响 */
overflow: hidden;
}
.container .navbar a{
/* 设置a标签是行内块元素 */
display: inline-block;
/* 设置a标签的宽度 */
width: 100px;
/* 设置字体颜色和大小 */
color: white;
font-size: larger;
/* 设置文字高度 */
line-height: 50px;
/* 去掉a标签的下划线 */
text-decoration: none;
/* 设置a标签的文字居中 */
text-align: center;
}
/*设置鼠标事件*/
.container .navbar a:hover{
background-color: green;
}
.container .navbar .login{
float: right;
}
.container .navbar .Register{
float: right;
}
.container .content{
/*设置标签的宽度,content内部只用800个像素点*/
width:800px;
/*用来调试*/
/* background-color: #ccc; */
/* 整体居中 上下,左右*/
margin: 0px auto;
/* 文字居中 */
text-align: center;
/*设置上外边距*/
margin-top: 200px;
}
.container .content .font_{
/*设置标签为块级原始,独占一行,可以设置高宽等属性*/
display: block;
/* 设置每一行的上外边距 */
margin-top: 20px;
/* 去掉a标签的下划线 */
text-decoration: none;
/* 设置字体大小 */
/* font-size: larger; */
}
</style>
</head>
<body>
<div class="container">
<!--导航栏,功能不实现-->
<div class="navbar">
<a href="/">首页</a>
<a href="/all_questions">题库</a>
<a href="#">竞赛</a>
<a href="#">讨论</a>
<a href="#">求职</a>
<a class="Register"href="#">登录</a>
<a class="login"href="#">注册</a>
</div>
<!--网页内容-->
<div class="content">
<h1 class="font_">欢迎来到我们的OnlineJudge平台</h1>
<p class="font_">这是我个人独立开发的一个在线OJ平台</p>
<a class="font_" href="/all_questions">点击我开始编程</a>
</div>
</div>
</body>
</html>
未完待续