【项目设计】基于MVC的负载均衡式的在线OJ

项目代码（可直接下载运行）

一、项目的相关背景

学习编程的小伙伴，大家对力扣、牛客或其他在线编程的网站一定都不陌生，这些编程网站除了提供了在线编程，还有其他的一些功能。我们这个项目只是做出能够在线编程的功能。

二、所用技术栈和开发环境

技术栈：

负载均衡设计、多进程、多线程

C++ STL 标准库、Boost 标准库(字符串切割)、cpp-httplib 第三方开源网络库、ctemplate 第三方开源前端网页渲染库、jsoncpp 第三方开源序列化反序列化库

Ace前端在线编辑器(了解)、html/css/js/jquery/ajax (了解)

开发环境：

Centos 7 云服务器、vscode

三、项目的宏观结构

客户端向服务器的oj_server发起请求，有可能是请求题目的列表、请求特定题目的编写、请求代码提交；对于请求题目列表和编写，只需要向文件或MySQL获取数据，并显示成网页即可，但是提交代码的时候，我们就要考虑多用户提交的情况，所以oj_server在收到不同客户端发来的提交代码的请求时，就需要负载均衡式的选择后端的complie_server进行编译并运行，然后反馈最终结果。

四、工具类的设计

对于客户提交过来的文件（如1234），我们需要对文件进行路径拼接，拼接出（1234.cpp、1234.exe、1234.compiler_error），其中./temp是对用户提交过来的文件名进行路径的拼接，形成三个文件的存放位置，这是编译时需要的三个临时文件，有了这三个临时文件后，我们就可以对用户的代码进行编译的操作了。

用户提交的代码，虽然经过编译器编译后，形成了可执行程序，但是对于代码的运行也需要三个临时文件（1234.stdin、1234.stdout、1234.stderr）这三个文件分别表示：1234.stdin：用户外部自测输入的参数（但是我们不考虑，直接使我们提供参数）1234.stdout：代表运行成功后的结果，我们不需要显示到显示器上，用文件保存起来，用于反馈给客户；1234.stderr：代表运行失败后的结果，我们不需要显示到显示器上，用文件保存起来，用于反馈给客户。

#pragma once
#include <iostream>
#include <string>
#include <atomic>
#include <fstream>
#include <sys/time.h>
#include <sys/types.h>
#include <sys/stat.h>
#include <boost/algorithm/string.hpp>
using namespace std;

class PathUtil
{
public:
    static string addPath(const string &path, const string &suffix)
    {
        string totalPath = "./temp/";
        totalPath += path;
        totalPath += suffix;
        return totalPath;
    }

    // 对文件进行路径拼接 1.cpp 1.exe 1.compile_error
    static string srcPath(const string &path)
    {
        return addPath(path, ".cpp");
    }

    static string exePath(const string &path)
    {
        return addPath(path, ".exe");
    }

    static string errPath(const string &path)
    {
        return addPath(path, ".compile_error");
    }

    // 代码的运行需要的三个临时的文件
    // 用户自行输入参数测试
    static string stdIn(const string &path)
    {
        return addPath(path, ".stdin");
    }

    // 运行成功后的结果，不需要显示到显示器上，用文件保存起来，用于反馈给客户
    static string stdOut(const string &path)
    {
        return addPath(path, ".stdout");
    }

    // 运行成功后的错误，不需要显示到显示器上，用文件保存起来，用于反馈给客户
    static string stdErr(const string &path)
    {
        return addPath(path, ".stderr");
    }
};

class TimeUtil
{
public:
    // 日志添加时间戳
    static string getTimeStamp()
    {
        struct timeval time;
        gettimeofday(&time, nullptr);
        return to_string(time.tv_sec);
    }

    // 为了保证文件的唯一性，使用毫秒级时间戳
    static string getTimeMs()
    {
        struct timeval time;
        gettimeofday(&time, nullptr);
        return to_string(time.tv_sec * 1000 + time.tv_usec / 1000);
    }
};

class FileUtil
{
public:
    static bool isExistFile(const string &filename)
    {
        struct stat st;
        if (stat(filename.c_str(), &st) == 0)
        {
            // 获取文件属性成功
            return true;
        }
        return false;
    }

    // 毫秒级时间戳+原子递增唯一值，保证文件名的唯一性
    static string uniqueFile()
    {
        atomic_uint id(0);
        id++;
        string ms = TimeUtil::getTimeMs();
        string uniq_id = to_string(id);
        return ms + "_" + uniq_id;
    }

    static bool writer(const string &target, const string &content)
    {
        ofstream ofs(target);
        if (!ofs.is_open())
        {
            return false;
        }
        ofs.write(content.c_str(), content.size());
        ofs.close();
        return true;
    }

    static bool reader(const string &target, string *content, bool flag)
    {
        ifstream ifs(target);
        if (!ifs.is_open())
        {
            return false;
        }
        (*content).clear();
        string line;
        // getline:不保存分隔符,但有些时候需要保留\n
        // getline:内部重载了强制类型转换
        while (getline(ifs, line))
        {
            (*content) += line;
            (*content) += (flag ? "\n" : "");
        }
        ifs.close();
        return true;
    }
};

