当前位置： 首页 > news >正文

负载均衡式的在线OJ项目编写(六)

news 2025/9/30 10:26:34

一.前期内容回顾

对前面的准备不熟悉的,可以看前面的内容,连接如下:

https://blog.csdn.net/weixin_60668256/article/details/152206597?fromshare=blogdetail&sharetype=blogdetail&sharerId=152206597&sharerefer=PC&sharesource=weixin_60668256&sharefrom=from_link

二.前端代码编写

2.1代码编辑页面的编写

<!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的插件库

            // 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串形式

            $.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.完成结果显示到网页上

success:function(data){//成功得到结果// consloe.log(data);show_result(data);}
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);}

运行效果

三.前端所有代码

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>
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>
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>

未完待续

http://www.dtcms.com/a/423668.html

相关文章：

  • 中止 Web 请求新方式 - AbortController API
  • 做微商如何网站推广需要外包团队做网站怎么提需求
  • 在JavaScript / Node.js中，SQLite异步查询函数实现
  • 数据结构：Map 和 Set （二）
  • 服务网站安徽省建设厅网站备案
  • 从零到一构建现代化 C# 在线编程环境：SharpPad 技术架构深度解析
  • Golang指针的基本概念
  • WordPress提速指南：Memcached+Super Static Cache+CDN缓存网站内容
  • 辽宁手机版建站系统开发平面设计学徒
  • 福州做网站制作北京楼市暴跌
  • PG 中 .psqlrc 配置文件使用案例
  • Linux开发——中断
  • 【快乐数六】2022-11-21
  • redis单线程模型
  • 松江新桥网站建设东莞做网站首选企业铭
  • 【Leetcode hot 100】46.全排列
  • C++版搜索与图论算法
  • 天津做网站排名企业网站建设的价格
  • Nginx 反向代理、负载均衡与 Keepalived 高可用
  • nginx upstream的作用
  • BeaverTails数据集：大模型安全对齐的关键资源与实战应用
  • 归并排序、计数排序以及各种排序稳定性总结
  • 【数据结构+算法】迭代深度搜索（IDS）及其时间复杂度和空间复杂度
  • OpenSpeedy下载 - 全平台网盘提速加速工具|官网入口
  • 关于在博客页面添加live2d-widget的一些心得和踩过的坑
  • 2025年，今后需要进步的方面
  • 有哪些做平面设计好素材网站自学it怎么入门
  • Android16 adb投屏工具Scrcpy介绍
  • 酵母展示技术如何重塑酶工程？从定向进化到工业催化的突破
  • 广汉做网站立白内部网站