负载均衡式的在线OJ工程编写(六)

一.前期内容回顾

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

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代码编辑页面的编写




    
    
    {{number}}.{{title}}
    
    
    
    
    
    
    <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>
    


    

        

            首页
            题库
            竞赛
            讨论
            求职
            登录
            
        

        
        

            

                
{{number}}.{{title}}.{{star}}

                
{{desc}}

            

            

                

            

        

        
        

            
我是结果

            
        

    

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

目前前后端是没有进行交互的(只是用了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 = $("
",{
                    text:_reason
                });
                if(_status == 0)
                {
                    //编译运行成功
                    var _stdout = data.stdout;
                    var _stderr = data.stderr;
                    var stdout_label = $("
",{
                        text:_stdout
                    });
                    var stderr_label = $("
",{
                        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



    
    
    {{number}}.{{title}}
    
    
    
    
    
    
    <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>
    
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    


    

        

            首页
            题库
            竞赛
            讨论
            求职
            登录
            
        

        
        

            

                
{{number}}.{{title}}.{{star}}

                
{{desc}}

            

            

                

            

        

        
        

            

            
        

    

    <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 = $("
",{
                    text:_reason
                });
                if(_status == 0)
                {
                    //编译运行成功
                    var _stdout = data.stdout;
                    var _stderr = data.stderr;
                    var stdout_label = $("
",{
                        text:_stdout
                    });
                    var stderr_label = $("
",{
                        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>




all_questions.html



    
    
    在线OJ-题目列表
    


    

        

            首页
            题库
            竞赛
            讨论
            求职
            登录
            
        

        

            
OnlineJudge题目列表

            
                {{#question_list}}
                
                {{/question_list}}
            

                

                    编号
                    标题
                    难度
                

                    {{number}}
                    {{title}}
                    {{star}}
                

        

        

            
@xxx大学

            
@计算机科学与技术学院

        

    





index.html



    
    
    这是我的个人oj系统
    


    

        
        

            首页
            题库
            竞赛
            讨论
            求职
            登录
            
        

        
        

            
欢迎来到我们的OnlineJudge平台

            
这是我个人独立开发的一个在线OJ平台

            点击我开始编程
        

    





未完待续

posted on 2025-10-28 16:33  wgwyanfs  阅读(2)  评论(0)    收藏  举报

导航