class StringUtil
{
public:
    static void stringSpilt(const string &str, vector<string> *ret, const string spiltFlag)
    {
        // boost::split(type, select_list, boost::is_any_of(","), boost::token_compress_on);
        // (1)、type类型是std::vector<std::string>，用于存放切割之后的字符串
        // (2)、select_list：传入的字符串，可以为空。
        // (3)、boost::is_any_of(",")：设定切割符为,(逗号)
        // (4)、boost::algorithm::token_compress_on：将连续多个分隔符当一个，默认没有打开，当用的时候一般是要打开的。
        boost::split((*ret), str, boost::is_any_of(spiltFlag), boost::algorithm::token_compress_on);
    }
};

五、compile的代码设计

compile只负责代码的编译，要对代码进行编译，就需要有file_name（文件名）（如：1234.cpp）对代码进行编译，有可能成功，形成.exe文件，后续可以直接运行；也有可能失败，对于编译失败了的原因，也需要保存起来，用于反馈给用户，否则客户怎么知道错误在哪里。

#pragma once
#include <unistd.h>
#include <sys/wait.h>
#include <sys/types.h>
#include <sys/stat.h>
#include <fcntl.h>
#include "log.hpp"

class Compiler
{
public:
    static bool Compile(const string &path)
    {
        pid_t pid = fork();
        if (pid < 0)
        {
            LOG(ERROR) << "子进程创建失败"
                       << "\n";
            return false;
        }
        else if (pid == 0)
        {
            // 子进程
            umask(0); // 防止系统修改权限
            int fileId = open(PathUtil::errPath(path).c_str(), O_CREAT | O_WRONLY, 0644);
            if (fileId < 0)
            {
                LOG(WARNING) << "没有形成compile_error文件"
                             << "\n";
                exit(1);
            }
            dup2(fileId, 2); // 重定向标准错误到compile_error中

            // 进程程序替换 并不影响进程的文件描述符
            // 子进程执行 g++ -o 1.exe 1.cpp -std=c++11
            execlp("g++", "g++", "-o", PathUtil::exePath(path).c_str(), PathUtil::srcPath(path).c_str(), "-std=c++11", "-D", "COMPILER_ONLINE", nullptr);
            LOG(ERROR) << "启动编译器g++失败，可能是参数错误" << "\n";
            exit(2);
        }
        else
        {
            // 父进程
            waitpid(pid, nullptr, 0);
            // 编译成功，查看是否有可执行文件生成.exe
            if (FileUtil::isExistFile(PathUtil::exePath(path)))
            {
                LOG(INFO) << "编译成功，生成" << PathUtil::exePath(path) << "\n";
                return true;
            }
        }
        LOG(ERROR) << "编译失败，没有生成任何.exe文件" << "\n";
        return false;
    }
};

六、run的代码设计

我们已经完成的编译服务，相应的会在temp目录下形成三个临时文件，当然编译成功会形成.exe文件，失败会形成compiler_error文件不会形成.exe文件，相应的错误信息回报存在这个文件中。有了.exe文件后，我们接下来的工作就是对可执行程序进行运行了。

虽然已经基本完成了run，但是还是有缺陷的，我们常常在力扣或牛客上刷题时，明确标注了时间限制和内存限制。所以我们对资源的限制也需要做一些处理，我们这里只处理时间和内存上的限制。

#pragma once
#include <unistd.h>
#include <fcntl.h>
#include <sys/wait.h>
#include <sys/resource.h>
#include "log.hpp"

class Runner
{
public:
    // 设置进程占用资源大小
    static void setProcLimit(int cpu_limit, int mem_limit)
    {
        struct rlimit cpu;            // 调用setrlimit所需的结构体
        cpu.rlim_max = RLIM_INFINITY; // 硬约束 无穷
        cpu.rlim_cur = cpu_limit;     // 软约束 当前cpu能跑的时长
        setrlimit(RLIMIT_CPU, &cpu);

        struct rlimit mem;
        mem.rlim_max = RLIM_INFINITY;
        mem.rlim_cur = mem_limit * 1024; // 将单位字节转化为kb
        setrlimit(RLIMIT_AS, &mem);
    }

    // 只关心程序是否运行，并不关心结果是否正确
    // 返回值 >  0：程序异常了，退出时收到了信号，返回值就是对应的信号编号
    // 返回值 == 0：正常运行完毕了，结果保存到了对应的临时文件中
    // 返回值 <  0：内部错误
    static int Run(const string &path, int cpu_limit, int mem_limit)
    {
        string exe_path = PathUtil::exePath(path);
        string stdin_path = PathUtil::stdIn(path);
        string stdout_path = PathUtil::stdOut(path);
        string stderr_path = PathUtil::stdErr(path);

        umask(0);
        int inId = open(stdin_path.c_str(), O_CREAT | O_WRONLY, 0644);
        int outId = open(stdout_path.c_str(), O_CREAT | O_WRONLY, 0644);
        int errId = open(stderr_path.c_str(), O_CREAT | O_WRONLY, 0644);

        if (inId < 0 || outId < 0 || errId < 0)
        {
            LOG(ERROR) << "打开文件描述符失败" << "\n";
            return -1;
        }

        pid_t pid = fork();
        if (pid < 0)
        {
            LOG(ERROR) << "创建子进程失败" << "\n";
            close(inId);
            close(outId);
            close(errId);
            return -2; // 代表创建子进程失败
        }
        else if (pid == 0)
        {
            dup2(inId, 0);
            dup2(outId, 1);
            dup2(errId, 2);

            setProcLimit(cpu_limit, mem_limit);

            //       我要执行谁     我想在命令行上如何执行该程序
            execl(exe_path.c_str(), exe_path.c_str(), nullptr);
            exit(1);
        }
        else
        {
            close(inId);
            close(outId);
            close(errId);
            int status = 0;
            waitpid(pid, &status, 0);
            LOG(INFO) << "运行完毕, info" << (status & 0x7F) << "\n";
            return (status & 0x7F);
        }
    }
};

