项目2 | 牛扣刷题平台

CGod

已于 2023-08-10 19:18:18 修改

阅读量236

点赞数 1

文章标签：负载均衡 c++ 项目网络 OJ

于 2023-07-28 00:51:23 首次发布

本文链接：https://blog.csdn.net/m0_64332384/article/details/131920989

版权

在这里插入图片描述
啊我摔倒了..有没有人扶我起来学习....

👱个人主页： $\color{Darkorange}{《CGod的个人主页》}$ 交个朋友叭~
💒个人社区： $\color{Darkorange}{《编程成神技术交流社区》}$ 加入我们，一起高效学习，收割好Offer叭~
🌱刷题链接： $\color{Darkorange}{《LeetCode》}$ 快速成长的渠道哦~

前言

本项目实现一个类似 leetcode 的题目列表+在线编程功能的负载均衡式在线OJ服务

一、所用技术与开发环境

所用技术:
1. C++ STL 标准库
2. Boost 准标准库(字符串切割)
3. cpp-httplib 第三方开源网络库
4. ctemplate 第三方开源前端网页渲染库
5. jsoncpp 第三方开源序列化、反序列化库
6. 负载均衡设计
7. 多进程、多线程
8. MySQL C connect
9. Ace前端在线编辑器(了解)
10. html/css/js/jquery/ajax (了解)
开发环境
1. Centos 7 云服务器
2. vscode
3. Mysql Workbench

二、项目介绍

项目核心是三个模块
1. comm：公共模块
2. compile_server：编译与运行模块
3. oj_server：获取题目列表，查看题目编写题目界面，负载均衡，其他功能
项目宏观结构
编写思路
1. compile_server
2. oj_server
3. version1 ——基于文件版的在线OJ
4. 前端的页面设计
5. version2 ——基于 MySQL 版的在线OJ

三、项目开始

3.1 compile_server的设计

提供的服务：编译并运行代码，得到格式化的相关的结果

3.1.1 complier编译功能

compile_server/compiler.hpp

namespace ns_compiler
{
    using namespace ns_util;
    using namespace ns_log;

    class Compiler
    {
    public:
        // 返回值：编译成功：true，否则：false
        // 输入参数：编译的文件名
        // file_name: 1234
        // 1234 -> ./temp/1234.cpp
        // 1234 -> ./temp/1234.exe
        // 1234 -> ./temp/1234.stderr
        static bool Compile(const std::string &file_name)
        {
            pid_t pid = fork();
            if (pid < 0)
            {
                logMessage(ERROR, "内部错误，创建子进程失败...[%s][%d]: %s", __FILE__, __LINE__, strerror(errno));
                return false;
            }
            else if (pid == 0)
            {
                umask(0);
                int _complie_stderr_fd = open(PathUtil::CompilerError(file_name).c_str(), O_CREAT | O_WRONLY, 0644);
                if (_complie_stderr_fd < 0)
                {
                    logMessage(FATAL, "没有成功形成stderr文件...[%s][%d]: %s", __FILE__, __LINE__, strerror(errno));
                    exit(1);
                }
                // 重定向标准错误到_complie_stderr_fd
                dup2(_complie_stderr_fd, 2);
                // 程序替换，并不影响进程的文件描述符表
                // 子进程: 调用编译器，完成对代码的编译工作
                // g++ -o target src -std=c++11
                execlp("g++", "g++", "-o", PathUtil::Exe(file_name).c_str(), PathUtil::Src(file_name).c_str(), "-std=c++11", nullptr);
                logMessage(FATAL, "启动编译器g++失败，可能是参数错误...[%s][%d]: %s", __FILE__, __LINE__, strerror(errno));
                exit(2);
            }
            else
            {
                waitpid(pid, nullptr, 0);
                // 编译是否成功,就看有没有形成对应的可执行程序
                if (FileUtil::IsFileExists(PathUtil::Exe(file_name)))
                {
                    logMessage(NORMAL, "编译成功！");
                    return true;
                }
                logMessage(ERROR, "编译失败，没有形成可执行程序...[%s][%d]: %s", __FILE__, __LINE__, strerror(errno));
                return false;
            }
        }
    };
}

comm/log.hpp

namespace ns_log
{
    #define DEBUG 0
    #define NORMAL 1
    #define WARNING 2
    #define ERROR 3
    #define FATAL 4

    static const char *gLevelMap[] = {
        "DEBUG",
        "NORMAL",
        "WARNING",
        "ERROR",
        "FATAL"};
    static void logMessage(int level, const char *format, ...)
    {
        time_t timeStamp = time(nullptr);
        char stdBuffer[1024];
        snprintf(stdBuffer, sizeof stdBuffer, "[%s] [%ld]", gLevelMap[level], timeStamp);

        va_list arg;
        va_start(arg, format);
        char usrBuffer[1024];
        vsnprintf(usrBuffer, sizeof stdBuffer, format, arg);
        va_end(arg);

        printf("%s %s\n", stdBuffer, usrBuffer);
    }
}

comm/util.hpp新增的接口有：

namespace ns_util
{
    const std::string temp_name = "./temp/";
    class PathUtil
    {
    public:
        static std::string AddSuffix(const std::string &file_name, const std::string &suffix)
        {
            std::string path_name = temp_name;
            path_name += file_name;
            path_name += suffix;
            return path_name;
        }
        // 1.编译时需要有的临时文件
        // 1.1构建源文件路径+后缀的完整文件名
        static std::string Src(const std::string &file_name)
        {
            return AddSuffix(file_name, ".cpp");
        }
        // 1.2构建可执行程序的完整路径+后缀名
        static std::string Exe(const std::string &file_name)
        {
            return AddSuffix(file_name, ".exe");
        }
        // 1.3构建编译错误时的完整路径+后缀名
        static std::string CompilerError(const std::string &file_name)
        {
            return AddSuffix(file_name, ".compile_error");
        }
    };

    class FileUtil
    {
    public:
        static bool IsFileExists(const std::string &path_name)
        {
            struct stat st;
            return stat(path_name.c_str(), &st) == 0;
        }
    };
}

3.1.2 runner运行功能

其中，我们需要引入资源限制功能，来限制用户提交的代码运行的占用时间和占用空间
分别测试一下时间资源限制和空间资源限制

