• 实战项目: 负载均衡

    0. 前言

    这个项目使用了前后端,实现一个丐版的LeetCode刷题网站,并根据每台主机的实际情况,选择对应的主机,负载均衡的调度 

    0.1 所用技术与开发环境

    所用技术:  

    • C++ STL 标准库
    • Boost 准标准库 ( 字符串切割 )
    • cpp- httplib 第三方开源网络库
    • ctemplate 第三方开源前端网页渲染库
    • jsoncpp 第三方开源序列化、反序列化库
    • 负载均衡设计
    • 多进程、多线程
    • MySQL C connect
    • Ace前端在线编辑器 ( 部分 )
    • html/css/js/jquery/ajax (部分 )
    开发环境:  Centos 7 云服务器, vscode,  Mysql Workbench

    0.2 建立目录及文件

    0.3 项目宏观结构

    • 具体的功能类似 leetcode 的题目列表+在线编程功能 

    1. compile 服务设计

    •  由于compiler这个模块管理的是编译与运行,则可以先直接就创建所需要的文件

    1.0 书写makefile文件 

    •   随着后续代码的跟进,并不断引入第三方库,这里还会新增编译选项

    1.1 compiler_server

    1.1.0 编译功能(compiler.hpp)

    •  在编译的时候,无非存在2种情况,a)要么通过,b)要么不通过
    • 要确定编译通过:
      只需要确定是否生成对应的.exe文件
    • 要当编译出错的时候(stderr):
      需要将出错信息,重定向到一个临时文件中,保存编译出错的结果
      还需要调用fork();子进程完成编译工作
      父进程继续执行

    •  由于需要频繁的文件名转换,所以在comm模块中,新建util.hpp文件并将文件名转换的函数放在一起

     

    • 还有后面判断编译成功生成的可执行程序,虽然可以直接暴力的打开文件判断是否存在,但这里使用stat函数会好一些
    • stat结构体会记录文件的各种信息

    •  注意: 程序替换是不会影响进程的文件符描述符表的

    1.1.1 日志模块(log.hpp)

    由于一般日志都会带上时间, 这里还需要实现一个得到当前时间的函数,则我又在util.hpp把得到时间函数的类封装成了一个类

     

    由于会频繁的调用日志进行打印信息,也为了更简便的调用,我进行了以下处理

     

    • 如果在宏定义中使用#，那么这个宏就被称为带有字符串化操作的宏。这种宏可以将其参数转换成字符串常量，并在预处理阶段进行替换。 

    由于引入了日志,则就可以把之前所有的输出信息,换成日志输出 

    1.1.2 测试编译模块 

    •  Compile的参数是文件名,它内部会自动拼接
    • 我们还需要再./temp中创建一个code.cpp文件

    •  上面我的代码有一个错误,在编译成功的时候,并没有return,导致LOG日志打印有问题

    •  要是我们的源文件有问题,错误信息就会重定向到 文件.compile_error中
    • 在测试的时候,还需要把 文件.exe 文件.compile_error文件删除,就是上次生成的文件

    1.1.3 运行功能(runner.hpp) 

    程序运行: 1)代码跑完,结果正确 2)代码跑完,结果不正确, 3)代码没跑完,异常了

    程序结果是否正确,是由oj_server中的测试用例决定的,则run模块只考虑是否正确运行完毕

    1. #include 
    2. #include 
    3. #include 
    4. #include 
    5. #include 
    6. #include // fork接口需要
    7.  
    8. #include "../comm/log.hpp"
    9. #include "../comm/util.hpp"
    10. namespace ns_runner
    11. {
    12.  
    13.     using namespace ns_util;
    14.     using namespace ns_log;
    15.     class Runner
    16.     {
    17.     public:
    18.         Runner(){}
    19.         ~Runner(){}
    20.         static int Run(const std::string &file_name){
    21.             std::string _execute = PathUtil::Exe(file_name);// 可执行
    22.             std::string _stdin = PathUtil::Stdin(file_name);// 输入
    23.             std::string _stdout = PathUtil::Stdout(file_name);// 输出
    24.             std::string _stderr = PathUtil::Stderr(file_name);// 错误
    25.  
    26.             umask(0);
    27.             int _stdin_fd = open(_stdin.c_str(),O_CREAT | O_RDONLY,0644);
    28.             int _stdout_fd = open(_stdout.c_str(),O_CREAT | O_WRONLY,0644);
    29.             int _stderr_fd = open(_stderr.c_str(),O_CREAT | O_WRONLY,0644);
    30.  
    31.             if(_stdin_fd < 0 || _stdout_fd < 0 || _stderr_fd < 0){
    32.                 LOG(ERROR) << "运行时打开标准文件失败" << "\n";
    33.                 return -1;// 代表打开文件失败
    34.             }
    35.  
    36.             pid_t pid = fork();
    37.             if(pid < 0){
    38.                 LOG(ERROR) << "运行创建子进程失败" << "\n";
    39.                 close(_stdin_fd);
    40.                 close(_stdout_fd);
    41.                 close(_stderr_fd);
    42.                 return -2;// 代表创建自己失败
    43.             }
    44.             else if(pid == 0){
    45.                 // 子进程
    46.                 dup2(_stdin_fd,0);
    47.                 dup2(_stdout_fd,1);
    48.                 dup2(_stderr_fd,2);
    49.                 LOG(INFO) << "123";// 是不是有问题啊
    50.                 // 这个程序替换等价于 ./tmp/code.exe ./tmp/code.exe
    51.                 execl(_execute.c_str(),_execute.c_str(),nullptr);
    52.                 exit(1);
    53.             }
    54.             else{
    55.                 close(_stdin_fd);
    56.                 close(_stdout_fd);
    57.                 close(_stderr_fd);
    58.                 int status = 0;// 表示输出型参数
    59.                 waitpid(pid,&status,0);// 阻塞式等待
    60.  
    61.                 // 程序运行异常,一定是因为收到信号
    62.                 LOG(INFO) << "运行完毕,infor: " << (status & 0x7f) << "\n";
    63.                 return status & 0x7f;
    64.             }
    65.         }
    66.     };
    67. }

    • 返回值 > 0: 程序异常了，退出时收到了信号，返回值就是对应的信号编号
      返回值 == 0: 正常运行完毕的，结果保存到了对应的临时文件中
      返回值 < 0: 内部错误

    • run.hpp也是一样的,把自己的各种输出信息,输出到一个临时文件中
    • 要判断一个程序是否异常,只需要看它是否收到了异常信号

    解释waitpid第2个输出型参数 

     

    •  status并不是按照整数来整体使用的,而是按照比特位的方式,将32个比特位进行划分,只需要学习低16位
    • 这也是上面为什么会写成status & 0x7F的原因

    那6个程序替换的系统接口,具体使用那个看实际情况 

    • 没有p就需要带路径
    • 有l,就是列表式传命令
    • 有v就是数组式传命令
    • 有e就需要传自己设置的环境变量

    1.1.4 测试运行模块

    • 虽然运行模块已经能正常运行了,但是万一code.cpp是恶意程序了,比如死循环,不停消耗CPU资源 , 所以还需要进一步的资源约束

    1.1.5 添加资源限制(setrlimit)

    • 资源不足，导致OS终止进程，是通过信号终止的  

     

    •  为了方便上层调用,我直接在Run函数中增加了cpu_limit和mem_limit形参

     这个项目走到这里就需要编写compile_run.hpp,将编译和运行的逻辑连接在一起,且code.cpp需要被处理的源文件,不应该是我们自己添加的,而是需要再客户端中导入的

    1.1.6 编译 && 运行功能 (compile_run.hpp)

    这个模块要做的是:
    a)适配用户请求,引入json定制通信协议字段
    b)形成唯一文件名
    c)正确调用compile and run 
    在centos中安装: sudo yum install json-c-devel
    头文件 #include <jsoncpp/json/json.h>

    •  注意: 在编译引入了json的文件,需要加上-ljsoncpp

     

    • 虽然这个code就是文件名了,但client可能会提交大量的代码,所以内部就会需要形成唯一的文件名(待完善)
    • 还有很多个出错问题怎么解决(待完善)

     complie_run.hpp

    1. #pragma once
    2.  
    3. #include "compiler.hpp"
    4. #include "runner.hpp"
    5. #include "../comm/log.hpp"
    6. #include "../comm/util.hpp"
    7. #include 
    8.  
    9. namespace ns_compile_and_run
    10. {
    11.     using namespace ns_log;
    12.     using namespace ns_util;
    13.     using namespace ns_compiler;
    14.     using namespace ns_runner;
    15.     
    16.     // in_json: {"code": "#include...", "input": "","cpu_limit":1, "mem_limit":10240}
    17.     // out_json: {"status":"0", "reason":"","stdout":"","stderr":"",}
    18.     static void Start(const std::string &in_json,std::string *out_json){
    19.         // step1: 反序列化过程
    20.         Json::Value in_value;
    21.         Json::Reader reader;
    22.         // 把in_json中的数据写到in_value中
    23.         reader.parse(in_json,in_value);// 最后再处理差错问题
    24.  
    25.         std::string code = in_value["code"].asString();
    26.         std::string input = in_value["input"].asString();
    27.         int cpu_limit = in_value["cpu_limit"].asInt();
    28.         int mem_limit = in_value["mem_limit"].asInt();
    29.  
    30.         Json::Value out_value;
    31.         int status_code = 0;
    32.         int run_result = 0;
    33.         std::string file_name;// 唯一文件名
    34.         if(code.size() == 0){
    35.             status_code = -1;// 代码为空
    36.             goto END;
    37.         }
    38.         // 形成的文件名只居有唯一性,没有目录没有后缀
    39.         // 使用: 毫秒级时间戳 + 原子性递增唯一值 : 来保证唯一性
    40.         file_name = FileUtil::UniqFileName();
    41.         // 形成临时的src文件
    42.         if(!FileUtil::WriteFile(PathUtil::Src(file_name),code)){
    43.             status_code = -2;// 未知错误
    44.             goto END;
    45.         }
    46.  
    47.         if(!Compiler::Compile(file_name)){
    48.             status_code = -3;// 编译错误
    49.             goto END;
    50.         }
    51.         run_result = Runner::Run(file_name,cpu_limit,mem_limit);
    52.         if(run_result < 0){
    53.             // runnem模块内部错误
    54.             status_code = -2;// 未知错误
    55.         }
    56.         else if(run_result > 0){
    57.             // 程序运行崩溃
    58.             status_code = run_result;// 这里的run_result是信号
    59.         }
    60.         else{
    61.             // 运行成功
    62.             status_code = 0;
    63.         }
    64.     END:
    65.         out_value["status"] = status_code;
    66.         out_value["reason"] = CodeToDest(status_code,file_name);// 得到错误信息字符串
    67.         if(status_code == 0){
    68.             // 整个过程全部成功
    69.             std::string _stdout;
    70.             FileUtil::ReadFile(PathUtil::Stdout(file_name),&_stdout,true);
    71.             out_value["stdout"] = _stdout;
    72.  
    73.             std::string _stderr;
    74.             FileUtil::ReadFile(PathUtil::Stdout(file_name),&_stderr,true);
    75.             out_value["stdout"] = _stdout;
    76.         }
    77.  
    78.         // step2: 序列化
    79.         Json::StyledWriter writer;
    80.         *out_json = writer.write(out_value);
    81.         
    82.  
    83.     }
    84.     
    85.  
    86. }

     1.1.7 基于compile_run.hpp对util.hpp的补充

     

    • 注意引入流时需要引入头文件: #include  

    • getline:不保存行分割符,有些时候需要保留\n,getline内部重载了强制类型转化 

    1.1.8 测试编译运行模块 

    1. #include "compile_run.hpp"
    2. using namespace ns_compile_and_run;
    3.  
    4. int main()
    5. {
    6.     std::string in_json;
    7.     Json::Value in_value;
    8.     // R"()", raw string
    9.     in_value["code"] = R"(#include
    10.     int main(){
    11.     std::cout << "你可以看见我了" << std::endl;
    12.     return 0;
    13.     })";
    14.     in_value["input"] = "";
    15.     in_value["cpu_limit"] = 1;
    16.     in_value["mem_limit"] = 10240 * 3;
    17.     Json::FastWriter writer;
    18.     in_json = writer.write(in_value);
    19.     // std::cout << in_json << std::endl;
    20.     // 这个是将来给客户端返回的json串
    21.     std::string out_json;
    22.     CompileAndRun::Start(in_json, &out_json);
    23.     std::cout << out_json << std::endl;
    24.     return 0;
    25. }

    •  实际上这里的代码应该是client自动提交给我们的,我们直接使用第三方库就行了
    • 待优化: 可以把临时生成的这些文件都清理掉,

    1.1.9 清理临时文件

    •  这个函数直接放在compile_server.cc中的start函数的最后,清理临时文件

    1.1.10 引入cpp-httplib 网络库

     下载地址: cpp-httplib: C++ http 网络库 - Gitee.com

    •  这个就是别人写好的网络库,我们直接使用就行了

    1.1.11 更新gcc

    安装scl : sudo yum install centos-release-scl scl-utils-build

    安装新版本gcc:  sudo yum install - y devtoolset - 9 - gcc devtoolset - 9 - gcc - c ++

    • 把 scl enable devtoolset-9 bash 放在 ~/.bash_profile中
    • 想每次登陆的时候，都是较新的gcc

     如果不更新在使用cpp-httplib时可能会报错, 用老的编译器，要么编译不通过，要么直接运行报错

    1.1.12 测试cpp-httplib网络库 

    • 可能会出现服务器的公网ip无法访问的问题,可以试试把防火墙关闭,并打开端口

    1.1.13 将compiler_server打包成网络服务

    compiler_server.cc

    1. #include "compile_run.hpp"
    2. #include "../comm/httplib.h"// 引入
    3.  
    4. using namespace ns_compile_and_run;
    5. using namespace httplib;// 引入
    6.  
    7. void Usage(std::string proc){
    8.     std::cerr << "Usage: " << "\n\t" << proc << " port" << std::endl;
    9. }
    10.  
    11. //./copile_server port
    12. int main(int argc,char *argv[])
    13. {
    14.     if(argc != 2){
    15.         Usage(argv[0]);
    16.         return 1;
    17.     }
    18.     Server svr;
    19.     svr.Post("/compile_and_run",[](const Request&req,Response & resp){
    20.         // 用户请求的服务正文是我们想要的json string
    21.         std::string in_json = req.body;
    22.         std::string out_json;
    23.         if(!in_json.empty()){
    24.             CompileAndRun::Start(in_json,&out_json);
    25.             resp.set_content(out_json,"application/json;charset=uft-8");
    26.         }
    27.     });
    28.     svr.listen("0.0.0.0",atoi(argv[1]));
    29.     return 0;
    30. }
    31.  
    32.
    • 由于我这里没有写客户端代码,则这里暂时不好测试,不过可以借助第三方工具进行测试

     2. oj_server服务设计

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

    2.1 书写makefile文件

    •  随着后续代码的跟进,并不断引入第三方库,这里还会新增编译选项

    2.2 服务路由功能(oj_server.cc) 

    • 为用户实现的路由功能就3个 a. 获取所有的题目列表 b.根据题目编号,获取题目内容 c.判断用户提交的代码  

    2.3 MVC 结构的oj 服务设计(M)

    Model , 通常是和数据交互的模块 ，比如，对题库进行增删改查（文件版， MySQL ）

    2.3.1 安装boost库 && 字符切分功能

    sudo yum install -y boost-devel //是boost 开发库

    •  第一个参数为缓冲区,第二个参数为被分割的字符串
    • 第三个参数为分割符,第四个参数为是否压缩
      • 要压缩: 当sep = "空格"时,sepsepsep -> 空格
      • 不压缩: 当sep = "空格"时,sepsepsep -> 空格空格空格

     2.3.2 数据结构

    header.cpp

    1. #include 
    2. #include 
    3. #include 
    4. #include 
    5. #include 
    6.  
    7. using namespace std;
    8.  
    9. class Solution{
    10.     public:
    11.         bool isPalindrome(int x)
    12.         {
    13.             //将你的代码写在下面
    14.             
    15.             return true;
    16.         }
    17. };

    tail.cpp

    1. #ifndef COMPILER_ONLINE
    2. #include "header.cpp"
    3. #endif
    4.  
    5. // 这里先把测试用例 暴露出来
    6. void Test1()
    7. {
    8.     // 通过定义临时对象，来完成方法的调用
    9.     bool ret = Solution().isPalindrome(121);
    10.     if(ret){
    11.         std::cout << "通过用例1, 测试121通过 ... OK!" << std::endl;
    12.     }
    13.     else{
    14.         std::cout << "没有通过用例1, 测试的值是: 121"  << std::endl;
    15.     }
    16. }
    17.  
    18. void Test2()
    19. {
    20.     // 通过定义临时对象，来完成方法的调用
    21.     bool ret = Solution().isPalindrome(-10);
    22.     if(!ret){
    23.         std::cout << "通过用例2, 测试-10通过 ... OK!" << std::endl;
    24.     }
    25.     else{
    26.         std::cout << "没有通过用例2, 测试的值是: -10"  << std::endl;
    27.     }
    28. }
    29.  
    30. int main()
    31. {
    32.     Test1();
    33.     Test2();
    34.  
    35.     return 0;
    36. }

    • des.txt表示题目信息
    •  header.cpp表示预设代码
    • tail.cpp表示测试用例

    •  真正代码 = 用户在head.cpp中的代码 + header.cpp + tail.cpp 并去到COMPILER_ONLINE
    •  这个条件编译只是为了编写tail.cpp时不报错

    2.3.3 model功能(oj_model.cpp)

    数据交互 && 提供接口

     

    1. #pragma once
    2. // 文件版本
    3. #include "../comm/util.hpp"
    4. #include "../comm/log.hpp"
    5. #include 
    6. #include 
    7. #include 
    8.  
    9. namespace ns_model
    10. {
    11.     using namespace std;
    12.     using namespace ns_log;
    13.     using namespace ns_util;
    14.  
    15.     struct Question{
    16.         string number;// 题目编号,唯一
    17.         string tile;// 题目标题
    18.         string star;// 难度: 简单 中等 困难
    19.         
    20.         int cpu_limit;// 题目的时间复杂度(S)
    21.         int mem_limit;// 题目的空间复杂度(KB)
    22.         
    23.         string desc;// 题目描述
    24.         string header; // 题目预设给用户在线编辑器的代码
    25.         string tail;// 题目测试用例,需要和header拼接
    26.     };    
    27.  
    28.     const string questions_list = "./question/quetions.list";
    29.     const string questions_path = "./question";
    30.  
    31.     class Model
    32.     {
    33.     public:
    34.         Model(){
    35.             // 加载所有题目:底层是用hash表映射的
    36.             assert(LoadQuestionList(questions_list));
    37.         }
    38.         ~Model(){
    39.             ;
    40.         }
    41.  
    42.         // 获取所有题目,这里的out是输出型参数
    43.         bool GetAllQuestions(vector*out){
    44.             if(questions.size() == 0){
    45.                 LOG(ERROR) << "用户获取题库失败" << "\n";
    46.                 return false;
    47.             }
    48.             for(const auto&q: questions){
    49.                 out->push_back(q.second);
    50.             }
    51.             return true;
    52.         }
    53.  
    54.         // 获取指定题目,这里的q是输出型参数
    55.         bool GetOneQuestion(const string& number,Question* q){
    56.             const auto& iter = questions.find(number);
    57.             if(iter == questions.end()){
    58.                 LOG(ERROR) << "用户获取题目失败,题目编号: " << number << "\n";
    59.                 return false;
    60.             }
    61.             (*q) = iter->second;
    62.             return true;
    63.         }
    64.  
    65.         // 加载配置文件: questions/questions.list + 题目编号文件
    66.         bool LoadQuestionList(const string&question_list){
    67.             // 加载配置文件: questions/questions.list +题目编号文件
    68.             ifstream in(question_list);
    69.             if(!in.is_open()){
    70.                 LOG(FATAL) << "加载题库失败,请检查是否存在题库文件" << "\n";
    71.                 return false;
    72.             }
    73.             string line;
    74.             while(getline(in,line)){
    75.                 vectortokens;
    76.                 StringUtil::SplitString(line,&tokens," ");// 被分割的字符串 缓冲区 分割符
    77.                 // eg: 1 判断回文数 简单 1 30000
    78.                 if(tokens.size()!=5){
    79.                     LOG(WARNING) << "加载部分题目失败,请检查文件格式" << "\n";
    80.                     continue;
    81.                 }
    82.                 Question q;
    83.                 q.number = tokens[0];
    84.                 q.tile = tokens[1];
    85.                 q.star = tokens[2];
    86.                 q.cpu_limit = atoi(tokens[3].c_str());
    87.                 q.mem_limit = atoi(tokens[4].c_str());
    88.  
    89.                 string path = questions_list;
    90.                 path += q.number;
    91.                 path += "/";
    92.  
    93.                 // 第三个参数代表 是否加上 \n
    94.                 FileUtil::ReadFile(path+"desc.txt",&(q.desc),true);
    95.                 FileUtil::ReadFile(path+"header.cpp",&(q.header),true);
    96.                 FileUtil::ReadFile(path+"tail.txt",&(q.tail),true);
    97.                
    98.                 questions.insert({q.number,q});// 录题成功
    99.             }
    100.             LOG(INFO) << "加载题库...成功" << "\n";
    101.             in.close();
    102.         }
    103.     private:
    104.         // 题号 : 题目细节
    105.         unordered_map questions;
    106.     };
    107. } 
    108.

    2.4 MVC 结构的oj 服务设计(C) 

    2.4.1 负载均衡模块

    1. namespace ns_control
    2. {
    3.     using namespace std;
    4.     using namespace ns_log;
    5.     using namespace ns_util;
    6.     using namespace ns_model;
    7.     using namespace ns_view;
    8.     using namespace httplib;
    9.  
    10.     // 提供服务的主机
    11.     class Machine
    12.     {
    13.     public:
    14.         std::string ip;  //编译服务的ip
    15.         int port;        //编译服务的port
    16.         uint64_t load;   //编译服务的负载
    17.         std::mutex *mtx; // mutex禁止拷贝的，使用指针
    18.     public:
    19.         Machine() : ip(""), port(0), load(0), mtx(nullptr)
    20.         {
    21.         }
    22.         ~Machine()
    23.         {
    24.         }
    25.  
    26.     public:
    27.         // 提升主机负载
    28.         void IncLoad()
    29.         {
    30.             if (mtx) mtx->lock();
    31.             ++load;
    32.             if (mtx) mtx->unlock();
    33.         }
    34.         // 减少主机负载
    35.         void DecLoad()
    36.         {
    37.             if (mtx) mtx->lock();
    38.             --load;
    39.             if (mtx) mtx->unlock();
    40.         }
    41.         void ResetLoad()
    42.         {
    43.             if(mtx) mtx->lock();
    44.             load = 0;
    45.             if(mtx) mtx->unlock();
    46.         }
    47.         // 获取主机负载,没有太大的意义，只是为了统一接口
    48.         uint64_t Load()
    49.         {
    50.             uint64_t _load = 0;
    51.             if (mtx) mtx->lock();
    52.             _load = load;
    53.             if (mtx) mtx->unlock();
    54.  
    55.             return _load;
    56.         }
    57.     };
    58.  
    59.     const std::string service_machine = "./conf/service_machine.conf";
    60.     class LoadBlance
    61.     {
    62.     private:
    63.         // 可以给我们提供编译服务的所有的主机
    64.         // 每一台主机都有自己的下标，充当当前主机的id
    65.         std::vector machines;
    66.         // 所有在线的主机id
    67.         std::vector<int> online;
    68.         // 所有离线的主机id
    69.         std::vector<int> offline;
    70.         // 保证LoadBlance它的数据安全
    71.         std::mutex mtx;
    72.  
    73.     public:
    74.         LoadBlance()
    75.         {
    76.             assert(LoadConf(service_machine));
    77.             LOG(INFO) << "加载 " << service_machine << " 成功"
    78.                       << "\n";
    79.         }
    80.         ~LoadBlance()
    81.         {
    82.         }
    83.  
    84.     public:
    85.         bool LoadConf(const std::string &machine_conf)
    86.         {
    87.             std::ifstream in(machine_conf);
    88.             if (!in.is_open())
    89.             {
    90.                 LOG(FATAL) << " 加载: " << machine_conf << " 失败"
    91.                            << "\n";
    92.                 return false;
    93.             }
    94.             std::string line;
    95.             while (std::getline(in, line))
    96.             {
    97.                 std::vector tokens;
    98.                 StringUtil::SplitString(line, &tokens, ":");
    99.                 if (tokens.size() != 2)
    100.                 {
    101.                     LOG(WARNING) << " 切分 " << line << " 失败"
    102.                                  << "\n";
    103.                     continue;
    104.                 }
    105.                 Machine m;
    106.                 m.ip = tokens[0];
    107.                 m.port = atoi(tokens[1].c_str());
    108.                 m.load = 0;
    109.                 m.mtx = new std::mutex();
    110.  
    111.                 online.push_back(machines.size());
    112.                 machines.push_back(m);
    113.             }
    114.  
    115.             in.close();
    116.             return true;
    117.         }
    118.         // id: 输出型参数
    119.         // m : 输出型参数
    120.         bool SmartChoice(int *id, Machine **m)
    121.         {
    122.             // 1. 使用选择好的主机(更新该主机的负载)
    123.             // 2. 我们需要可能离线该主机
    124.             mtx.lock();
    125.             // 负载均衡的算法
    126.             // 1. 随机数+hash
    127.             // 2. 轮询+hash
    128.             int online_num = online.size();
    129.             if (online_num == 0)
    130.             {
    131.                 mtx.unlock();
    132.                 LOG(FATAL) << " 所有的后端编译主机已经离线, 请运维的同事尽快查看"
    133.                            << "\n";
    134.                 return false;
    135.             }
    136.             // 通过遍历的方式，找到所有负载最小的机器
    137.             *id = online[0];
    138.             *m = &machines[online[0]];
    139.             uint64_t min_load = machines[online[0]].Load();
    140.             for (int i = 1; i < online_num; i++)
    141.             {
    142.                 uint64_t curr_load = machines[online[i]].Load();
    143.                 if (min_load > curr_load)
    144.                 {
    145.                     min_load = curr_load;
    146.                     *id = online[i];
    147.                     *m = &machines[online[i]];
    148.                 }
    149.             }
    150.             mtx.unlock();
    151.             return true;
    152.         }
    153.         void OfflineMachine(int which)
    154.         {
    155.             mtx.lock();
    156.             for(auto iter = online.begin(); iter != online.end(); iter++)
    157.             {
    158.                 if(*iter == which)
    159.                 {
    160.                     machines[which].ResetLoad();
    161.                     //要离线的主机已经找到啦
    162.                     online.erase(iter);
    163.                     offline.push_back(which);
    164.                     break; //因为break的存在，所有我们暂时不考虑迭代器失效的问题
    165.                 }
    166.             }
    167.             mtx.unlock();
    168.         }
    169.         void OnlineMachine()
    170.         {
    171.             //我们统一上线，后面统一解决
    172.             mtx.lock();
    173.             online.insert(online.end(), offline.begin(), offline.end());
    174.             offline.erase(offline.begin(), offline.end());
    175.             mtx.unlock();
    176.  
    177.             LOG(INFO) << "所有的主机有上线啦!" << "\n";
    178.         }
    179.         //for test
    180.         void ShowMachines()
    181.         {
    182.              mtx.lock();
    183.              std::cout << "当前在线主机列表: ";
    184.              for(auto &id : online)
    185.              {
    186.                  std::cout << id << " ";
    187.              }
    188.              std::cout << std::endl;
    189.              std::cout << "当前离线主机列表: ";
    190.              for(auto &id : offline)
    191.              {
    192.                  std::cout << id << " ";
    193.              }
    194.              std::cout << std::endl;
    195.              mtx.unlock();
    196.         }
    197.     };
    198. }

    2.4.1 control功能(oj_control.hpp)

    逻辑控制模块

    1. // 这是我们的核心业务逻辑的控制器
    2.     class Control
    3.     {
    4.     private:
    5.         Model model_; //提供后台数据
    6.         View view_;   //提供html渲染功能
    7.         LoadBlance load_blance_; //核心负载均衡器
    8.     public:
    9.         Control()
    10.         {
    11.         }
    12.         ~Control()
    13.         {
    14.         }
    15.  
    16.     public:
    17.         void RecoveryMachine()
    18.         {
    19.             load_blance_.OnlineMachine();
    20.         }
    21.         //根据题目数据构建网页
    22.         // html: 输出型参数
    23.         bool AllQuestions(string *html)
    24.         {
    25.             bool ret = true;
    26.             vector<struct Question> all;
    27.             if (model_.GetAllQuestions(&all))
    28.             {
    29.                 sort(all.begin(), all.end(), [](const struct Question &q1, const struct Question &q2){
    30.                     return atoi(q1.number.c_str()) < atoi(q2.number.c_str());
    31.                 });
    32.                 // 获取题目信息成功，将所有的题目数据构建成网页
    33.                 // ...
    34.             }
    35.             else
    36.             {
    37.                 *html = "获取题目失败, 形成题目列表失败";
    38.                 ret = false;
    39.             }
    40.             return ret;
    41.         }
    42.         bool Question(const string &number, string *html)
    43.         {
    44.             bool ret = true;
    45.             struct Question q;
    46.             if (model_.GetOneQuestion(number, &q))
    47.             {
    48.                 // 获取指定题目信息成功，将所有的题目数据构建成网页
    49.                 // ....
    50.             }
    51.             else
    52.             {
    53.                 *html = "指定题目: " + number + " 不存在!";
    54.                 ret = false;
    55.             }
    56.             return ret;
    57.         }
    58.         // code: #include...
    59.         // input: ""
    60.         void Judge(const std::string &number, const std::string in_json, std::string *out_json)
    61.         {
    62.             
    63.         }
    64.     };
    •  control模块中的判题功能,我打算最后设计

    2.5  MVC 结构的oj 服务设计(V)

    2.4 安装与测试 ctemplate(网页渲染)

    渲染本质就是key-value之间的替换

    • 安装镜像源: git clone https://gitee.com/mirrors_OlafvdSpek/ctemplate.git 
    • . / autogen . sh
    • . / configure
    • make // 编译 如果报错请 更新gcc
    • make install

    test.cpp 

    1. #include 
    2. #include 
    3. #include 
    4. int main()
    5. {
    6.     std::string html = "./test.html";
    7.     std::string html_info = "测试ctemplate渲染";
    8.  
    9.     // 建立ctemplate参数目录结构
    10.     ctemplate::TemplateDictionary root("test"); // unordered_map test;
    11.     
    12.     // 向结构中添加你要替换的数据，kv的
    13.     root.SetValue("info", html_info); // test.insert({key, value});
    14.     
    15.     // 获取被渲染对象
    16.     // DO_NOT_STRIP：保持html网页原貌
    17.     ctemplate::Template *tpl = ctemplate::Template::GetTemplate(html,ctemplate::DO_NOT_STRIP); 
    18.     
    19.     // 开始渲染，返回新的网页结果到out_html
    20.     std::string out_html;
    21.     tpl->Expand(&out_html, &root);
    22.     
    23.     std::cout << "渲染的带参html是:" << std::endl;
    24.     std::cout << out_html << std::endl;
    25.     
    26.     return 0;
    27. }

     test.html

    2. "en">
    3.  
    5.     "UTF-8">
    6.     "X-UA-Compatible" content="IE=edge">
    7.     "viewport" content="width=device-width, initial-scale=1.0">
    8.     Document
    10.  
    12.     
      {{info}}
    13.     
      {{info}}
    14.     
      {{info}}
    15.     
      {{info}}
    17.

     错误原因: error while loading shared libraries: libmpc.so.3: cannot open shared object file 

    export LD\_LIBRARY\_PATH=$LD\_LIBRARY\_PATH:/usr/local/lib
    •  在命令行上输入 上面这段命令,注:只在当前会话中有效

    #  cat /etc/ld.so.conf
    include ld.so.conf.d/*.conf
    #  echo "/usr/local/lib" >> /etc/ld.so.conf
    #  ldconfig

    2.5.2 渲染功能(oj_view.hpp)

    1. #pragma once
    2. #include 
    3. #include 
    4. #include "./oj_model.hpp"
    5.  
    6. namespace ns_view
    7. {
    8.     using namespace ns_model;
    9.  
    10.     const std::string template_path = "./template_html/";
    11.  
    12.     class View
    13.     {
    14.     public:
    15.         View(){}
    16.         ~View(){}
    17.  
    18.         // 渲染所有题目
    19.         void ALLExpandHtml(const vector<struct Question>&question,std::string *html){
    20.             // 题目编号 题目标题 题难度
    21.             // 推荐表格实现
    22.             // 1.形成路径
    23.             string src_html = template_path + "all_quetions.html";
    24.  
    25.             // 2.形成数字典
    26.             ctemplate::TemplateDictionary root("all_question");
    27.             for(const auto& q: question){
    28.                 ctemplate::TemplateDictionary *sub = root.AddSectionDictionary("question_list");
    29.                 sub->SetValue("number",q.number);
    30.                 sub->SetValue("title",q.title);
    31.                 sub->SetValue("star",q.star);
    32.             }
    33.  
    34.             // 3. 获取被渲染的html
    35.             ctemplate::Template*tpl = ctemplate::Template::GetTemplate(src_html,ctemplate::DO_NOT_STRIP);
    36.  
    37.             // 4.开始完成渲染功能
    38.             tpl->Expand(html,&root);
    39.         }
    40.  
    41.         // 渲染一道题目
    42.         void OneExpandHtml(const struct Question &q,string *html){
    43.             // 1.形成路径
    44.             std::string src_html = template_path + "one_question.html";
    45.  
    46.             // 2. 形成数字典
    47.             ctemplate::TemplateDictionary root("one_question");
    48.             root.SetValue("number",q.number);
    49.             root.SetValue("title",q.title);
    50.             root.SetValue("star",q.star);
    51.             root.SetValue("desc",q.desc);
    52.             root.SetValue("header",q.header);
    53.  
    54.             // 3.获取被渲染的html
    55.             ctemplate::Template*tpl = ctemplate::Template::GetTemplate(src_html,ctemplate::DO_NOT_STRIP);
    56.             // 4.开始完成渲染功能
    57.             tpl->Expand(html,&root);
    58.         }
    59.     };
    60. }

    2.6  联动MVC模块并测试

    oj_server.cc 

    1. #include 
    2. #include "../comm/httplib.h"// 引入
    3. #include "oj_control.hpp"
    4.  
    5. using namespace httplib;// 引入
    6. using namespace ns_control;
    7.  
    8. int main()
    9. {
    10.     // 用户请求的服务器路由功能
    11.     Server svr;
    12.     Control ctrl;
    13.     // 获取所有的题目列表
    14.     svr.Get("/all_questions",[&ctrl](const Request&req,Response &resp){
    15.         // 返回一张包含所有题目的html网页
    16.         std::string html;// 待处理
    17.         ctrl.AllQuestions(&html);
    18.         resp.set_content(html,"text/html;charset=utf-8");
    19.     });
    20.  
    21.     // 根据题目编号,获取题目内容
    22.     // \d+ 是正则表达式的特殊符合
    23.     svr.Get(R"(/question/(\d+))",[&ctrl](const Request&req,Response &resp){
    24.         std::string number = req.matches[1];
    25.         std::string html;
    26.         ctrl.Question(number,&html);
    27.         resp.set_content(html,"text/html;charset=utf-8");
    28.     });
    29.  
    30.     // 判断用户提交的代码(1.每道题c测试用例,2.compile_and_run)
    31.     svr.Post(R"(/judge/(\d+))",[&ctrl](const Request&req,Response &resp){
    32.         std::string number = req.matches[1];
    33.         std::string result_json;
    34.         ctrl.Judge(number,req.body,&result_json);
    35.         resp.set_content(result_json,"application/json;charset=utf-8");
    36.     });
    37.     svr.set_base_dir("./wwwroot");
    38.     svr.listen("0.0.0.0",8080);
    39.     return 0;
    40. }
    41.

    •  这里的前端都是提前做好了的,我们可以不关心前端;
    • control功能还有个判题功能没有实现

     2.7 完善oj_control.hpp中的判题功能

    1. void Judge(const std::string &number, const std::string in_json, std::string *out_json)
    2.         {
    3.             // LOG(DEBUG) << in_json << " \nnumber:" << number << "\n";
    4.             
    5.             // 0. 根据题目编号，直接拿到对应的题目细节
    6.             struct Question q;
    7.             model_.GetOneQuestion(number, &q);
    8.  
    9.             // 1. in_json进行反序列化，得到题目的id，得到用户提交源代码，input
    10.             Json::Reader reader;
    11.             Json::Value in_value;
    12.             reader.parse(in_json, in_value);
    13.             std::string code = in_value["code"].asString();
    14.  
    15.             // 2. 重新拼接用户代码+测试用例代码，形成新的代码
    16.             Json::Value compile_value;
    17.             compile_value["input"] = in_value["input"].asString();
    18.             compile_value["code"] = code + "\n" + q.tail;
    19.             compile_value["cpu_limit"] = q.cpu_limit;
    20.             compile_value["mem_limit"] = q.mem_limit;
    21.             Json::FastWriter writer;
    22.             std::string compile_string = writer.write(compile_value);
    23.  
    24.             // 3. 选择负载最低的主机(差错处理)
    25.             // 规则: 一直选择，直到主机可用，否则，就是全部挂掉
    26.             while(true)
    27.             {
    28.                 int id = 0;
    29.                 Machine *m = nullptr;
    30.                 if(!load_blance_.SmartChoice(&id, &m))
    31.                 {
    32.                     break;
    33.                 }
    34.  
    35.                 // 4. 然后发起http请求，得到结果
    36.                 Client cli(m->ip, m->port);
    37.                 m->IncLoad();
    38.                 LOG(INFO) << " 选择主机成功, 主机id: " << id << " 详情: " << m->ip << ":" << m->port << " 当前主机的负载是: " << m->Load() << "\n";
    39.                 if(auto res = cli.Post("/compile_and_run", compile_string, "application/json;charset=utf-8"))
    40.                 {
    41.                     // 5. 将结果赋值给out_json
    42.                     if(res->status == 200)
    43.                     {
    44.                         *out_json = res->body;
    45.                         m->DecLoad();
    46.                         LOG(INFO) << "请求编译和运行服务成功..." << "\n";
    47.                         break;
    48.                     }
    49.                     m->DecLoad();
    50.                 }
    51.                 else
    52.                 {
    53.                     //请求失败
    54.                     LOG(ERROR) << " 当前请求的主机id: " << id << " 详情: " << m->ip << ":" << m->port << " 可能已经离线"<< "\n";
    55.                     load_blance_.OfflineMachine(id);
    56.                     load_blance_.ShowMachines(); //仅仅是为了用来调试
    57.                 }
    58.             }

    2.8 测试oj_server服务

    • 在编译时需要加上-D COMPILER_ONLINE条件编译, 

    •  设计到前端网页,下面会有提及

    2.9 一个BUG 

    •  把tail.txt改成tail.cpp,不然后面无法进行代码拼接

     3. 前端页面设计(了解)

    3.1 index.html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>这是我的个人OJ系统title>
    9.     <style>
    10.         /* 起手式, 100%保证我们的样式设置可以不受默认影响 */
    11.         * {
    12.             /* 消除网页的默认外边距 */
    13.             margin: 0px;
    14.             /* 消除网页的默认内边距 */
    15.             padding: 0px;
    16.         }
    17.  
    18.         html,
    19.         body {
    20.             width: 100%;
    21.             height: 100%;
    22.         }
    23.  
    24.         .container .navbar {
    25.             width: 100%;
    26.             height: 50px;
    27.             background-color: black;
    28.             /* 给父级标签设置overflow，取消后续float带来的影响 */
    29.             overflow: hidden;
    30.         }
    31.  
    32.         .container .navbar a {
    33.             /* 设置a标签是行内块元素，允许你设置宽度 */
    34.             display: inline-block;
    35.             /* 设置a标签的宽度,a标签默认行内元素，无法设置宽度 */
    36.             width: 80px;
    37.             /* 设置字体颜色 */
    38.             color: white;
    39.             /* 设置字体的大小 */
    40.             font-size: large;
    41.             /* 设置文字的高度和导航栏一样的高度 */
    42.             line-height: 50px;
    43.             /* 去掉a标签的下划线 */
    44.             text-decoration: none;
    45.             /* 设置a标签中的文字居中 */
    46.             text-align: center;
    47.         }
    48.         /* 设置鼠标事件 */
    49.         .container .navbar a:hover {
    50.             background-color: green;
    51.         }
    52.         .container .navbar .login {
    53.             float: right;
    54.         }
    55.  
    56.         .container .content {
    57.             /* 设置标签的宽度 */
    58.             width: 800px;
    59.             /* 用来调试 */
    60.             /* background-color: #ccc; */
    61.             /* 整体居中 */
    62.             margin: 0px auto;
    63.             /* 设置文字居中 */
    64.             text-align: center;
    65.             /* 设置上外边距 */
    66.             margin-top: 200px;
    67.         }
    68.  
    69.         .container .content .font_ {
    70.             /* 设置标签为块级元素，独占一行，可以设置高度宽度等属性 */
    71.             display: block;
    72.             /* 设置每个文字的上外边距 */
    73.             margin-top: 20px;
    74.             /* 去掉a标签的下划线 */
    75.             text-decoration: none;
    76.             /* 设置字体大小
    77.             font-size: larger; */
    78.         }
    79.     style>
    80. head>
    81.  
    82. <body>
    83.     <div class="container">
    84.         
    85.         <div class="navbar">
    86.             <a href="/">首页a>
    87.             <a href="/all_questions">题库a>
    88.             <a href="#">竞赛a>
    89.             <a href="#">讨论a>
    90.             <a href="#">求职a>
    91.             <a class="login" href="#">登录a>
    92.         div>
    93.         
    94.         <div class="content">
    95.             <h1 class="font_">欢迎来到我的OnlineJudge平台h1>
    96.             <p class="font_">这个我个人独立开发的一个在线OJ平台p>
    97.             <a class="font_" href="/all_questions">点击我开始编程啦!a>
    98.         div>
    99.     div>
    100. body>
    101.  
    102. html>

     3.2 all_questions.html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>在线OJ-题目列表title>
    9.     <style>
    10.         /* 起手式, 100%保证我们的样式设置可以不受默认影响 */
    11.         * {
    12.             /* 消除网页的默认外边距 */
    13.             margin: 0px;
    14.             /* 消除网页的默认内边距 */
    15.             padding: 0px;
    16.         }
    17.  
    18.         html,
    19.         body {
    20.             width: 100%;
    21.             height: 100%;
    22.         }
    23.  
    24.         .container .navbar {
    25.             width: 100%;
    26.             height: 50px;
    27.             background-color: black;
    28.             /* 给父级标签设置overflow，取消后续float带来的影响 */
    29.             overflow: hidden;
    30.         }
    31.  
    32.         .container .navbar a {
    33.             /* 设置a标签是行内块元素，允许你设置宽度 */
    34.             display: inline-block;
    35.             /* 设置a标签的宽度,a标签默认行内元素，无法设置宽度 */
    36.             width: 80px;
    37.             /* 设置字体颜色 */
    38.             color: white;
    39.             /* 设置字体的大小 */
    40.             font-size: large;
    41.             /* 设置文字的高度和导航栏一样的高度 */
    42.             line-height: 50px;
    43.             /* 去掉a标签的下划线 */
    44.             text-decoration: none;
    45.             /* 设置a标签中的文字居中 */
    46.             text-align: center;
    47.         }
    48.  
    49.         /* 设置鼠标事件 */
    50.         .container .navbar a:hover {
    51.             background-color: green;
    52.         }
    53.  
    54.         .container .navbar .login {
    55.             float: right;
    56.         }
    57.  
    58.         .container .question_list {
    59.             padding-top: 50px;
    60.             width: 800px;
    61.             height: 100%;
    62.             margin: 0px auto;
    63.             /* background-color: #ccc; */
    64.             text-align: center;
    65.         }
    66.  
    67.         .container .question_list table {
    68.             width: 100%;
    69.             font-size: large;
    70.             font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    71.             margin-top: 50px;
    72.             background-color: rgb(243, 248, 246);
    73.         }
    74.  
    75.         .container .question_list h1 {
    76.             color: green;
    77.         }
    78.  
    79.         .container .question_list table .item {
    80.             width: 100px;
    81.             height: 40px;
    82.             font-size: large;
    83.             font-family: 'Times New Roman', Times, serif;
    84.         }
    85.  
    86.         .container .question_list table .item a {
    87.             text-decoration: none;
    88.             color: black;
    89.         }
    90.  
    91.         .container .question_list table .item a:hover {
    92.             color: blue;
    93.             text-decoration: underline;
    94.         }
    95.  
    96.         .container .footer {
    97.             width: 100%;
    98.             height: 50px;
    99.             text-align: center;
    100.             line-height: 50px;
    101.             color: #ccc;
    102.             margin-top: 15px;
    103.         }
    104.     style>
    105. head>
    106.  
    107. <body>
    108.     <div class="container">
    109.         
    110.         <div class="navbar">
    111.             <a href="/">首页a>
    112.             <a href="/all_questions">题库a>
    113.             <a href="#">竞赛a>
    114.             <a href="#">讨论a>
    115.             <a href="#">求职a>
    116.             <a class="login" href="#">登录a>
    117.         div>
    118.         <div class="question_list">
    119.             <h1>OnlineJuge题目列表h1>
    120.             <table>
    121.                 <tr>
    122.                     <th class="item">编号th>
    123.                     <th class="item">标题th>
    124.                     <th class="item">难度th>
    125.                 tr>
    126.                 {{#question_list}}
    127.                 <tr>
    128.                     <td class="item">{{number}}td>
    129.                     <td class="item"><a href="/question/{{number}}">{{title}}a>td>
    130.                     <td class="item">{{star}}td>
    131.                 tr>
    132.                 {{/question_list}}
    133.             table>
    134.         div>
    135.         <div class="footer">
    136.             
    137.             <h4>@lych4>
    138.         div>
    139.     div>
    140.  
    141. body>
    142.  
    143. html>

    3.3 one_questions.html(ACE插件&&JQuery&&ajax)

    2.     
    3.     
    4.     
    5.     
    6.

    • ACE插件是一个 编写代码的编译框
    • 收集当前页面的有关数据 , a. 题号 a. 代码 , 我们采用 JQuery 来进行获取 html 中的内容
    • 构建json,并通过 ajax向后台 发起基于http的json请求

    全部代码

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>{{number}}.{{title}}title>
    9.     
    10.     
    11.     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"
    12.         charset="utf-8">script>
    13.     <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript"
    14.         charset="utf-8">script>
    15.     
    16.     <script src="http://code.jquery.com/jquery-2.1.1.min.js">script>
    17.  
    18.     <style>
    19.         * {
    20.             margin: 0;
    21.             padding: 0;
    22.         }
    23.  
    24.         html,
    25.         body {
    26.             width: 100%;
    27.             height: 100%;
    28.         }
    29.  
    30.         .container .navbar {
    31.             width: 100%;
    32.             height: 50px;
    33.             background-color: black;
    34.             /* 给父级标签设置overflow，取消后续float带来的影响 */
    35.             overflow: hidden;
    36.         }
    37.  
    38.         .container .navbar a {
    39.             /* 设置a标签是行内块元素，允许你设置宽度 */
    40.             display: inline-block;
    41.             /* 设置a标签的宽度,a标签默认行内元素，无法设置宽度 */
    42.             width: 80px;
    43.             /* 设置字体颜色 */
    44.             color: white;
    45.             /* 设置字体的大小 */
    46.             font-size: large;
    47.             /* 设置文字的高度和导航栏一样的高度 */
    48.             line-height: 50px;
    49.             /* 去掉a标签的下划线 */
    50.             text-decoration: none;
    51.             /* 设置a标签中的文字居中 */
    52.             text-align: center;
    53.         }
    54.  
    55.         /* 设置鼠标事件 */
    56.         .container .navbar a:hover {
    57.             background-color: green;
    58.         }
    59.  
    60.         .container .navbar .login {
    61.             float: right;
    62.         }
    63.         
    64.         .container .part1 {
    65.             width: 100%;
    66.             height: 600px;
    67.             overflow: hidden;
    68.         }
    69.  
    70.         .container .part1 .left_desc {
    71.             width: 50%;
    72.             height: 600px;
    73.             float: left;
    74.             overflow: scroll;
    75.         }
    76.  
    77.         .container .part1 .left_desc h3 {
    78.             padding-top: 10px;
    79.             padding-left: 10px;
    80.         }
    81.  
    82.         .container .part1 .left_desc pre {
    83.             padding-top: 10px;
    84.             padding-left: 10px;
    85.             font-size: medium;
    86.             font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    87.         }
    88.  
    89.         .container .part1 .right_code {
    90.             width: 50%;
    91.             float: right;
    92.         }
    93.  
    94.         .container .part1 .right_code .ace_editor {
    95.             height: 600px;
    96.         }
    97.         .container .part2 {
    98.             width: 100%;
    99.             overflow: hidden;
    100.         }
    101.  
    102.         .container .part2 .result {
    103.             width: 300px;
    104.             float: left;
    105.         }
    106.  
    107.         .container .part2 .btn-submit {
    108.             width: 120px;
    109.             height: 50px;
    110.             font-size: large;
    111.             float: right;
    112.             background-color: #26bb9c;
    113.             color: #FFF;
    114.             /* 给按钮带上圆角 */
    115.             /* border-radius: 1ch; */
    116.             border: 0px;
    117.             margin-top: 10px;
    118.             margin-right: 10px;
    119.         }
    120.         .container .part2 button:hover {
    121.             color:green;
    122.         }
    123.  
    124.         .container .part2 .result {
    125.             margin-top: 15px;
    126.             margin-left: 15px;
    127.         }
    128.  
    129.         .container .part2 .result pre {
    130.             font-size: large;
    131.         }
    132.     style>
    133. head>
    134.  
    135. <body>
    136.     <div class="container">
    137.         
    138.         <div class="navbar">
    139.             <a href="/">首页a>
    140.             <a href="/all_questions">题库a>
    141.             <a href="#">竞赛a>
    142.             <a href="#">讨论a>
    143.             <a href="#">求职a>
    144.             <a class="login" href="#">登录a>
    145.         div>
    146.         
    147.         <div class="part1">
    148.             <div class="left_desc">
    149.                 <h3><span id="number">{{number}}span>.{{title}}_{{star}}h3>
    150.                 <pre>{{desc}}pre>
    151.             div>
    152.             <div class="right_code">
    153.                 <pre id="code" class="ace_editor"><textarea class="ace_text-input">{{pre_code}}textarea>pre>
    154.             div>
    155.         div>
    156.         
    157.         <div class="part2">
    158.             <div class="result">div>
    159.             <button class="btn-submit" onclick="submit()">提交代码button>
    160.         div>
    161.     div>
    162.     <script>
    163.         //初始化对象
    164.         editor = ace.edit("code");
    165.  
    166.         //设置风格和语言（更多风格和语言，请到github上相应目录查看）
    167.         // 主题大全：http://www.manongjc.com/detail/25-cfpdrwkkivkikmk.html
    168.         editor.setTheme("ace/theme/monokai");
    169.         editor.session.setMode("ace/mode/c_cpp");
    170.  
    171.         // 字体大小
    172.         editor.setFontSize(16);
    173.         // 设置默认制表符的大小:
    174.         editor.getSession().setTabSize(4);
    175.  
    176.         // 设置只读（true时只读，用于展示代码）
    177.         editor.setReadOnly(false);
    178.  
    179.         // 启用提示菜单
    180.         ace.require("ace/ext/language_tools");
    181.         editor.setOptions({
    182.             enableBasicAutocompletion: true,
    183.             enableSnippets: true,
    184.             enableLiveAutocompletion: true
    185.         });
    186.  
    187.         function submit(){
    188.             // alert("嘿嘿!");
    189.             // 1. 收集当前页面的有关数据, 1. 题号 2.代码
    190.             var code = editor.getSession().getValue();
    191.             // console.log(code);
    192.             var number = $(".container .part1 .left_desc h3 #number").text();
    193.             // console.log(number);
    194.             var judge_url = "/judge/" + number;
    195.             // console.log(judge_url);
    196.             // 2. 构建json，并通过ajax向后台发起基于http的json请求
    197.             $.ajax({
    198.                 method: 'Post',   // 向后端发起请求的方式
    199.                 url: judge_url,   // 向后端指定的url发起请求
    200.                 dataType: 'json', // 告知server，我需要什么格式
    201.                 contentType: 'application/json;charset=utf-8',  // 告知server，我给你的是什么格式
    202.                 data: JSON.stringify({
    203.                     'code':code,
    204.                     'input': ''
    205.                 }),
    206.                 success: function(data){
    207.                     //成功得到结果
    208.                     // console.log(data);
    209.                     show_result(data);
    210.                 }
    211.             });
    212.             // 3. 得到结果，解析并显示到 result中
    213.             function show_result(data)
    214.             {
    215.                 // console.log(data.status);
    216.                 // console.log(data.reason);
    217.                 // 拿到result结果标签
    218.                 var result_div = $(".container .part2 .result");
    219.                 // 清空上一次的运行结果
    220.                 result_div.empty();
    221.  
    222.                 // 首先拿到结果的状态码和原因结果
    223.                 var _status = data.status;
    224.                 var _reason = data.reason;
    225.  
    226.                 var reason_lable = $( "
      ",{
    227.                        text: _reason
    228.                 });
    229.                 reason_lable.appendTo(result_div);
    230.  
    231.                 if(status == 0){
    232.                     // 请求是成功的，编译运行过程没出问题，但是结果是否通过看测试用例的结果
    233.                     var _stdout = data.stdout;
    234.                     var _stderr = data.stderr;
    235.  
    236.                     var stdout_lable = $("
      ", {
    237.                         text: _stdout
    238.                     });
    239.  
    240.                     var stderr_lable = $("
      ", {
    241.                         text: _stderr
    242.                     })
    243.  
    244.                     stdout_lable.appendTo(result_div);
    245.                     stderr_lable.appendTo(result_div);
    246.                 }
    247.                 else{
    248.                     // 编译运行出错,do nothing
    249.                 }
    250.             }
    251.         }
    252.     script>
    253. body>
    254.  
    255. html>

    3.4 相关测试

     4. MySQL版题目设计

    4.1 注册用户 && 赋予权限

    • create user 'oj_client'@'localhost' identified by '123456';
    • create database oj;
    • grant select on oj.* to 'oj_client'@'localhost';
    • select user,Host from user;

     4.2 下载第三方工具-workbench

     

    •  下载下来之后,就不断的下一步,下一步就行了

    4.3 录题到mysql中

    1. use oj;
    2. drop table if exists oj_table;
    3.  
    4. create table if not exists oj_table(
    5. 	_number varchar(200)  comment '题目编号',
    6.     _titie varchar(200) comment '题目标题',
    7.     _start varchar(200) comment '题目简单中等困难',
    8.     _desc varchar(2000) comment '题目描述',
    9.     _header varchar(2000) comment '题目预设',
    10.     _tail varchar(2000) comment '题目测试用例',
    11.     _cpu_limit int comment '时间要求',
    12.     _mem_limt int comment '空间要求'
    13. );
    14.  
    15. insert into oj_table values(
    16. 	1,
    17.     '判断回文数',
    18.     '简单',
    19.     '判断一个整数是否是回文数。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。
    21. 	示例 1:
    23. 	输入: 121
    24. 	输出: true
    25. 	示例 2:
    27. 	输入: -121
    28. 	输出: false
    29. 	解释: 从左向右读, 为 -121 。 从右向左读, 为 121- 。因此它不是一个回文数。
    30. 	示例 3:
    32. 	输入: 10
    33. 	输出: false
    34. 	解释: 从右向左读, 为 01 。因此它不是一个回文数。
    35. 	进阶:
    37. 	你能不将整数转为字符串来解决这个问题吗？',
    38.     '#include 
    39. 	#include 
    40. 	#include 
    41. 	#include 
    42. 	#include 
    44. 	using namespace std;
    46. 	class Solution{
    47. 		public:
    48. 			bool isPalindrome(int x)
    49. 			{
    50. 				//将你的代码写在下面
    51. 				
    52. 				return true;
    53. 			}
    54. 	};',
    55.     '#ifndef COMPILER_ONLINE
    56. 	#include "header.cpp"
    57. 	#endif
    60. 	void Test1()
    61. 	{
    62. 		// 通过定义临时对象，来完成方法的调用
    63. 		bool ret = Solution().isPalindrome(121);
    64. 		if(ret){
    65. 			std::cout << "通过用例1, 测试121通过 ... OK!" << std::endl;
    66. 		}
    67. 		else{
    68. 			std::cout << "没有通过用例1, 测试的值是: 121"  << std::endl;
    69. 		}
    70. 	}
    72. 	void Test2()
    73. 	{
    74. 		// 通过定义临时对象，来完成方法的调用
    75. 		bool ret = Solution().isPalindrome(-10);
    76. 		if(!ret){
    77. 			std::cout << "通过用例2, 测试-10通过 ... OK!" << std::endl;
    78. 		}
    79. 		else{
    80. 			std::cout << "没有通过用例2, 测试的值是: -10"  << std::endl;
    81. 		}
    82. 	}
    84. 	int main()
    85. 	{
    86. 		Test1();
    87. 		Test2();
    89. 		return 0;
    90. 	}',
    91.     1,
    92.     30000
    93. );
    94.  
    95.  
    96. select * from oj_table;

     

    •  这里我只录入了一道题为了测试

    4.4 下载并引入mysql库文件

    MySQL :: Download MySQL Community Server

    要使用C/C++连接MySQL，需要使用MySQL官网提供的库

     ​

     下载完毕后需要将其上传到云服务器，这里将下载的库文件存放在下面的目录：

    ​

    然后使用tar命令将压缩包解压到当前目录下： 

    xz -d mysql-8.0.37-linux-glibc2.28-i686.tar.xz

    tar xvf mysql-8.0.37-linux-glibc2.28-i686.tar

    ​

    进入解压后的目录当中，可以看到有一个include子目录和一个lib子目录，其中，include目录下存放的一堆头文件。而lib64目录下存放的就是动静态库。 

    ​ 

     然后在我们的项目中建立软连接

    ​

    4.5 一个BUG

    • 如果你当时下载myql把mysql-devel也下载了,不需要进行上面步骤

    • 这种引入第三方库的操作,可能会因为版本不兼容,而导致出错
      skipping incompatible ./lib/libmysqlclient.so when searching for -lmysqlclient

    •  建议直接安装: yum -y install mysql-devel

     4.5 重新设计oj_model

    因为oj_model模块是管理数据,提供接口的模块,所以要把这个项目变成mysql就需要重新设计

    1. #pragma once
    2. // 文件版本
    3. #include "../comm/util.hpp"
    4. #include "../comm/log.hpp"
    5. #include 
    6. #include 
    7. #include 
    8.  
    9. #include "./include/mysql.h"
    10.  
    11. namespace ns_model
    12. {
    13.     using namespace std;
    14.     using namespace ns_log;
    15.     using namespace ns_util;
    16.  
    17.     struct Question{
    18.         string number;// 题目编号,唯一
    19.         string title;// 题目标题
    20.         string star;// 难度: 简单 中等 困难
    21.         
    22.         int cpu_limit;// 题目的时间复杂度(S)
    23.         int mem_limit;// 题目的空间复杂度(KB)
    24.         
    25.         string desc;// 题目描述
    26.         string header; // 题目预设给用户在线编辑器的代码
    27.         string tail;// 题目测试用例,需要和header拼接
    28.     };    
    29.  
    30.     const std::string oj_questions = "oj_table";
    31.     const std::string host = "127.0.0.1";
    32.     const std::string user = "oj_client";
    33.     const std::string passwd = "123456";
    34.     const std::string db = "oj";
    35.     const int port = 3306;
    36.  
    37.     class Model
    38.     {
    39.     public:
    40.         Model(){
    41.         }
    42.         ~Model(){
    43.             ;
    44.         }
    45.         bool QueryMysql(const std::string &sql,vector*out){
    46.             // 这里的out是输出型参数
    47.             // 创建mysql句柄
    48.             MYSQL *my = mysql_init(nullptr);
    49.             // 连接数据库
    50.             if(nullptr == mysql_real_connect(my,host.c_str(),user.c_str(),passwd.c_str(),db.c_str(),port,nullptr,0)){
    51.                 LOG(FATAL) << "连接数据库失败!" << "\n";
    52.                 return false;
    53.             }
    54.  
    55.             // 一定要设置该链接的编码格式,要不然会出现乱码的问题
    56.             mysql_set_character_set(my,"utf8");
    57.             LOG(INFO) << "连接数据库成功!" << "\n";
    58.  
    59.             // 执行sql语句
    60.             if(0 != mysql_query(my,sql.c_str())){
    61.                 LOG(WARNING) << sql << " execute error! " << "\n";
    62.                 return false;
    63.             }
    64.  
    65.             // 提取结果
    66.             MYSQL_RES *res = mysql_store_result(my);// 本质就是一个2级指针
    67.  
    68.             // 分析结果
    69.             int rows = mysql_num_rows(res);// 获取行的数量
    70.             int cols = mysql_num_fields(res);// 获取列的数量
    71.  
    72.             Question q;
    73.             for(int i = 0;i < rows;i++){
    74.                 MYSQL_ROW row = mysql_fetch_row(res);
    75.                 q.number = row[0];
    76.                 q.title = row[1];
    77.                 q.star = row[2];
    78.                 q.desc = row[3];
    79.                 q.header = row[4];
    80.                 q.tail = row[5];
    81.                 q.cpu_limit = atoi(row[6]);
    82.                 q.mem_limit = atoi(row[7]);
    83.                 out->push_back(q);
    84.             }
    85.  
    86.             // 释放控件
    87.             free(res);
    88.             // 关闭mysql连接
    89.             mysql_close(my);
    90.  
    91.             return true;
    92.         }
    93.         // 获取所有题目,这里的out是输出型参数
    94.         bool GetAllQuestions(vector*out){
    95.             std::string sql = "select * from ";
    96.             sql += oj_questions;
    97.             return QueryMysql(sql,out);
    98.         }
    99.  
    100.         // 获取指定题目,这里的q是输出型参数
    101.         bool GetOneQuestion(const string& number,Question* q){
    102.            bool res = false;
    103.            std::string sql = "select * from ";
    104.            sql += oj_questions;
    105.            sql += " where number=";
    106.            sql += number;
    107.  
    108.            vector result;
    109.            if(QueryMysql(sql,&result)){
    110.                 if(result.size() == 1){
    111.                     *q = result[0];
    112.                     res = true;
    113.                 }
    114.            }
    115.  
    116.            return res;
    117.         }
    118.  
    119.         
    120.     private:
    121.         // 题号 : 题目细节
    122.         unordered_map questions;
    123.     };
    124. } 
    125.
    • mysql_init: 创建mysql句柄
    • mysql_real_connect: 创建mysql连接

    • mysql_query: 发起mysql请求

    • mysql_close: 关闭mysql连接

     4.6 相关测试

    ​

    • 编译期间告诉编译器头文件和库文件在哪里 -I指明搜索的头文件,-L指明搜索的lib
    • 并加上-lmysqlclient

    ​ 

    ​ 

    ​

    5. 扩展

    • 功能上更完善一下，判断一道题目正确之后，自动下一道题目
    • 基于注册和登陆的录题功能
      .....

    6. 完整项目链接 

    projects/负载均衡/OnlineJudge at main · 1LYC/projects · GitHub

  • 相关阅读:
    解决Github打开后排版紊乱问题
    SpringCloudAlibaba实战-nacos集群部署
    SpringBoot学习之Redis下载安装启动【Mac版本】（三十七）
    STM32学习笔记：IWDG_独立看门狗
    QT笔记——vs + qt 创建一个带界面的 dll 和 调用带界面的dll
    【MySQL】（七）SQL约束——主键约束、非空约束、唯一约束、默认值约束、外键约束
    Mac终端常用命令
    软文推广中媒体矩阵的优势在哪儿
    带网络变压器的RJ45网口连接器/集成RJ45网口连接器
    Mysql之部分表主从搭建及新增表
  • 原文地址：https://blog.csdn.net/LYC_462857656/article/details/139312642