七、编译运行服务（compileRun）

编译和运行有了之后，我们将其整合到一起（编译运行服务）

在编译中，我们是根据用户传过来的文件名，先形成三个临时文件（1234.cpp、1234.exe、1234.compiler_error）然后对1234.cpp进行编译，形成1234.exe。

在运行中，我们是对1234.exe进行运行，形成三个临时文件（1234.stdin、1234.stdout、1234.stderr）

在编译运行过程中才是真正的接收用户传过来的数据信息，通过编译和运行的分别处理，完成用户的请求编译运行工作，这些数据信息是通过网络传输过来的，我们知道通过网络接收用户传过来json串，其中json串中应该包含如下：

in_json：
{
    code: “#include <iostream> ....int main(){...}”,
    input: "用户的输入（像牛客哪些）",
    cpu_limit: "1024",
    mem_limit: "30"
}

我们提供一个start函数，用于解析这个in_json串，将数据解析出来；然后将提取出来的代码写入到特定的文件中，但是存在多个用户提交代码，我们就需要保证每个文件的唯一性。

如何保证每个文件的唯一性呢？我们采用毫秒级时间戳+原子递增的唯一值来实现。

我们可以获取到唯一的文件后，我们将获取到的in_json串进行解析，提供路径拼接函数，形成唯一的源文件，将in_json中的代码写入到文件中（它保存在我们的temp目录下），然后进行编译工作，编译是通过创建子进程执行函数替换，其中所需的源文件和可执行程序文件都可以通过路径拼接来完成，最终形成可执行程序；紧接着就是去调用run进行程序的运行，也是通过路径拼接的方式找到文件，它的返回值是int（大于0：程序异常，退出时收到了信号，返回值就是对应的信号；小于0：内部错误，子进程创建失败；等于0：正常运行完毕，结果保存到对应的临时文件中）。我们可以通过这个返回值来进行判断程序运行的结果，并自行设置状态码，将状态码对应到不同的信息，我们可以通过实现一个CodeToDesc函数。当然，在temp目录下会不断的形成临时文件，我们需要做个清理工作。

#pragma once
#include <jsoncpp/json/json.h>
#include <sstream>
#include <memory>
#include "run.hpp"
#include "compile.hpp"

class CompileRun
{
public:
    // code > 0：进程收到了信号导致异常崩溃
    // code < 0：整个过程非运行报错（代码为空，编译报错等）
    // code = 0：整个过程全部完成
    // 将错误代码转为描述（CodeToDesc()）
    static string codeToDesc(int code, const string &filename)
    {
        string ret;
        switch (code)
        {
        case 0:
            ret = "编译成功";
            break;
        case -1:
            ret = "提交代码为空";
            break;
        case -2:
            ret = "未知错误";
            break;
        case -3:
            FileUtil::reader(PathUtil::errPath(filename), &ret, true); // 编译错误
            break;
        case SIGABRT:
            ret = "内存超出";
            break;
        case SIGXCPU:
            ret = "CPU使用超时";
            break;
        case SIGFPE:
            ret = "浮点数溢出";
            break;
        default:
            ret = "未知错误码" + to_string(code);
            break;
        }
        return ret;
    }

    // 删除临时文件  清理temp目录下的临时文件
    static void removeTempFile(const string &filename)
    {
        if (FileUtil::isExistFile(PathUtil::srcPath(filename)))
        {
            unlink(PathUtil::srcPath(filename).c_str());
            // unlink函数：是Linux下删除特定文件的一个函数，参数是字符串形式
        }

        if (FileUtil::isExistFile(PathUtil::exePath(filename)))
        {
            unlink(PathUtil::exePath(filename).c_str());
        }

        if (FileUtil::isExistFile(PathUtil::errPath(filename)))
        {
            unlink(PathUtil::errPath(filename).c_str());
        }

        if (FileUtil::isExistFile(PathUtil::stdIn(filename)))
        {
            unlink(PathUtil::stdIn(filename).c_str());
        }

        if (FileUtil::isExistFile(PathUtil::stdOut(filename)))
        {
            unlink(PathUtil::stdOut(filename).c_str());
        }

        if (FileUtil::isExistFile(PathUtil::stdErr(filename)))
        {
            unlink(PathUtil::stdErr(filename).c_str());
        }
    }