test.cc

#include<iostream>
#include<sys/time.h>
#include<sys/resource.h>

int main()
{
	// 限制累计运行时长
	struct rlimit r;
	r.rlim_cur = 1; // 软限制，设置为1秒
	r.rlim_max = RLIM_INFINITY; // 硬限制，限制软限制的上限，这里设为无穷即可
	setrlimit(RLIMIT_CPU, &r);
	while(1);

	// 限制累计运行空间
	struct rlimit r;
	r.rlim_cur = 1024 * 1024 * 20; // 软限制，设置为20M
	r.rlim_max = RLIM_INFINITY; // 硬限制，限制软限制的上限，这里设为无穷即可
	setrlimit(RLIMIT_AS, &r);
	int count = 0;
	while(1)
	{
		int *p = new int[1024 * 1024];
		count++;
		std::cout << "size: " << count << std::endl;
		sleep(1);
	}
	return 0;
}

测试结果(进程分别收到24号信号SIGXCPU和6号信号SIGABRT而终止)：

编写运行功能

compile_server/runner.hpp

namespace ns_runner
{
    using namespace ns_util;
    using namespace ns_log;

    class Runner
    {
    public:
        // 提供设置进程占用资源大小的接口
        static void SetProcLimit(int _cpu_limit, int _mem_limit)
        {
            // 设置CPU时长
            struct rlimit cpu;
            cpu.rlim_cur = _cpu_limit;
            cpu.rlim_max = RLIM_INFINITY;
            setrlimit(RLIMIT_CPU, &cpu);

            // 设置内存大小
            struct rlimit mem;
            mem.rlim_cur = _mem_limit * 1024; // 转化成为KB
            mem.rlim_max = RLIM_INFINITY;
            setrlimit(RLIMIT_AS, &mem);
        }
        // 指明文件名即可，不需要代理路径，不需要带后缀
        /*******************************************
         * 返回值 > 0: 程序异常了，退出时收到了信号，返回值就是对应的信号编号
         * 返回值 == 0: 正常运行完毕的，结果保存到了对应的临时文件中
         * 返回值 < 0: 内部错误
         *
         * cpu_limit: 该程序运行的时候，可以使用的最大cpu资源上限
         * mem_limit: 改程序运行的时候，可以使用的最大的内存大小(KB)
         * *****************************************/
        static int Run(const std::string &file_name, int _cpu_limit, int _mem_limit)
        {
            /*********************************************
             * 程序运行：
             * 1. 代码跑完，结果正确
             * 2. 代码跑完，结果不正确
             * 3. 代码没跑完，异常了
             * Run需要考虑代码跑完，结果正确与否吗？？不考虑！
             * 结果正确与否：是由我们的测试用例决定的！
             * 我们只考虑：是否正确运行完毕
             *
             * 我们必须知道可执行程序是谁？
             * 一个程序在默认启动的时候
             * 标准输入: 不处理
             * 标准输出: 程序运行完成，输出结果是什么
             * 标准错误: 运行时错误信息
             * *******************************************/
            std::string _execute = PathUtil::Exe(file_name);
            std::string _stdin = PathUtil::Stdin(file_name);
            std::string _stdout = PathUtil::Stdout(file_name);
            std::string _stderr = PathUtil::Stderr(file_name);

            umask(0);
            int _stdin_fd = open(_stdin.c_str(), O_CREAT | O_RDONLY | O_TRUNC, 0644);
            int _stdout_fd = open(_stdout.c_str(), O_CREAT | O_WRONLY | O_TRUNC, 0644);
            int _stderr_fd = open(_stderr.c_str(), O_CREAT | O_WRONLY | O_TRUNC, 0644);
            if (_stdin_fd < 0 | _stdout_fd < 0 | _stderr_fd < 0)
            {
                logMessage(FATAL, "运行时打开标准文件失败...[%s][%d]: %s", __FILE__, __LINE__, strerror(errno));
                return -1; // 代表打开文件失败
            }

            pid_t pid = fork();
            if (pid < 0)
            {
                logMessage(FATAL, "运行时创建子进程失败...[%s][%d]: %s", __FILE__, __LINE__, strerror(errno));
                close(_stdin_fd);
                close(_stdout_fd);
                close(_stderr_fd);
                return -2; // 代表创建子进程失败
            }
            else if (pid == 0)
            {
                dup2(_stdin_fd, 0);
                dup2(_stdout_fd, 1);
                dup2(_stderr_fd, 2);

                execl(_execute.c_str() /*我要执行谁*/, _execute.c_str() /*我想在命令行上如何执行该程序*/, nullptr);
                exit(1);
            }
            else
            {
                close(_stdin_fd);
                close(_stdout_fd);
                close(_stderr_fd);
                int status = 0;
                waitpid(pid, &status, 0);
                // 程序运行异常，一定是因为因为收到了信号！
                logMessage(NORMAL, "运行完毕...info: %d | [%s][%d]: %s", status & 0x7F, __FILE__, __LINE__, strerror(errno));
                return status & 0x7F;
            }
        }
    };
}

comm/util.hpp新增的接口有：

namespace ns_util
{
    class PathUtil
    {
    public:
        // 2.运行时需要的临时文件
        // 2.1构建该程序对应的标准输入完整的路径+后缀名
        static std::string Stdin(const std::string &file_name)
        {
            return AddSuffix(file_name, ".stdin");
        }
        // 2.2构建该程序对应的标准输出完整的路径+后缀名
        static std::string Stdout(const std::string &file_name)
        {
            return AddSuffix(file_name, ".stdout");
        }
        // 2.3构建该程序对应的标准错误完整的路径+后缀名
        static std::string Stderr(const std::string &file_name)
        {
            return AddSuffix(file_name, ".stderr");
        }
    };
}

3.1.3 complie_run编译运行功能

首先引入一下jsoncpp功能，用于数据的序列化和反序列化
测试一下jsoncpp的使用
test.cc

#include<iostream>
#include<string>
#include<jsoncpp/json/json.h>

int main()
{
    // 序列化
    // 将结构化数据转化为字符串
    // value 是一个json的中间类， 可以填充kv值
    Json::Value root;
    root["code"] = "mycode";
    root["user"] = "bobo";
    root["age"]  = "27";

    // Json::FastWriter writer;
    Json::StyledWriter writer;
    std::string str = writer.write(root);
    std::cout << str << std::endl;
    return 0;
}

测试结果：

编写编译运行功能

complie_server/compile_run.hpp

namespace ns_compile_and_run
{
    using namespace ns_compiler;
    using namespace ns_runner;
    using namespace ns_log;
    using namespace ns_util;

    class CompileAndRun
    {
    public:
        static void RemoveTempFile(const std::string& file_name)
        {
            //清理文件的个数是不确定的，但是有哪些我们是知道的
            std::string _src = PathUtil::Src(file_name);
            if(FileUtil::IsFileExists(_src)) unlink(_src.c_str());

            std::string _compiler_error = PathUtil::CompilerError(file_name);
            if(FileUtil::IsFileExists(_compiler_error)) unlink(_compiler_error.c_str());

            std::string _execute = PathUtil::Exe(file_name);
            if(FileUtil::IsFileExists(_execute)) unlink(_execute.c_str());

            std::string _stdin = PathUtil::Stdin(file_name);
            if(FileUtil::IsFileExists(_stdin)) unlink(_stdin.c_str());

            std::string _stdout = PathUtil::Stdout(file_name);
            if(FileUtil::IsFileExists(_stdout)) unlink(_stdout.c_str());

            std::string _stderr = PathUtil::Stderr(file_name);
            if(FileUtil::IsFileExists(_stderr)) unlink(_stderr.c_str());
        }
        // code > 0 : 进程收到了信号导致异常奔溃
        // code < 0 : 整个过程非运行报错(代码为空，编译报错等)
        // code = 0 : 整个过程全部完成
        static std::string CodeToDesc(int status_code, const std::string &file_name)
        {
            std::string desc;
            switch (status_code)
            {
            case 0:
                desc = "编译运行成功";
                break;
            case -1:
                desc = "提交的代码是空";
                break;
            case -2:
                desc = "未知错误";
                break;
            case -3:
                // desc = "代码编译的时候发生了错误";
                FileUtil::ReadFile(PathUtil::CompilerError(file_name), &desc, true);
                break;
            case SIGABRT: // 6
                desc = "内存超过范围";
                break;
            case SIGXCPU: // 24
                desc = "CPU使用超时";
                break;
            case SIGFPE: // 8
                desc = "浮点数溢出";
                break;
            default:
                desc = "未知: " + std::to_string(status_code);
                break;
            }
            return desc;
        }
        /***************************************
         * 输入:
         * code： 用户提交的代码
         * input: 用户给自己提交的代码对应的输入，不做处理
         * cpu_limit: 时间要求
         * mem_limit: 空间要求
         *
         * 输出:
         * 必填
         * status: 状态码
         * reason: 请求结果
         * 选填：
         * stdout: 我的程序运行完的结果
         * stderr: 我的程序运行完的错误结果
         *
         * 参数：
         * in_json: {"code": "#include...", "input": "","cpu_limit":1, "mem_limit":10240}
         * out_json: {"status":"0", "reason":"","stdout":"","stderr":"",}
         * ************************************/
        static void start(const std::string &in_json, std::string *out_json)
        {
            Json::Value in_value;
            Json::Reader reader;
            reader.parse(in_json, in_value);

            std::string code = in_value["code"].asString();
            std::string input = in_value["input"].asString();
            int cpu_limit = in_value["cpu_limit"].asInt();
            int mem_limit = in_value["mem_limit"].asInt();

            std::string file_name; // 需要内部形成的唯一文件名
            int status_code = 0;
            int run_result = 0;
            Json::Value out_value;

            if (code.size() == 0)
            {
                status_code = -1; // 代码为空
                goto END;
            }
            // 形成的文件名只具有唯一性，没有目录没有后缀
            // 毫秒级时间戳+原子性递增唯一值: 来保证唯一性
            file_name = FileUtil::UniqFileName();
            // 形成临时src文件
            if (!FileUtil::WriteFile(PathUtil::Src(file_name), code))
            {
                status_code = -2; // 未知错误
                goto END;
            }

            if (!Compiler::Compile(file_name))
            {
                // 编译失败
                status_code = -3; // 代码编译的时候发生了错误
                goto END;
            }

            run_result = Runner::Run(file_name, cpu_limit, mem_limit);
            if (run_result < 0)
            {
                status_code = -2; // 未知错误
            }
            else if (run_result > 0)
            {
                status_code = run_result; // 程序运行崩溃了
            }
            else
            {
                status_code = 0; // 运行成功
            }
        END:
            out_value["status"] = status_code;
            out_value["reason"] = CodeToDesc(status_code, file_name);
            if (status_code == 0)
            {
                // 整个过程全部成功
                std::string _stdout;
                FileUtil::ReadFile(PathUtil::Stdout(file_name), &_stdout, true);
                out_value["stdout"] = _stdout;

                std::string _stderr;
                FileUtil::ReadFile(PathUtil::Stderr(file_name), &_stderr, true);
                out_value["stderr"] = _stderr;
            }
            Json::StyledWriter writer;
            *out_json = writer.write(out_value);

            RemoveTempFile(file_name); // 清理临时文件
        }
    };
}

comm/util.hpp新增的接口有：

namespace ns_util
{
    class TimeUtil
    {
    public:
        // 获得毫秒时间戳
        static std::string GetTimeMS()
        {
            struct timeval _time;
            gettimeofday(&_time, nullptr);
            return std::to_string(_time.tv_sec * 1000 + _time.tv_usec / 1000);
        }
    };
    class FileUtil
    {
    public:
        static bool WriteFile(const std::string &path_name, const std::string &content)
        {
            std::ofstream out(path_name);
            if (!out.is_open())
            {
                return false;
            }
            out.write(content.c_str(), content.size());
            out.close();
            return true;
        }
        static bool ReadFile(const std::string &path_name, std::string *content, bool keep = false)
        {
            content->clear();

            std::ifstream in(path_name);
            if (!in.is_open())
            {
                return false;
            }
            std::string line;
            // getline:不保存行分割符,有些时候需要保留\n,
            // getline内部重载了强制类型转化
            while (std::getline(in, line))
            {
                (*content) += line;
                (*content) += keep ? "\n" : "";
            }
            in.close();
            return true;
        }
    };
}