    /*
     * 输入：
     *      code：用户提交的代码
     *      input：用户给自己提交代码对应的输入，不做处理
     *      cpu_limit：时间要求
     *      mem_limit：空间要求
     *
     * 输出：
     * 必填字段：
     *      status：状态码
     *      reason：请求结果
     * 选填字段：
     *      stdout：程序运行完的结果
     *      stderr：程序运行完的错误结果
     * */

    /*
     * start函数功能:
     *      通过网络接收用户传过来的json串（in_json），其中in_json包含如下：
     *          in_json：
     *          {
     *              code: “#include <iostream> ....int main(){...}”,
     *              input: "用户的输入（像牛客哪些）",
     *              cpu_limit: "1024",
     *              mem_limit: "30"
     *          }
     *       start函数去解析这个in_json串，将数据取出来；
     *       然后将提取出来的代码写入到特定的文件中，因为存在多个用户提交代码，所以需要保证每个文件的唯一性；
     * */

    static void start(const string &in_json, string *out_json)
    {
        // 反序列化
        Json::Value inRoot;
        Json::CharReaderBuilder crb;
        unique_ptr<Json::CharReader> cr(crb.newCharReader());
        string error;
        cr->parse(in_json.c_str(), in_json.c_str() + in_json.size(), &inRoot, &error);
        string code = inRoot["code"].asString();
        string input = inRoot["input"].asString();
        int cpu_limit = inRoot["cpu_limit"].asInt();
        int mem_limit = inRoot["mem_limit"].asInt();

        // 在goto之间定义的变量是不允许的，所以提前定义
        int status_code = 0;  // 状态码
        int run_result = 0;   // run运行返回值
        string filename = ""; // 需要内部形成唯一文件名

        Json::Value outRoot;

        if (code.size() == 0) // 提交代码为空
        {
            status_code = -1;
            goto END;
        }

        // 给每一个用户的每一次提交生成唯一的文件src
        filename = FileUtil::uniqueFile();

        // 生成.cpp文件
        if (!FileUtil::writer(PathUtil::srcPath(filename), code))
        {
            status_code = -2; // 未知错误
            goto END;
        }
        // 编译 .cpp->.exe
        if (!Compiler::Compile(filename))
        {
            status_code = -3; // 编译错误
            goto END;
        }
        // 运行可执行文件.exe
        run_result = Runner::Run(filename, cpu_limit, mem_limit);
        if (run_result < 0)
        {
            status_code = -2;
            goto END;
        }
        else if (run_result > 0)
        {
            status_code = run_result; // 程序运行崩溃了(源于某种信号)
        }
        else
        {
            status_code = 0; // 运行成功
        }

    END:
        outRoot["status"] = status_code;
        outRoot["reason"] = codeToDesc(status_code, filename);

        // 如果运行成功，输出运行结果
        if (status_code == 0)
        {
            string out;
            FileUtil::reader(PathUtil::stdOut(filename), &out, true);
            outRoot["stdout"] = out;

            string err;
            FileUtil::reader(PathUtil::stdErr(filename), &err, true);
            outRoot["stderr"] = err;
        }

        // 序列化
        Json::StreamWriterBuilder swb;
        unique_ptr<Json::StreamWriter> sw(swb.newStreamWriter());
        stringstream ss;
        sw->write(outRoot, &ss);
        *out_json = ss.str();

        removeTempFile(filename);
    }
};

八、打包成网络服务（编译运行代码的测试）

#include "compileRun.hpp"
#include "./cpp-httplib/httplib.h"

void Usage(string proc)
{
    cerr << "Usage: "
         << "\n\t" << proc << endl;
}

// 这里是测试代码
int main(int argc, char *argv[])
{
    // in_json:
    // {
    //     "code" : "#include...", "input" : " ", "cpu_limit" : 1, "mem_limit" : 10240
    // }
    // out_json:
    // {
    //     "status" : "0", "reason" : "", "stdout" : "", "stderr" : ""
    // }
    // 通过http让client给我们上传一个json string
    // 下面的工作，充当客户端请求的json串
    
    // std::string in_json;
    // Json::Value in_value;
    // in_value["code"] = R"(#include <iostream>
    //     int main(){
    //         std::cout << "你可以看见我了" << std::endl;
    //         return 0;
    // })";
    // in_value["input"] = "";
    // in_value["cpu_limit"] = 1;
    // in_value["mem_limit"] = 10240 * 3;

    // Json::FastWriter writer;
    // in_json = writer.write(in_value);
    // std::cout << in_json << std::endl;

    // std::string out_json; // 这个是将来给客户返回的json串
    // CompileRun::start(in_json, &out_json);
    // std::cout << out_json << std::endl;

    // ./compile_server port
    if (argc != 2)
    {
        Usage(argv[0]);
        return 1;
    }
    httplib::Server ser;
    ser.Post("/compileAndRun", [](const httplib::Request &req, httplib::Response &resp)
             {
                 string inJson = req.body;
                 string outJson;
                 if (!inJson.empty())
                 {
                     CompileRun::start(inJson, &outJson);
                    resp.set_content(outJson,"application/json;charset=utf-8");
                 } });
    ser.listen("0.0.0.0", atoi(argv[1]));
}

九、基于MVC结构的设计