3.1.4 compile_server调用以上功能

首先引入cpp-httplib的使用，把compile_server打包成网络服务
学习使用httplib
test.cc

#include"httplib.h"
using namespace httplib;

int main()
{
    Server svr;
    svr.Get("/bobo", [](const Request& req, Response& resp){
        resp.set_content("hello bobo!", "text/plain");
    });
    svr.listen("0.0.0.0", 9090); // 启动HTTP服务
    return 0;
}

启动服务(httplib提供多线程阻塞式网络服务)：
此时用浏览器访问：

编写compile_server.cc功能，把compile_server打包成网络服务
compile_server/compile_server.cc

void Usage(const std::string &command)
{
    std::cout << "Usage: " << command << " port" << std::endl;
}
// 编译服务随时可能被多个人请求，必须保证传递上来的code，形成源文件名称的时候，要具有
// 唯一性，要不然多个用户之间会互相影响
//./compile_server port
int main(int argc, char *argv[])
{
    if (argc != 2)
    {
        Usage(argv[0]);
        return 1;
    }
    
    Server svr;
    svr.Post("/compile_and_run", [](const Request &req, Response &res){
        // 用户请求的服务正文是我们想要的json string
        std::string in_json = req.body;
        std::string out_json;
        if(!in_json.empty())
        {
            CompileAndRun::start(in_json, &out_json);
            res.set_content(out_json, "application/json;charset=utf-8");
        } 
    });
    svr.listen("0.0.0.0", atoi(argv[1])); // 启动http服务

    return 0;
}

3.1.5 使用Postman调试compile_server功能

在这里插入图片描述

3.2 基于MVC 结构的oj 服务设计

本质： 建立一个小型网站
1. 获取首页，用题目列表充当
2. 编辑区域页面
3. 提交判题功能(编译并运行)

M: Model,通常是和数据交互的模块，比如，对题库进行增删改查（文件版，MySQL）
V: view, 通常是拿到数据之后，要进行构建网页，渲染网页内容，展示给用户的(浏览器)
C: control, 控制器，就是我们的核心业务逻辑

3.2.1 用户请求的服务路由功能

oj_server/oj_server.cc

int main()
{
	Server svr; //用户请求的服务路由功能

    // 获取所有的题目列表
    svr.Get("/all_questions", [](const Request& req, Response& res){
        resp.set_content("这是所有题目的列表", "text/plain; charset=utf-8");
    });
    // 用户要根据题目编号，获取题目的内容
    // /question/100 -> 正则匹配
    // R"()", 原始字符串raw string,保持字符串内容的原貌，不用做相关的转义
    svr.Get(R"(/one_question/(\d+))", [&ctrl](const Request& req, Response& res){
       resp.set_content("这是指定的一道题: " + number, "text/plain; charset=utf-8");
});
    // 用户提交代码，使用我们的判题功能(1. 每道题的测试用例 2. compile_and_run)
    svr.Get(R"(/judge/(\d+))", [](const Request &req, Response &resp){
std::string number = req.matches[1];
	resp.set_content("指定题目的判题: " + number, "text/plain; charset=utf-8");
});

    svr.set_base_dir("./wwwroot");
    svr.listen("0.0.0.0", 8080);
    return 0;
}

3.2.2 model功能，提供对数据的操作

oj_server/oj_model.hpp

// 根据题目list文件，加载所有的题目信息到内存中
// model: 主要用来和数据进行交互，对外提供访问数据的接口
namespace ns_model
{
    using namespace ns_log;
    using namespace ns_util;

    class Question
    {
    public:
        std::string _number; //题目编号，唯一
        std::string _title;  //题目的标题
        std::string _star;   //难度: 简单 中等 困难
        int _cpu_limit;      //题目的时间要求(S)
        int _mem_limit;      //题目的空间要去(KB)
        std::string _desc;   //题目的描述
        std::string _head;   //题目预设给用户在线编辑器的代码
        std::string _tail;   //题目的测试用例，需要和header拼接，形成完整代码
    };

    const std::string questions_list = "./questions/questions.list";
    const std::string questions_path = "./questions/";

    class Model
    {
    public:
        Model()
        {
            LoadQuestionList(questions_list);
        }
        bool LoadQuestionList(const std::string &question_list)
        {
            //加载配置文件: questions/questions.list + 题目编号文件
            std::ifstream in(questions_list);
            if(!in.is_open())
            {
                logMessage(FATAL, "加载题库失败,请检查是否存在题库文件...[%s][%d]: %s", __FILE__, __LINE__, strerror(errno));
                return false;
            }

            std::string line;
            while(std::getline(in, line))
            {
                std::vector<std::string> tokens;
                StringUtil::SplitString(line, &tokens, " ");
                // 1 判断回文数 简单 1 30000
                if(tokens.size() != 5)
                {
                    logMessage(WARNING, "加载部分题目失败, 请检查文件格式...[%s][%d]: %s", __FILE__, __LINE__, strerror(errno));
                    continue;
                }
                Question q;
                q._number = tokens[0];
                q._title = tokens[1];
                q._star = tokens[2];
                q._cpu_limit = stoi(tokens[3]);
                q._mem_limit = stoi(tokens[4]);

                std::string path = questions_path;
                path += q._number;
                path += "/";

                FileUtil::ReadFile(path+"desc.txt", &(q._desc), true);
                FileUtil::ReadFile(path+"head.cpp", &(q._head), true);
                FileUtil::ReadFile(path+"tail.cpp", &(q._tail), true);

                _questions.insert({q._number, q});
            }
            logMessage(NORMAL, "加载题库...成功!");
            in.close();
            return true;
        }
        bool GetAllQuestions(std::vector<Question>* out)
        {
            if(_questions.size() == 0)
            {
                logMessage(ERROR, "用户获取题库失败...[%s][%d]: %s", __FILE__, __LINE__, strerror(errno));
                return false;
            }
            for(const auto& q : _questions) out->push_back(q.second);
            return true;
        }
        bool GetOneQuestion(const std::string &number, Question *question)
        {
            const auto& q = _questions.find(number);
            if(q == _questions.end())
            {
                logMessage(ERROR, "用户获取题目失败, 题目编号: %s | [%s][%d]: %s", number, __FILE__, __LINE__, strerror(errno));
                return false;
            }
            (*question) = q->second;
            return true;            
        }
    private:
        std::unordered_map<std::string, Question> _questions;
    };
}