1. 什么是MVC结构

经典MVC模式中，M是指业务模型，V是指用户界面（视图），C则是控制器，使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式。其中，View的定义比较清晰，就是用户界面。

M：model表示的是模型，代表业务规则。在MVC的三个部件中，模型拥有最多的处理任务，被模型返回的数据是中立的，模型与数据格式无关，这样一个模型就能够为多个视图提供数据，由于应用于模型的代码只需要写一次就可以被多个视图重用，所以减少了代码的重复性。

V：view表示的视图，代表用户看到并与之交互的界面。在视图中没有真正的处理发生，它只是作为一种输出数据并允许用户操作的方式。

C：controller表示的是控制器，控制器接收用户的输入并调用模型（M）和视图（V）去完成用户需求。控制器本身不输出任何东西和任何处理。它只接收请求并决定调用哪个模型构建去处理请求，然后再确定用哪个视图来显示返回的数据。

2. Model

题目应该包含如下的信息：

题目的编号（1）

题目的标题（求最大值）

题目的难度（简单、中等、困难）

题目的时间要求（1s）

题目的空间要求（30000KB）

题目的描述（给定一个数组，求最大值）

题目预设给用户在线编辑的代码（#include<iostream>...）

题目的测试用例

新增一个目录questions，用来存放我们的题库，这个questions目录下包含题目列表（文件形式）和每个题目的文件夹（其中又包含题目的描述、题目预设给用户在线编辑的代码header和题目的测试用例tail）

#pragma once
#include <iostream>
#include <fstream>
#include <vector>
#include <unordered_map>
#include <string>
#include "log.hpp"
using namespace std;

struct Question
{
    string number;    // 题目编号
    string title;     // 题目标题
    string star;      // 题目难度
    int cpu_limit;    // 时间要求
    int mem_limit;    // 内存要求
    string desc;      // 题目描述
    string head_code; // 预设在线编辑的代码
    string test_code; // 测试用例
};

const string questionsPath = "./questions/";
const string questionListPath = "./questions/question.list";

class Model
{
private:
    unordered_map<string, Question> Questions;

public:
    Model()
    {
        LoadQuestion(questionListPath);
    }

    bool LoadQuestion(const string &path)
    {
        ifstream ifs(path);
        if (!ifs.is_open())
        {
            LOG(FATAL) << "加载题库失败，请检查是否存在题库文件" << endl;
            return false;
        }
        string line;
        while (getline(ifs, line))
        {
            vector<string> q;
            StringUtil::stringSpilt(line, &q, " ");
            if (q.size() != 5)
            {
                LOG(WARNING) << "加载部分题目失败，请检查题目格式" << endl;
                continue;
            }
            Question ques;
            ques.number = q[0];
            ques.desc = q[1];
            ques.star = q[2];
            ques.cpu_limit = atoi(q[3].c_str());
            ques.mem_limit = atoi(q[4].c_str());

            string qPath = questionsPath;
            qPath += q[0];
            qPath += "/";
            FileUtil::reader(PathUtil::addPath(qPath, "desc.txt"), &(ques.desc), true);
            FileUtil::reader(PathUtil::addPath(qPath, "header.cpp"), &(ques.head_code), true);
            FileUtil::reader(PathUtil::addPath(qPath, "tail.cpp"), &(ques.test_code), true);

            Questions.insert({ques.number, ques});
        }
        LOG(INFO) << "加载题库......成功" << endl;
        ifs.close();
        return true;
    }

    bool getAllQuestions(vector<Question> *questions)
    {
        if (Questions.empty())
        {
            LOG(ERROR) << "用户获取题库失败" << endl;
            return false;
        }
        for (const auto &e : Questions)
        {
            (*questions).push_back(e.second);
        }
        return true;
    }

    bool getOneQuestion(const string &id, Question *question)
    {
        auto iter = Questions.find(id);
        if (iter == Questions.end())
        {
            LOG(ERROR) << "用户获取指定题目失败" << endl;
            return false;
        }
        *question = iter->second;
        return true;
    }
};

3. View

将model中的数据进行渲染构建出网页，所以我们需要引入一个第三方库ctemplate。

#pragma once
#include <ctemplate/template.h>
#include "ojModel.hpp"

const string template_html = "./template_html/";

class View
{
public:
    // 所有题目的网页
    void AllExpendHtml(const vector<Question> &questions, string *html)
    {
        // 题目编号 标题 难度 推荐使用表格

        // 形成路径
        string src_html = template_html + "all_questions.html";

        // 形成数据字典
        ctemplate::TemplateDictionary root("all_questions.html");
        for (const auto &q : questions)
        {
            ctemplate::TemplateDictionary *td = root.AddSectionDictionary("question_list");
            td->SetValue("number", q.number);
            td->SetValue("title", q.title);
            td->SetValue("star", q.star);
        }

        // 获取被渲染的网页
        ctemplate::Template *t = ctemplate::Template::GetTemplate(src_html, ctemplate::DO_NOT_STRIP);

        // 开始渲染
        t->Expand(html, &root);
    }

    // 一道题目的网页
    void OneExpendHtml(const Question &question, string *html)
    {
        string src_html = template_html + "one_question.html";
        ctemplate::TemplateDictionary root("one_question.html");
        root.SetValue("number", question.number);
        root.SetValue("title", question.title);
        root.SetValue("star", question.star);
        root.SetValue("desc", question.desc);
        root.SetValue("pre_code", question.head_code);
        ctemplate::Template *t = ctemplate::Template::GetTemplate(src_html, ctemplate::DO_NOT_STRIP);
        t->Expand(html, &root);
    }
};

4. Control

通过获取用户的输入调用不同的模型构建view。但是我们还需要完成负载均衡的概念，因为在后端进行编译服务的时候，如果只提供一台主机，当用户请求比较多或主机挂了，会影响用户体验。

#pragma once
#include <mutex>
#include <jsoncpp/json/json.h>
#include <sstream>
#include "./cpp-httplib/httplib.h"
#include "ojView.hpp"
#include "ojModel.hpp"

class Machine
{
public:
    string ip;     // 编译服务的ip
    int port;      // 编译服务的port
    uint64_t load; // 编译服务的负载数量
    mutex *mtx;    // c++中mutex是禁止拷贝的，所以使用指针

public:
    Machine() : ip(""), port(0), load(0), mtx(nullptr) {}

    void incrLoad()
    {
        if (mtx)
            mtx->lock();
        load++;
        if (mtx)
            mtx->unlock();
    }

    void descLoad()
    {
        if (mtx)
            mtx->lock();
        load--;
        if (mtx)
            mtx->unlock();
    }

    void clearLoad()
    {
        if (mtx)
            mtx->lock();
        load = 0;
        if (mtx)
            mtx->unlock();
    }

    uint64_t getLoad()
    {
        uint64_t l = 0;
        if (mtx)
            mtx->lock();
        l = load;
        if (mtx)
            mtx->unlock();
        return l;
    }
};

const string confPath = "./conf/service_machine.conf";

class LoadBlance
{
private:
    vector<Machine> machines; // 所有主机的集合 下标就是主机的id
    vector<int> online;       // 在线主机的id
    vector<int> offline;      // 离线主机的id
    mutex mtx;

public:
    LoadBlance()
    {
        Load(confPath);
        LOG(INFO) << "加载" << confPath << "完成" << endl;
    }

    bool Load(const string &path)
    {
        ifstream ifs(path);
        if (!ifs.is_open())
        {
            LOG(FATAL) << "加载" << path << "失败" << endl;
            return false;
        }
        string line;
        while (getline(ifs, line))
        {
            vector<string> ret;
            StringUtil::stringSpilt(line, &ret, ":");
            if (ret.size() != 2)
            {
                LOG(WARNING) << "切分失败" << endl;
                return false;
            }
            Machine m;
            m.ip = ret[0];
            m.port = atoi(ret[1].c_str());
            m.load = 0;
            m.mtx = new mutex();

            online.push_back(machines.size());
            machines.push_back(m);
        }
        ifs.close();
        return true;
    }

    // Machine **m 使用双重指针的原因是为了能够通过指针间接地修改指向的对象，即Machine对象的地址。
    bool SmartChoice(int *id, Machine **m)
    {
        mtx.lock();
        // 负载均衡：随机数算法、轮询+随机算法
        int num = online.size();
        if (num == 0)
        {
            mtx.unlock();
            LOG(WARNING) << "所有主机都离线了，请运维人员迅速查看" << endl;
            return false;
        }
        *id = online[0];
        *m = &machines[online[0]];
        uint64_t min_load = machines[online[0]].load;
        for (int i = 1; i < online.size(); i++)
        {
            uint64_t cur_load = machines[online[i]].load;
            if (cur_load < min_load)
            {
                min_load = cur_load;
                *id = online[i];
                *m = &machines[online[i]];
            }
        }
        mtx.unlock();
        return true;
    }

    // 离线主机
    void offlineMachine(int which)
    {
        mtx.lock();
        for (auto iter = online.begin(); iter != online.end(); iter++)
        {
            if (*iter == which)
            {
                machines[which].clearLoad();
                online.erase(iter);
                offline.push_back(which);
                break; // 因为有break存在，所以不需要考虑迭代器失效问题
            }
        }
        mtx.unlock();
    }

    // 上线主机
    void onlineMachine()
    {
        // 当所有主机已离线时，统一上线所有主机
        mtx.lock();
        online.insert(online.end(), offline.begin(), offline.end());
        offline.erase(offline.begin(), offline.end());
        mtx.unlock();
        LOG(INFO) << "所有离线主机已上线" << endl;
    }

    void showMachine()
    {
        mtx.lock();
        // 当前在线主机id
        cout << "当前在线主机id列表:" << endl;
        for (auto e : online)
        {
            cout << e << " , ";
        }
        cout << endl;
        cout << "当前离线主机id列表:" << endl;
        for (auto e : offline)
        {
            cout << e << " , ";
        }
        mtx.unlock();
    }
};

class Control
{
private:
    Model model;
    View view;
    LoadBlance loadBlance;

public:
    void RecoveryMachine()
    {
        loadBlance.onlineMachine();
    }