comm/util.hpp新增接口

namespace ns_util
{
    class StringUtil
    {
    public:
        static void SplitString(const std::string& str, std::vector<std::string>* out, const std::string& sep)
        {
            boost::split(*out, str, boost::is_any_of(sep), boost::token_compress_on);
        }
    };
}

oj_server/questions/questions.list

1 回文串 简单 1 30000

oj_server/questions/1/desc.txt

判断一个整数是否是回文数。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。

示例 1:

输入: 121
输出: true
示例 2:

输入: -121
输出: false
解释: 从左向右读, 为 -121 。 从右向左读, 为 121- 。因此它不是一个回文数。
示例 3:

输入: 10
输出: false
解释: 从右向左读, 为 01 。因此它不是一个回文数。
进阶:

你能不将整数转为字符串来解决这个问题吗？

oj_server/questions/1/head.cpp

#include <iostream>
#include <string>
#include <vector>
#include <map>
#include <algorithm>

using namespace std;

class Solution {
public:
    bool IsPalindrome(int x){
        
    }
};

oj_server/questions/1/tail.cpp

#ifndef COMPILE_ONLINE
    #include"head.cpp"
#endif

void test1()
{
    bool ret = Solution().IsPalindrome(1234321);
    if(ret) std::cout << "通过用例1, 测试121通过 ... OK!" << std::endl;
    else std::cout << "没有通过用例1, 测试的值是: 121"  << std::endl;
}
void test2()
{
    bool ret = Solution().IsPalindrome(-10);
    if(!ret) std::cout << "通过用例2, 测试-10通过 ... OK!" << std::endl;
    else std::cout << "没有通过用例2, 测试的值是: -10"  << std::endl;   
}
int main()
{
    test1();
    test2();
    return 0;
}

3.2.3 view功能，网页渲染模块

首先引入ctemplate，提供网页渲染功能
测试使用一下ctemplate

test.cc

#include<ctemplate/template.h>
#include<string>
#include<iostream>

int main()
{
    std::string in_html = "./test.html";
    std::string value = "bobo";

    // 形成数据字典
    ctemplate::TemplateDictionary root("test"); // 理解为unordered_map<> test
    root.SetValue("key", value);                // 理解为test.insert({"key", value})

    // 获取被渲染网页对象
    ctemplate::Template* tpl = ctemplate::Template::GetTemplate(in_html, ctemplate::DO_NOT_STRIP);

    // 添加字典数据到网页中
    std::string out_html;
    tpl->Expand(&out_html, &root);

    // 完成了渲染
    std::cout << out_html << std::endl;
    return 0;
}

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用来测试</title>
</head>
<body>
    <p>{{key}}</p>
    <p>{{key}}</p>
    <p>{{key}}</p>
    <p>{{key}}</p>
    <p>{{key}}</p>
</body>
</html>

测试结果：

编写view模块

oj_server/oj_view.hpp

namespace ns_view
{
    using namespace ns_model;

    const std::string template_path = "./template_html/";
    class View
    {
    public:
        void AllExpandHtml(const std::vector<Question>& all, std::string* html)
        {
            // 题目的编号 题目的标题 题目的难度
            // 推荐使用表格显示
            // 1. 形成路径
            std::string src_html = template_path + "all_questions.html";
            // 2. 形成数字典
            ctemplate::TemplateDictionary root("all_questions");
            for(const auto& q : all)
            {
                ctemplate::TemplateDictionary* sub = root.AddSectionDictionary("question_list");
                sub->SetValue("number", q._number);
                sub->SetValue("title", q._title);
                sub->SetValue("star", q._star);
            }
            //3. 获取被渲染的html
            ctemplate::Template* tpl = ctemplate::Template::GetTemplate(src_html, ctemplate::DO_NOT_STRIP);
            //4. 开始完成渲染功能
            tpl->Expand(html, &root);
        }
        void OneExpandHtml(const Question& q, std::string* html)
        {
            // 1. 形成路径
            std::string src_html = template_path + "one_question.html";
            // 2. 形成数字典
            ctemplate::TemplateDictionary root("one_question");
            root.SetValue("number", q._number);
            root.SetValue("title", q._title);
            root.SetValue("star", q._star);
            root.SetValue("desc", q._desc);
            root.SetValue("pre_code", q._head);
            //3. 获取被渲染的html
            ctemplate::Template* tpl = ctemplate::Template::GetTemplate(src_html, ctemplate::DO_NOT_STRIP);
            //4. 开始完成渲染功能
            tpl->Expand(html, &root);  
        }
    };
}

oj_server/template_html/all_questions.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线OJ-题目列表</title>
</head>