    bool AllQusetions(string *html)
    {
        bool ret = true;
        vector<Question> q;
        if (model.getAllQuestions(&q))
        {
            sort(q.begin(), q.end(), [](const Question &q1, const Question &q2)
                 { return atoi(q1.number.c_str()) < atoi(q2.number.c_str()); });
            view.AllExpendHtml(q, html);
        }
        else
        {
            *html = "获取题目失败，形成题目列表失败";
            ret = false;
        }
        return ret;
    }

    bool OneQusetion(const string &id, string *html)
    {
        bool ret = true;
        Question q;
        if (model.getOneQuestion(id, &q))
        {
            view.OneExpendHtml(q, html);
        }
        else
        {
            *html = "获取指定题目" + id + "失败";
            ret = false;
        }
        return ret;
    }

    void Judge(const string &id, const string &inJson, string *outJson)
    {
        Question q;
        model.getOneQuestion(id, &q);
        Json::CharReaderBuilder crb;
        unique_ptr<Json::CharReader> cr(crb.newCharReader());
        Json::Value inRoot;
        cr->parse(inJson.c_str(), inJson.c_str() + inJson.size(), &inRoot, nullptr);
        string code = inRoot["code"].asString();

        Json::Value compileRoot;
        compileRoot["input"] = inRoot["input"].asString();
        compileRoot["code"] = code + "\n" + q.test_code;
        compileRoot["cpu_limit"] = q.cpu_limit;
        compileRoot["mem_limit"] = q.mem_limit;

        Json::StreamWriterBuilder swb;
        unique_ptr<Json::StreamWriter> sw(swb.newStreamWriter());
        stringstream ss;
        sw->write(compileRoot, &ss);
        string compileString = ss.str();

        // 选择负载最低的主机
        // 一直选择，直到找到主机，否则全部挂掉
        while (true)
        {
            int id = 0;
            Machine *m;
            if (!loadBlance.SmartChoice(&id, &m))
            {
                break;
            }
            // 客户端发起http请求，得到结果
            httplib::Client cli(m->ip, m->port);
            m->incrLoad();
            LOG(INFO) << " 选择主机成功，主机id：" << id << " 详情：" << m->ip << ":" << m->port << "当前主机的负载是：" << m->getLoad() << "\n";
            if (auto resp = cli.Post("/compile_and_run", compileString, "application/json;charset=utf-8"))
            {
                if (resp->status == 200)
                {
                    *outJson = resp->body;
                    m->descLoad();
                    LOG(INFO) << " 请求编译和运行服务成功......"
                              << "\n";
                    break;
                }
                else
                {
                    // 请求失败
                    LOG(ERROR) << " 选择当前请求的主机的id：" << id << " 详情：" << m->ip << ":" << m->port << " 可能已经离线"
                               << "\n";
                    loadBlance.offlineMachine(id);
                    loadBlance.showMachine();
                }
            }
        }
    }
};

5. 打包成网络服务（ojServer）

#include <signal.h>
#include "ojControl.hpp"

static Control *con_ptr;

void Recovery(int signo)
{
    con_ptr->RecoveryMachine();
}

int main()
{
    signal(SIGQUIT, Recovery);
    httplib::Server ser;

    Control control;
    con_ptr = &control;

    // 获取所有题目内容
    ser.Get("/all_questions", [&control](const httplib::Request &req, httplib::Response &resp)
            { 
                string html; 
                // 返回一张包含所有题目的html网页
                control.AllQusetions(&html);
                // 用户看到的是什么？网页数据+拼上了题目相关的数据  
                resp.set_content(html,"text/html;charset=utf-8"); });

    // 用户要根据题目编号，获取题目内容
    ser.Get(R"(/question/(\d+))", [&control](const httplib::Request &req, httplib::Response &resp)
            {
                string html;
                string id = req.matches[1];
                control.OneQusetion(id, &html);
                resp.set_content(html,"text/html;charset=utf-8"); });

    ser.Post("/judge/(\\d++)", [&control](const httplib::Request &req, httplib::Response &resp)
             {
            string id = req.matches[1];
            string result;
            control.Judge(id,req.body,&result);
            resp.set_content(resp.body,"application/json;charset=utf-8"); });

    ser.set_base_dir("./wwwroot");

    ser.listen("0.0.0.0", 8080);
}

十、前端页面的设计

1. indx.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-color:black;
            /* 给父级标签overflow，取消后续float带来的影响 */
            overflow: hidden;
        }
        .container .navbar a{
            /* 设置a标签是行内块元素，允许你设置宽度*/
            display: inline-block;
            /* 设置a标签的宽度，默认a标签是行内元素，无法设置宽度*/
            width: 80px;
            /* 设置字体的颜色 */
            color: white;
            /* 设置字体的大小 */
            font-size: large;
            /* 设置文字的高度和导航栏一样的高度 */
            line-height: 50px;
            /* 去掉a标签的下划线 */
            text-decoration: none;
            /* 设置a标签的文字居中 */
            text-align: center;
        }
        /* 设置鼠标事件 */
        .container .navbar a:hover{
            background-color:green;
        }
        /* 设置浮动 */
        .container .navbar .login{
            float:right;
        }
        .container .content {
            /* 设置标签的宽度 */
            width: 800px;
            /* background-color: #ccc; */
            /* 整体居中 */
            margin: 0px auto;
            /* 设置文字居中 */
            text-align: center;
            /* 设置上外边距 */
            margin-top: 200px;
        }
 
        .container .content .front_ {
            /* 设置标签为块级元素，独占一行，可以设置高度宽度等属性 */
            display: block;
            /* 设置每个文字的上外边距 */
            margin-top: 20px;
            /* 去掉a标签的下划线 */
            text-decoration: none;
        }
    </style>
</head>
 
<!-- <body background="C:\Users\MLG\Desktop\壁纸.jpg"> -->
 
<body background="./壁纸.jpg">
<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="login" href="#">登录</a>
    </div>
    <!--网页的内容-->
    <div class="content">
        <h1 class="front_">欢迎来到我的Online_Judge平台</h1>
        <a class="front_" href="/all_questions">点击我开始编程啦！</a>
    </div>
</div>
</body>
 
</html>

2. all_questions.html

当用户获取题目列表的时候显示的网页

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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标签的宽度，默认a标签是行内元素，无法设置宽度*/
            width: 80px;
            /* 设置字体的颜色 */
            color: white;
            /* 设置字体的大小 */
            font-size: large;
            /* 设置文字的高度和导航栏一样的高度 */
            line-height: 50px;
            /* 去掉a标签的下划线 */
            text-decoration: none;
            /* 设置a标签的文字居中 */
            text-align: center;
        }
 
        /* 设置鼠标事件 */
        .container .navbar a:hover {
            background-color: green;
        }
 
        .container .navbar .login{
            float: right;
        }
 
        .container .question_list {
            padding-top: 50px;
            width: 800px;
            height: 600px;
            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: #c6cbcc;
        }
        .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;
            text-decoration: underline;
        }
 
    </style>
</head>
 
<body>
<div class="container">
    <div class="navbar">
        <!--导航栏-->
        <div class="navbar">
            <a href="/">首页</a>
            <a href="/all_questions">题库</a>
            <a href="#">竞赛</a>
            <a href="#">讨论</a>
            <a href="#">求职</a>
            <a class="login" href="#">登录</a>
        </div>
    </div>
    <div class="question_list">
        <h1>Online_Judge题目列表</h1>
        <table>
            <tr>
                <th class="item">编号</th>
                <th class="item">标题</th>
                <th class="item">难度</th>
            </tr>
            {{#question_list}}
            <tr>
                <td class="item">{{number}}</td>
                <td class="item"><a href="/question/{{number}}">{{title}}</a></td>
                <td class="item">{{star}}</td>
            </tr>
            {{/question_list}}
        </table>
    </div>
 
</div>
 
</body>
 
</html>

3. one_question.html

当用户获取单道题目所显示的网页

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{number}}.{{title}}</title>
    <!-- 引入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>
    <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标签的宽度，默认a标签是行内元素，无法设置宽度*/
            width: 80px;
            /* 设置字体的颜色 */
            color: white;
            /* 设置字体的大小 */
            font-size: large;
            /* 设置文字的高度和导航栏一样的高度 */
            line-height: 50px;
            /* 去掉a标签的下划线 */
            text-decoration: none;
            /* 设置a标签的文字居中 */
            text-align: center;
        }
 
        /* 设置鼠标事件 */
        .container .navbar a:hover {
            background-color: green;
        }
 
        .container .navbar .login {
            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 h3 {
            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: 100px;
            height: 30px;
            margin-top: 1px;
            margin-right: 1px;
            font-size: large;
            float: right;
            background-color: #26bb9c;
            color: #FFF;
            border-radius: 1ch;
            /* 给按钮带圆角*/
            border: 0px;
        }
 
        .container .part2 button:hover {
            color: green;
        }
        .container .part2 .result{
            margin-top: 15px;
            margin-left: 15px;
        }
        .container .part2 .result pre{
            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="login" href="#">登录</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/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() {
        // 1. 收集当前页面的有关数据：1.题号 2.代码我们采用JQuery
        // console.log("哈哈！");
        var code = editor.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. 构建json，并向后台发起基于http的json请求
        $.ajax({
            method: 'Post',    //向后端发起请求的方式（post、get）
            url: judge_url,    //向后端指定的url发起请求
            dataType: 'json',  //告知server，我们需要什么格式
            contentType: 'application/json;charset=utf-8', //告知server我给你的是什么格式
            data: JSON.stringify({
                'code': code,
                'input': ''
            }),
            success: function (data) {
                //成功得到结果
                //console.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 reson_lable = $("<p>",{
                text: _reason
            });
            reson_lable.appendTo(result_div);
            if (status == 0) {
                // 请求是成功的，编译运行没出问题，但是结果是否通过看测试用例的结果
                var _stdout = data.stdout;
                var _stderr = data.stderr;
                var reson_lable = $("<p>",{
                    text: _reason
                });
                var stdout_lable = $("<pre>",{
                    text: _stdout
                });
                var stderr_lable = $("<pre>",{
                    text: _stderr
                });
                stdout_lable.appendTo(result_div);
                stderr_lable.appendTo(result_div);
            } else {
 
            }
        }
    }
</script>
</body>
 
</html>