<body>
    <h1>OnlineJuge题目列表</h1>
    <table class = item>
        <tr>
            <th class="item_1">编号</th>
            <th class="item_1">标题</th>
            <th class="item_1">难度</th>
        </tr>
        {{#question_list}}
        <tr>
            <td class="item_2">{{number}}</td>
            <td class="item_2"><a href="/one_question/{{number}}">{{title}}</a></td>
            <td class="item_2">{{star}}</td>
        </tr>
        {{/question_list}}
    </table>

</body>

</html>

oj_server/template_html/one_question.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{number}}.{{title}}</title>
</head>

<body>
    <h3><span id="number">{{number}}</span>.{{title}}_{{star}}</h3>
    <pre>{{desc}}</pre>
</body>

</html>

3.2.4 control功能，逻辑控制模块

oj_server/oj_control.hpp

namespace ns_control
{
    using namespace ns_model;
    using namespace ns_view;
    using namespace ns_log;
    using namespace ns_util;
    using namespace httplib;

    // 提供服务的主机
    class Machine
    {
    public:
        // 提升主机负载
        void IncLoad()
        {
            if(_mtx) _mtx->lock();
            ++_load;
            if(_mtx) _mtx->unlock();
        }
        // 减少主机负载
        void DecLoad()
        {
            if(_mtx) _mtx->lock();
            --_load;
            if(_mtx) _mtx->unlock();
        }
        // 重置负载
        void ResetLoad()
        {
            if(_mtx) _mtx->lock();
            _load = 0;
            if(_mtx) _mtx->unlock();
        }
        // 获取主机负载
        uint64_t Load()
        {
            uint64_t load = 0;
            if(_mtx) _mtx->lock();
            load = _load;
            if(_mtx) _mtx->unlock();
            return load;
        }
    public:
        std::string _ip = "";       //编译服务的ip
        int _port = 0;              //编译服务的port
        uint64_t _load = 0;         //编译服务的负载
        std::mutex *_mtx = nullptr; // mutex禁止拷贝的，使用指针
    };

    // 负载均衡模块
    const std::string _machine_conf = "./conf/service_machine.conf";
    class LoadBalance
    {
    public:
        LoadBalance()
        {
            assert(LoadConf(_machine_conf));
            logMessage(NORMAL, "加载\"%s\"成功...", _machine_conf.c_str());
        }
        bool LoadConf(const std::string& machine_conf)
        {
            std::ifstream in(machine_conf);
            if(!in.is_open())
            {
                logMessage(FATAL, "加载\"%s\"失败...[%s][%d]: %s", machine_conf.c_str(), __FILE__, __LINE__, strerror(errno));
                return false;
            }
            std::string line;
            while(std::getline(in, line))
            {
                std::vector<std::string> tokens;
                StringUtil::SplitString(line, &tokens, ":");
                if(tokens.size() != 2)
                {
                    logMessage(WARNING, "切分%s失败...[%s][%d]: %s", line, __FILE__, __LINE__, strerror(errno));
                    continue;
                }
                Machine m;
                m._ip = tokens[0];
                m._port = stoi(tokens[1]);
                m._load = 0;
                m._mtx = new std::mutex;

                _online.push_back(_machines.size());
                _machines.push_back(m);
            }
            in.close();
            return true;
        }
        // id: 输出型参数
        // m : 输出型参数
        bool SmartChoice(int* id, Machine** m)
        {
            // 1. 使用选择好的主机(更新该主机的负载)
            // 2. 我们需要可能离线该主机
            _mtx.lock();
            // 负载均衡的算法
            // 1. 随机数+hash
            // 2. 轮询+hash
            int online_num = _online.size();
            if(online_num == 0)
            {
                _mtx.unlock();
                logMessage(FATAL, "所有的后端编译主机已经离线, 请运维的同事尽快查看...[%s][%d]: %s", __FILE__, __LINE__, strerror(errno));
                return false;
            }
            // 通过遍历的方式，找到所有负载最小的机器
            *id = _online[0];
            *m = &_machines[_online[0]];
            uint64_t min_load = _machines[_online[0]].Load();
            for(int i = 1; i < online_num; ++i)
            {
                uint64_t curr_load = _machines[_online[i]].Load();
                if (min_load > curr_load)
                {
                    min_load = curr_load;
                    *id = _online[i];
                    *m = &_machines[_online[i]];
                }
            }
            _mtx.unlock();
            return true;
        }
        void OnlineMachine()
        {
            // 后面再写
        }
        void OfflineMachine(int which)
        {
            _mtx.lock();
            for(auto iter = _online.begin(); iter != _online.end(); ++iter)
            {
                if(*iter == which) // 要离线的主机已经找到啦
                {
                    _machines[which].ResetLoad();
                    _online.erase(iter);
                    _offline.push_back(which);
                    break; // 因为break的存在，所有我们暂时不考虑迭代器失效的问题
                }
            }
            _mtx.unlock();
        }
        //for test
        void ShowMachines()
        {
             _mtx.lock();
             std::cout << "当前在线主机列表: ";
             for(auto &id : _online)
             {
                 std::cout << id << " ";
             }
             std::cout << std::endl;
             std::cout << "当前离线主机列表: ";
             for(auto &id : _offline)
             {
                 std::cout << id << " ";
             }
             std::cout << std::endl;
             _mtx.unlock();
        }
    private:
        std::vector<Machine> _machines; // 可以给我们提供编译服务的所有的主机，每一台主机都有自己的下标，充当当前主机的id
        std::vector<int> _online;       // 所有在线的主机id
        std::vector<int> _offline;      // 所有离线的主机id
        std::mutex _mtx;                // 保证LoadBlance它的数据安全
    };

    class Control
    {
    public:
        bool AllQuestions(std::string *html)
        {
            std::vector<Question> all;
            if(_model.GetAllQuestions(&all))
            {
                sort(all.begin(), all.end(), [](const Question& q1, const Question& q2){
                    return stoi(q1._number) < stoi(q2._number);
                });
                // 获取题目信息成功，将所有的题目数据构建成网页
                _view.AllExpandHtml(all, html);
            }
            else
            {
                *html = "获取题目失败, 形成题目列表失败";
                return false;
            }
            return true;
        }
        bool OneQuestion(const std::string &number, std::string *html)
        {   
            Question q;
            if(_model.GetOneQuestion(number, &q))
            {
                // 获取指定题目信息成功，将所有的题目数据构建成网页
                _view.OneExpandHtml(q, html);
            }
            else
            {
                *html =  "指定题目: " + number + " 不存在!";
                return false;
            }
            return true;
        }
        void Judge(const std::string& number, const std::string& in_json, std::string* out_json)
        {
            // 0. 根据题目编号，直接拿到对应的题目细节
            Question q;
            _model.GetOneQuestion(number, &q);

            // 1. in_json进行反序列化，得到题目的id，得到用户提交源代码，input
            Json::Value in_value;
            Json::Reader reader;
            reader.parse(in_json, in_value);

            // 2. 重新拼接用户代码+测试用例代码，形成新的代码
            Json::Value compile_value;
            compile_value["code"] = in_value["code"].asString() + "\n" + q._tail;
            compile_value["input"] = in_value["input"].asString();
            compile_value["cpu_limit"] = q._cpu_limit;
            compile_value["mem_limit"] = q._mem_limit;
            Json::FastWriter writer;
            std::string compile_string = writer.write(compile_value);

            // 3. 选择负载最低的主机(差错处理)
            // 规则: 一直选择，直到主机可用，否则，就是全部挂掉
            while(true)
            {
                int id = 0;
                Machine* m = nullptr;
                if(!_load_balance.SmartChoice(&id, &m)) break;

                // 4. 然后发起http请求，得到结果
                Client cli(m->_ip, m->_port);
                m->IncLoad();
                logMessage(NORMAL, "选择主机成功, 主机id: %d, 详情: %s:%d, 当前主机的负载是: %d...", id, m->_ip.c_str(), m->_port, m->Load());
                if(auto res = cli.Post("/compile_and_run", compile_string, "application/json; charset=utf-8"))
                {
                    // 5. 将结果赋值给out_json
                    if(res->status == 200)
                    {
                        *out_json = res->body;
                        m->DecLoad();
                        logMessage(NORMAL, "请求编译和运行服务成功...");
                        break;
                    }
                    m->DecLoad();
                }
                else
                {
                    //请求失败
                    logMessage(ERROR, "当前请求的主机id: %d, 详情: %s:%d 可能已经离线...", id, m->_ip, m->_port);
                    _load_balance.OfflineMachine(id);
                    _load_balance.ShowMachines(); //仅仅是为了用来调试
                }
            }

        }
    private:
        Model _model;
        View _view;
        LoadBalance _load_balance;
    };
}

oj_server/oj_server.cc修改代码如下

int main()
{
    Server svr; //用户请求的服务路由功能

    Control ctrl;
    
    // 获取所有的题目列表
    svr.Get("/all_questions", [&ctrl](const Request& req, Response& res){
        std::string html;
        ctrl.AllQuestions(&html);
        //用户看到的是什么呢？？网页数据 + 拼上了题目相关的数据
        res.set_content(html, "text/html; charset=utf-8");
    });
    // 用户要根据题目编号，获取题目的内容
    // /question/100 -> 正则匹配
    // R"()", 原始字符串raw string,保持字符串内容的原貌，不用做相关的转义
    svr.Get(R"(/one_question/(\d+))", [&ctrl](const Request& req, Response& res){
        std::string number = req.matches[1]; // **********************
        std::string html;
        ctrl.OneQuestion(number, &html);
        res.set_content(html, "text/html; charset=utf-8");
    });
    // 用户提交代码，使用我们的判题功能(1. 每道题的测试用例 2. compile_and_run)
    svr.Post(R"(/judge/(\d+))", [&ctrl](const Request& req, Response& res){
        std::string number = req.matches[1];
        std::string result_json;
        ctrl.Judge(number, req.body, &result_json);
        res.set_content(result_json, "application/json; charset=utf-8");
    });

    svr.set_base_dir("./wwwroot");
    svr.listen("0.0.0.0", 8080);
    return 0;
}

3.2.5 使用Postman调试oj_server中的judge功能

在这里插入图片描述

其原因是因为先前oj_server/questions/1/tail.cpp遗留的问题
于是oj_server/oj_control.hpp中的Judge()拼接代码的时候变成如下
解决方法，在compile_server/compiler.hpp添加编译选项
于是，问题迎刃而解

3.3 设计完善的前端页面

oj_server/template_html/all_questions.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 : linear-gradient(rgb(207, 208, 210), rgb(235, 236, 237));
            /* 给父级标签设置overflow，取消后续float带来的影响 */
            overflow: hidden;
        }
        
        .container .navbar a {
            /* 设置a标签是行内块元素，允许你设置宽度 */
            display: inline-block;
            /* 设置a标签的宽度,a标签默认行内元素，无法设置宽度 */
            width: 80px;
            /* 设置字体颜色 */
            color: rgb(95, 93, 93);
            /* 设置字体的大小 */
            font-size: large;
            /* 设置文字的高度和导航栏一样的高度 */
            line-height: 50px;
            /* 去掉a标签的下划线 */
            text-decoration: none;
            /* 设置a标签中的文字居中 */
            text-align: center;
        }
        /* 设置鼠标事件 */
        
        .container .navbar a:hover {
            background : linear-gradient(rgb(244, 230, 210), rgb(272, 258, 237));
        }
        
        .container .navbar .login {
            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: large;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            margin-top: 50px;
            background-color: rgb(244, 244, 243);
        }
        
        .container .question_list h1 {
            color: green;
        }
        
        .container .question_list table .item_1 {
            width: 100px;
            height: 40px;
            font-size: large;
            color: rgb(7, 7, 7);
        }
        
        .container .question_list table .item_2{
            text-decoration: none;
            width: 100px;
            height: 40px;
            font-size: large;
            color: rgb(91, 90, 90);
        }
        .container .question_list table .item_2 a {
            text-decoration: none;
            width: 100px;
            height: 40px;
            font-size: large;
            color: rgb(91, 90, 90);
        }
        .container .question_list table .item_2 a:hover {
            color: rgb(228, 135, 20);
        }
        
        .container .footer {
            width: 100%;
            height: 50px;
            text-align: center;
            line-height: 50px;
            margin-top: 15px;
        }
        .container .footer a{
            text-decoration: none;
            color: #ccc;
        }
        .container .footer a:hover {
            color: rgb(228, 135, 20);
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 导航栏， 功能不实现-->
        <div class="navbar">
            <a href="/">首页</a>
            <a href="/all_questions">题库</a>
            <a href="https://tkp2elyahw.feishu.cn/share/base/view/shrcnQvCblWPxrqjz4HDzhyTnSb">2023秋招</a>
            <a class="login" href="./index2.html">登录</a>
        </div>
        <div class="question_list">
            <h1>OnlineJuge题目列表</h1>
            <table class = item>
                <tr>
                    <th class="item_1">编号</th>
                    <th class="item_1">标题</th>
                    <th class="item_1">难度</th>
                </tr>
                {{#question_list}}
                <tr>
                    <td class="item_2">{{number}}</td>
                    <td class="item_2"><a href="/one_question/{{number}}">{{title}}</a></td>
                    <td class="item_2">{{star}}</td>
                </tr>
                {{/question_list}}
            </table>
        </div>
        <div class="footer">
            <!-- <hr> -->
            <h4><a href="https://blog.csdn.net/m0_64332384?spm=1000.2115.3001.5343">@CGod</a></h4>
        </div>
    </div>

</body>

</html>

oj_server/template_html/one_question.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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/ext-language_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 : linear-gradient(rgb(207, 208, 210), rgb(235, 236, 237));
            /* 给父级标签设置overflow，取消后续float带来的影响 */
            overflow: hidden;
        }
        
        .container .navbar a {
            /* 设置a标签是行内块元素，允许你设置宽度 */
            display: inline-block;
            /* 设置a标签的宽度,a标签默认行内元素，无法设置宽度 */
            width: 80px;
            /* 设置字体颜色 */
            color: rgb(95, 93, 93);
            /* 设置字体的大小 */
            font-size: large;
            /* 设置文字的高度和导航栏一样的高度 */
            line-height: 50px;
            /* 去掉a标签的下划线 */
            text-decoration: none;
            /* 设置a标签中的文字居中 */
            text-align: center;
        }
        /* 设置鼠标事件 */
        
        .container .navbar a:hover {
            background : linear-gradient(rgb(244, 230, 210), rgb(272, 258, 237));
        }
        
        .container .navbar .login {
            float: right;
        }
        
        .container .part1 {
            width: 100%;
            height: 420px;
            overflow: hidden;
        }
        
        .container .part1 .left_desc {
            width: 50%;
            height: 420px;
            float: left;
            overflow: scroll;
        }
        
        .container .part1 .left_desc h3 {
            padding-top: 10px;
            padding-left: 10px;
        }
        
        .container .part1 .left_desc pre {
            padding-top: 10px;
            padding-left: 10px;
            font-size: medium;
            font-family:'Times New Roman', Times, serif
        }
        
        .container .part1 .right_code {
            width: 50%;
            float: right;
        }
        
        .container .part1 .right_code .ace_editor {
            height: 420px;
        }
        
        .container .part2 {
            width: 100%;
            overflow: hidden;
        }
        
        .container .part2 .result {
            width: 200px;
            float: left;
        }
        
        .container .part2 .btn-submit {
            width: 90px;
            height: 30px;
            font-size:small;    
            float: right;
            background-color: #26bb9c;
            color: #FFF;
            /* 给按钮带上圆角 */
            /* border-radius: 1ch; */
            border: 0px;
            margin-top: 10px;
            margin-right: 10px;
        }
        
        .container .part2 button:hover {
            color: rgb(228, 135, 20);
        }
        
        .container .part2 .result {
            margin-top: 15px;
            margin-left: 15px;
        }
        
        .container .part2 .result pre {
            font-size: large;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 导航栏， 功能不实现-->
        <div class="navbar">
            <a href="/">首页</a>
            <a href="/all_questions">题库</a>
            <a href="https://tkp2elyahw.feishu.cn/share/base/view/shrcnQvCblWPxrqjz4HDzhyTnSb">2023秋招</a>
            <a class="login" href="./index2.html">登录</a>
        </div>
        <!-- 左右呈现，题目描述和预设代码 -->
        <div class="part1">
            <div class="left_desc">
                <h3><span id="number">{{number}}</span>.{{title}}_{{star}}</h3>
                <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/idle_fingers");
        editor.session.setMode("ace/mode/c_cpp");

        // 字体大小
        editor.setFontSize(14);
        // 设置默认制表符的大小:
        editor.getSession().setTabSize(4);

        // 设置只读（true时只读，用于展示代码）
        editor.setReadOnly(false);

        // 启用提示菜单
        ace.require("ace/ext/language_tools");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
    </script>
</body>

</html>

3.4 前后端交互功能

3.4.1 在one_question.html编写前后端交互功能

引入jQuery

<!-- 引入jquery CDN -->
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

编写前后端交互逻辑

<script>
    function submit() {
        // 1. 收集当前页面的有关数据, 1. 题号 2.代码
        var code = editor.getSession().getValue();
        var number = $(".container .part1 .left_desc h3 #number").text();
        var judge_url = "/judge/" + number;
        // 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) {
                //成功得到结果
                show_result(data);
            }
        });
        // 3. 得到结果，解析并显示到 result中
        function show_result(data) {
            // 拿到result结果标签
            var result_div = $(".container .part2 .result");
            // 清空上一次的运行结果
            result_div.empty();

            // 首先拿到结果的状态码和原因结果
            var _status = data.status;
            var _reason = data.reason;

            var reason_lable = $("<p>", {
                text: _reason
            });
            reason_lable.appendTo(result_div);

            if (status == 0) {
                // 请求是成功的，编译运行过程没出问题，但是结果是否通过看测试用例的结果
                var _stdout = data.stdout;
                var _stderr = data.stderr;

                var stdout_lable = $("<pre>", {
                    text: _stdout
                });

                var stderr_lable = $("<pre>", {
                    text: _stderr
                })

                stdout_lable.appendTo(result_div);
                stderr_lable.appendTo(result_div);
            } else {
                // 编译运行出错,do nothing
            }
        }
    }
</script>

3.4.2 使用浏览器登录在线OJ服务

在这里插入图片描述

好啦，完美！

3.5 完善一键上线所有服务器的功能

3.5.1 补充必要的接口

oj_server/oj_control.hpp/class LoadBalance{};增加的接口
oj_server/oj_control.hpp/class Control{};增加的接口
oj_server/oj_server.cc增加的接口

3.5.2 使用Xshell检验一下

启动服务器
浏览器登录网页，疯狂点击提交代码，可以看到各主机的负载情况
此时Ctrl+C逐一挂掉各主机
此时重新启动编译服务之后，Ctrl+\发送信号SIGQUIT，使用一键上线功能

在这里插入图片描述

CGod

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
项目2 | 牛扣刷题平台

本项目实现一个类似 leetcode 的题目列表+在线编程功能的负载均衡式在线OJ服务项目核心是三个模块comm：公共模块compile_server：编译与运行模块oj_server：获取题目列表，查看题目编写题目界面，负载均衡，其他功能项目宏观结构编写思路oj_serverversion1 ——基于文件版的在线OJ前端的页面设计version2 ——基于 MySQL 版的在线OJ。
复制链接

扫一扫