OnlineJudge平台（负载均衡）
文章目录
-
- 1.所用技术与开发环境
- 2.项目宏观结构
- 3.compiler服务设计
- 4. 基于MVC结构的oj服务设计
- 5. 前端页面设计
- 6 安装指南
-
- 升级 gcc
- 安装 jsoncpp
- 安装 cpp-httplib
- 安装boost库
- 安装与测试 ctemplate
- 使用Ace在线编辑器（直接复制粘贴即可）
- 在线OJ样例题目
- MySQL 建表
项目链接，可以作为参考该代码阅读里面的文档路径
项目gitee链接https://gitee.com/yuyka/online-bridge-platform/tree/master
1.所用技术与开发环境
所用技术:
-
C++ STL 标准库
-
Boost 准标准库(字符串切割)
-
cpp-httplib 第三方开源网络库
-
ctemplate 第三方开源前端网页渲染库
-
jsoncpp 第三方开源序列化、反序列化库
-
负载均衡设计
-
多进程、多线程
-
MySQL C connect
-
Ace前端在线编辑器(了解)
-
html/css/js/jquery/ajax (了解)
开发环境：
- Centos 7 云服务器
- vscode
- Mysql Workbench
2.项目宏观结构
我们的项目核心是三个模块：
- comm : 公共模块
- compile_server : 编译与运行模块
- oj_server : 获取题目列表，查看题目编写题目界面，负载均衡，其他功能
I. leetcode 结构
只实现类似 leetcode 的题目列表+在线编程功能
II. 我们的项目宏观结构
III. 编写思路
- 先编写 compile_server
- oj_server
- version1 基于文件版的在线OJ
- 前端的页面设计
- version2 基于 MySQL 版的在线O
3.compiler服务设计
提供的服务：编译并运行代码，得到格式化的相关的结果
功能一、编写compile模块 （编译功能）
编写过程：
- 第一步，创建子进程完成文件编译
- 第二步，父进程检查是否编译成功
- temp目录下存放所有的临时文件，包含
.cpp，.exe，.stderro ，.compile_erro后缀的文件。 - 第三步，重定向子进程错误流，子进程编译错误后，将错误信息存放到重定向文件里，我们把该文件存放到temp目录以
.compile_erro后缀命名
#pragma once
#include 日志信息的编写（其他）
设计的需要：
LOG(INFo) << "message（日志信息）" << "\n";
打印文件名，错误行，错误等级，并且返回标准输出流，方便日志信息输出。
函数模型：
inline std::ostream &Log(const std::string &level /*错误登记*/, const std::string &file_name /*错误文件*/, int line /*错误行*/)
函数宏替换(方便后期调用):
// LOG(INFo) << "message（日志信息）" << "\n";
// 开放式日志
// __FILE__ ,__LINE__ 为宏定义，用来打印当前文件名和当前执行行
#define LOG(level) Log(#level/*宏参数，必须要有'#'*/, __FILE__, __LINE__)
日志信息的实现代码（其他）
#pragma once
#include 获取时间戳代码 （其他）
class Util_Time
{
public:
// 获取时间戳
static std::string GetTimeStamp()
{
struct timeval _time;
gettimeofday(&_time, nullptr);
return std::to_string(_time.tv_sec);
}
//获得毫秒时间戳
static std::string GetTimeMs()
{
struct timeval _time;
gettimeofday(&_time, nullptr);
return std::to_string(_time.tv_sec * 1000 + _time.tv_usec / 1000);
}
};
运行效果图：
功能二 、编写 Runner 模块 （运行功能）
- 该功能负责运行编译后的可执行文件，只关心运行错误，不关心运行结果。
- 第一步、创建子进程运行可执行程序，
- 重定向子进程三个标准流，重定向到以
.stdin,.stdout,.stderro后缀的文件里。 - 第二步、父进程检查，子进程运行是否异常，如果异常则会收到信号
- 第三步、给子进程添加资源限制，例如：运行超时，内存超限，
资源限制接口讲解
接口测试：
#include 编写 Runner 模块:
#pragma once
#include 功能三、compile_run （编译并运行功能）
如上图分析我们compile_run 大概要实现的功能：
- 该模块用于完成用户数据到compile和runner模块再到用户的过程。
- 适配用户请求, 定制通信协议字段
- 形成唯一的
.cpp文件，可以让compile()运行 - 正确的调用compile and run
Jsoncpp的使用 (其他）
- 适配用户请求, 定制通信协议字段
- Jsoncpp的安装:
sudo yum install -y jsoncpp-devel
序列化：
#include 
反序列化：
#include 
编译和运行模块 （功能实现）1
#pragma once
#include "compiler.hpp"
#include "runner.hpp"
#include "../common/log.hpp"
#include "../common/util.hpp"
#include - 解析 in_json
- 形成临时src文件【完成编译和运行的工作】
- 编译和运行代码
- 获取状态码，错误原因……运行成功则获取输出文件内容……
- 状态码……生成 out_json
- 清理生成的临时文件
- 返回out_json
编译和运行模块 （功能实现）2
#pragma once
#include "compiler.hpp"
#include "runner.hpp"
#include "../common/log.hpp"
#include "../common/util.hpp"
#include 测试用例：
compiler 提供一个编译网络服务，通过http 让client 给我们 上传一个json string， 下面的工作，充当客户端请求的json串。
#include"compiler.hpp"
#include"runner.hpp"
#include"compile_run.hpp"
#include
int main(){
std::cout << "你可以看见我了" << std::endl;
int * p=new int[1024*1024*1024];
return 0;
})" ;
// 用例2：测试编译
in_value["code"] = R"(#include
int main(){
std::cout << "你可以看见我了" << std::endl;
aaaaaaaaaaaa;
return 0;
})" ;
// 用例1：测试运行正确
in_value["code"] = R"(#include
int main(){
std::cout << "你可以看见我了" << std::endl;
return 0;
})" ;
in_value["input"] = "";
in_value["cpu_limit"] = 1;
in_value["mem_limit"] = 10240*3;//kb为单位，这里为30mb
Json::FastWriter writer;
in_json = writer.write(in_value);
std::cout << in_json << std::endl;
//这个是将来给客户端返回的json串
std::string out_json;
ns_compile_and_run::CompileAndRun::Start(in_json, &out_json);
std::cout << out_json << std::endl;
}
4. 基于MVC结构的oj服务设计
本质：建立一个小型网站
- 获取首页，用题目列表充当
- 编辑区域页面
- 提交判题功能(编译并运行)
| 字母 | 字母含义 |
|---|---|
| M: | Model,通常是和数据交互的模块，比如，对题库进行增删改查（文件版，MySQL） |
| V: | view, 通常是拿到数据之后，要进行构建网页，渲染网页内容，展示给用户的(浏览器) |
| C: | control, 控制器，就是我们的核心业务逻辑 |
第一个功能：用户请求的服务路由功能 (oj_server.cpp)下面只是模版，需待补充
- oj_server 主要是处理请求
- 得到对方请求后调用用M，V，C模块来处理请求
#include "../common/httplib.h"
#include 设计题库(文件版的)
- 在oj_server目录下创建题目列表目录名为questions，
- 使用编号为命名的目录下创建题目，每个题目下包含三个文件，
- desc.txt ：描述题目
- header.cpp ： 用户编码区
- tail.cpp : 测试用例，条件编译只是不让文件有报错展示，
- 后续，tail.cpp文件将会与用户提交的代码进行拼接，使用
g++ -D COMPILER_ONLINE就是给文件定义一个宏，可以去除 条件编译内容。
实现MVC模块
1.oj_model.hpp
- 用于加载题目
- 把结果给oj_view,由oj_view渲染模版页面
#pragma once
//文件版本
#include "../common/util.hpp"
#include "../common/log.hpp"
#include 2.oj_view.hpp 渲染的页面
html网页模型，后面优化网页
######### 题目列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线OJ-题目列表</title>
</head>
<body>
<div class="container">
<!-- 导航栏， 功能不实现-->
<div class="question_list">
<h1>OnlineJuge题目列表</h1>
<table>
<tr>
<th class="item">编号</th>
<th class="item">标题</th>
<th class="item">难度</th>
</tr>s
{{#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>
###############################################
# 题目描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>{{number}}.{{title}}</title>
</head>
<body>
<h4>{{number}}.{{title}}.{{star}}</h4>
<P>{{desc}}</P>
<textarea name="code" cols="300" rows="100">{{pre_code}}</textarea>
</body>
</html>
渲染之后的效果：
进行网页渲染
在备注栏学习：
- 安装ctemplate库
- ctemplate库的基本使用
#pragma once
#include 3.oj_control.hpp
oj_control模块的核心工作：
- 处理核心业务逻辑
- 用户需求：
- 1.题目列表html网页
- 2.特定题目网页
- 3.判题服务
- control将view，model，compile_server,组合使用解决业务逻辑。
下面代码只实现了一部分，处理判题功能没有实现，原因是Judge需要有一个负载均衡的算法，有了负载均衡我们能够均衡的发送请求给每一个compile_server，不至于出现极端情况。
class Control
{
private:
Model model_; //提供后台数据
View view_; //提供html渲染功能
public:
Control()
{
}
~Control()
{
}
public:
//根据题目数据构建网页
// html: 输出型参数
bool AllQuestions(string *html)
{
bool ret = true;
vector<struct Question> all;
if (model_.GetAllQuestions(&all))
{
sort(all.begin(), all.end(), [](const struct Question &q1, const struct Question &q2){
return atoi(q1.number.c_str()) < atoi(q2.number.c_str());
});
// 获取题目信息成功，将所有的题目数据构建成网页
view_.AllExpandHtml(all, html);
}
else
{
*html = "获取题目失败, 形成题目列表失败";
ret = false;
}
return ret;
}
bool Question(const string &number, string *html)
{
bool ret = true;
struct Question q;
if (model_.GetOneQuestion(number, &q))
{
// 获取指定题目信息成功，将所有的题目数据构建成网页
LOG(INFO)<<"获取指定题目信息成功，将所有的题目数据构建成网页\n";
view_.OneExpandHtml(q, html);
}
else
{
*html = "指定题目: " + number + " 不存在!";
ret = false;
}
return ret;
}
void Judge(const std::string& in_json,std::string*out_json)
{
//1.反序列化 in_json ,得到 id，code，input
//2.code拼接测试用例
//3.选择负载低的 conliler_server
//4.建立客户端，发送请求
//5.结果返回out_json
}
// code: #include...
// input: ""
};
} // namespace name
4.oj_server.hpp
我们再次补充oj_server.hpp 模块。
#include "../common/httplib.h"
#include 5.实现负载均衡
实现Judge的功能核心步骤如下：
class Control
{
public:
void Judge(const std::string& in_json,std::string*out_json)
{
//1.反序列化 in_json ,得到 id，code，input
//2.code拼接测试用例
//3.选择负载低的 conliler_server
//4.建立客户端，发送请求
//5.结果返回out_json
}
};
} // namespace name
除第三步外，我们现在都能实现，现在我们来设计负载均衡。
负载均衡设计
添加comile_server的配置文件，用来初始化主机对象使用，保存每台compile_server的ip 和 port
#### service_machine.conf文件
101.33.225.53 8080
101.33.225.53 8081
101.33.225.53 8082
负载均衡功能模块
class Machine
{
public:
std::string ip; //编译服务的ip
int port; //编译服务的port
uint64_t load; //编译服务的负载
std::mutex *mtx; // mutex禁止拷贝的，使用指针
public:
// 提升主机负载
void IncLoad();
// 减少主机负载
void DecLoad();
// 重启主机，需要使负载初始化
void ResetLoad();
};
- Machine对象：描述主机信息，负载情况
class LoadBlance
{
private:
// 可以给我们提供编译服务的所有的主机
// 每一台主机都有自己的下标，充当当前主机的id
std::vector<Machine> machines;
// 所有在线的主机id
std::vector<int> online;
// 所有离线的主机id
std::vector<int> offline;
// 保证LoadBlance它的数据安全
std::mutex mtx;
public:
//初始化machines，即从文件或者数据里加载所有题目
LoadBlance();
// 根据全有主机的赋值情况，选择主机，id,m为输出型参数
bool SmartChoice(int *id, Machine **m);
// 有下线的主机，需要修改成员变量，即online里减少对应主机，offline里添加对应主机
void OfflineMachine(int which);
// 让全部的主机都上线
void OnlineMachine();
// for test
void ShowMachines();
};
- LoadBlance对象：根据每台主机的负载情况，来选择主机
#pragma once
#include
continue;
}
Machine m;
m.ip = tokens[0];
m.port = atoi(tokens[1].c_str());
m.load = 0;
m.mtx = new std::mutex();
std::cout<<"创建Machine对象成功"<<std::endl;
online.push_back(machines.size());
machines.push_back(m);
}
in.close();
return true;
}
// id: 输出型参数
// m : 输出型参数
bool SmartChoice(int *id, Machine **m)
{
// 1. 使用选择好的主机(更新该主机的负载)
// 2. 我们需要可能离线该主机
mtx.lock();
// 负载均衡的算法
// 1. 随机数+hash
// 2. 轮询+hash
int online_num = online.size();
if (online_num == 0)
{
mtx.unlock();
LOG(FATAL) << " 所有的后端编译主机已经离线, 请运维的同事尽快查看"
<< "\n";
return false;
}
// 通过遍历的方式，找到所有负载最小的机器
*id = online[0];
*m = &machines[online[0]];
uint64_t min_load = machines[online[0]].Load();
for (int i = 1; i < online_num; i++)
{
uint64_t curr_load = machines[online[i]].Load();
if (min_load > curr_load)
{
min_load = curr_load;
*id = online[i];
*m = &machines[online[i]];
}
}
mtx.unlock();
return true;
}
void OfflineMachine(int which)
{
mtx.lock();
for (auto iter = online.begin(); iter != online.end(); iter++)
{
if (*iter == which)
{
machines[which].ResetLoad();
//要离线的主机已经找到啦
online.erase(iter);
offline.push_back(which);
break; //因为break的存在，所有我们暂时不考虑迭代器失效的问题
}
}
mtx.unlock();
}
void OnlineMachine()
{
//我们统一上线，后面统一解决
mtx.lock();
online.insert(online.end(), offline.begin(), offline.end());
offline.erase(offline.begin(), offline.end());
mtx.unlock();
LOG(INFO) << "所有的主机有上线啦!"
<< "\n";
}
// for test
void ShowMachines()
{
mtx.lock();
std::cout << "当前在线主机列表: ";
for (auto &id : online)
{
std::cout << id << " ";
}
std::cout << std::endl;
std::cout << "当前离线主机列表: ";
for (auto &id : offline)
{
std::cout << id << " ";
}
std::cout << std::endl;
mtx.unlock();
}
};
class Control
{
private:
Model model_; //提供后台数据
View view_; //提供html渲染功能
LoadBlance load_blance_; //核心负载均衡
/********************************
* 中间代码隐藏
* *********************************/
public:
// in_json : 题号+code+input
void Judge(const std::string &number, const std::string in_json, std::string *out_json)
{
// LOG(DEBUG) << in_json << " \nnumber:" << number << "\n";
// 0. 根据题目编号，直接拿到对应的题目细节
struct Question q;
model_.GetOneQuestion(number, &q);
// 1. in_json进行反序列化，得到题目的id，得到用户提交源代码，input
Json::Reader reader;
Json::Value in_value;
reader.parse(in_json, in_value);
std::string code = in_value["code"].asString();
// 2. 反序列化重新拼接用户代码+测试用例代码，形成新的代码
Json::Value compile_value;
compile_value["input"] = in_value["input"].asString();
compile_value["code"] = code + "\n" + q.tail;
compile_value["cpu_limit"] = q.cpu_limit;
compile_value["mem_limit"] = q.mem_limit;
Json::FastWriter writer;
std::string compile_string = writer.write(compile_value);
// 3. 选择负载最低的主机(差错处理)
// 规则: 一直选择，直到主机可用，否则，就是全部挂掉
while (true)
{
int id = 0;
Machine *m = nullptr;
if (!load_blance_.SmartChoice(&id, &m))
{
break;
}
// 4. 然后发起http请求，得到结果
Client cli(m->ip, m->port);
m->IncLoad();
LOG(INFO) << " 选择主机成功, 主机id: " << id << " 详情: " << m->ip << ":" << m->port << " 当前主机的负载是: " << m->Load() << "\n";
if (auto res = cli.Post("/compile_and_run", compile_string, "application/json;charset=utf-8"))
{
// 5. 将结果赋值给out_json
if (res->status == 200)
{
*out_json = res->body;
m->DecLoad();
LOG(INFO) << "请求编译和运行服务成功..."
<< "\n";
break;
}
m->DecLoad();
}
else
{
//请求失败，说明访问的主机掉线了
LOG(ERROR) << " 当前请求的主机id: " << id << " 详情: " << m->ip << ":" << m->port << " 可能已经离线"
<< "\n";
load_blance_.OfflineMachine(id);
load_blance_.ShowMachines(); //仅仅是为了用来调试
}
}
}
// code: #include...
// input: ""
};
} // namespace name
整个oj_sever的宏观图
5. 前端页面设计
丐版的首页
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 .font_ {
/* 设置标签为块级元素，独占一行，可以设置高度宽度等属性 */
display: block;
/* 设置每个文字的上外边距 */
margin-top: 20px;
/* 去掉a标签的下划线 */
text-decoration: none;
/* 设置字体大小
font-size: larger; */
}
style>
head>
<body>
<div class="container">
<div class="navbar">
<a href="/">首页a>
<a href="/question_all">题库a>
<a href="#">竞赛a>
<a href="#">讨论a>
<a href="#">求职a>
<a class="login" href="#">登录a>
div>
<div class="content">
<h1 class="font_">欢迎来到我的OnlineJudge平台h1>
<p class="font_">这个我个人独立开发的一个在线OJ平台p>
<a class="font_" href="/question_all">点击我开始编程啦!a>
div>
div>
body>
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 .question_list {
padding-top: 50px;
width: 800px;
height: 100%;
margin: 0px auto;
/* background-color: #ccc; */
text-align: center;
}
.container .question_list table {
width: 100%;
font-size: large;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
margin-top: 50px;
background-color: rgb(243, 248, 246);
}
.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;
}
.container .footer {
width: 100%;
height: 50px;
text-align: center;
line-height: 50px;
color: #ccc;
margin-top: 15px;
}
style>
head>
<body>
<div class="container">
<div class="navbar">
<a href="/">首页a>
<a href="/all_questions">题库a>
<a href="#">竞赛a>
<a href="#">讨论a>
<a href="#">求职a>
<a class="login" href="#">登录a>
div>
<div class="question_list">
<h1>OnlineJuge题目列表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>
指定题目网页设计
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{number}}.{{title}}title>
<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:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.container .part1 .right_code {
width: 50%;
float: right;
}
.container .part1 .right_code .ace_editor {
height: 600px;
}
.container .part2 {
width: 100%;
overflow: hidden;
}
.container .part2 .result {
width: 300px;
float: left;
}
.container .part2 .btn-submit {
width: 120px;
height: 50px;
font-size: large;
float: right;
background-color: #26bb9c;
color: #FFF;
/* 给按钮带上圆角 */
/* border-radius: 1ch; */
border: 0px;
margin-top: 10px;
margin-right: 10px;
}
.container .part2 button:hover {
color:green;
}
.container .part2 .result {
margin-top: 15px;
margin-left: 15px;
}
.container .part2 .result pre {
font-size: large;
}
style>
head>
<body>
<div class="container">
<div class="navbar">
<a href="/">首页a>
<a href="/question_all">题库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(){
// alert("嘿嘿!");
// 1. 收集当前页面的有关数据, 1. 题号 2.代码
// console.log(judge_url);
// 2. 构建json，并通过ajax向后台发起基于http的json请求
// 3. 得到结果，解析并显示到 result中
script>
body>
html>
//代码提交
1.收集当前页面的有关数据, a. 题号 a.代码,我们采用JQuery来进行获取html中的内容
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，并向后台发起请求
$.ajax({
method: 'Post', // 向后端发起请求的方式
url: judge_url, // 向后端指定的url发起请求
dataType: 'json', // 告知server，我需要什么格式
contentType: 'application/json;charset=utf-8', // 告知server，我给你的是什么格式
data: JSON.stringify({
'code':code,
'input': ''
}),
success: function(data){
//成功得到结果
console.log(data);
}
});
// 3. 得到结果，解析并显示到 result中
function show_result(data)
{
// console.log(data.status);
// console.log(data.reason);
// 拿到result结果标签
var result_div = $(".container .part2 .result");
// 清空上一次的运行结果
result_div.empty();
// 首先拿到结果的状态码和原因结果
var _status = data.status;
var _reason = data.reason;
var reason_lable = $( "<p>",{
text: _reason
});
reason_lable.appendTo(result_div);
if(status == 0){
// 请求是成功的，编译运行过程没出问题，但是结果是否通过看测试用例的结果
var _stdout = data.stdout;
var _stderr = data.stderr;
var stdout_lable = $("<pre>", {
text: _stdout
});
var stderr_lable = $("<pre>", {
text: _stderr
})
stdout_lable.appendTo(result_div);
stderr_lable.appendTo(result_div);
}
else{
// 编译运行出错,do nothing
}
}
// 4. 全部网页代码
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{number}}.{{title}}title>
<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:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.container .part1 .right_code {
width: 50%;
float: right;
}
.container .part1 .right_code .ace_editor {
height: 600px;
}
.container .part2 {
width: 100%;
overflow: hidden;
}
.container .part2 .result {
width: 300px;
float: left;
}
.container .part2 .btn-submit {
width: 120px;
height: 50px;
font-size: large;
float: right;
background-color: #26bb9c;
color: #FFF;
/* 给按钮带上圆角 */
/* border-radius: 1ch; */
border: 0px;
margin-top: 10px;
margin-right: 10px;
}
.container .part2 button:hover {
color:green;
}
.container .part2 .result {
margin-top: 15px;
margin-left: 15px;
}
.container .part2 .result pre {
font-size: large;
}
style>
head>
<body>
<div class="container">
<div class="navbar">
<a href="/">首页a>
<a href="/question_all">题库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(){
// alert("嘿嘿!");
// 1. 收集当前页面的有关数据, 1. 题号 2.代码
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，并通过ajax向后台发起基于http的json请求
$.ajax({
method: 'Post', // 向后端发起请求的方式
url: judge_url, // 向后端指定的url发起请求
dataType: 'json', // 告知server，我需要什么格式
contentType: 'application/json;charset=utf-8', // 告知server，我给你的是什么格式
data: JSON.stringify({
'code':code,
'input': ''
}),
success: function(data){
//成功得到结果
// 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 reason_lable = $( ""
,{
text: _reason
});
reason_lable.appendTo(result_div);
if(status == 0){
// 请求是成功的，编译运行过程没出问题，但是结果是否通过看测试用例的结果
var _stdout = data.stdout;
var _stderr = data.stderr;
var stdout_lable = $(""
, {
text: _stdout
});
var stderr_lable = $(""
, {
text: _stderr
})
stdout_lable.appendTo(result_div);
stderr_lable.appendTo(result_div);
}
else{
// 编译运行出错,do nothing
}
}
}
script>
body>
html>
6 安装指南
升级 gcc
$ gcc -v
Using built-in specs.
COLLECT_GCC=gcc
COLLECT_LTO_WRAPPER=/usr/libexec/gcc/x86_64-redhat-linux/4.8.5/lto-wrapper
Target: x86_64-redhat-linux
Configured with: ../configure --prefix=/usr --mandir=/usr/share/man --
infodir=/usr/share/info --with-bugurl=http://bugzilla.redhat.com/bugzilla --enable-
bootstrap --enable-shared --enable-threads=posix --enable-checking=release --with-system-
zlib --enable-__cxa_atexit --disable-libunwind-exceptions --enable-gnu-unique-object --
enable-linker-build-id --with-linker-hash-style=gnu --enable-languages=c,c++,objc,obj-
c++,java,fortran,ada,go,lto --enable-plugin --enable-initfini-array --disable-libgcj --
with-isl=/builddir/build/BUILD/gcc-4.8.5-20150702/obj-x86_64-redhat-linux/isl-install --
with-cloog=/builddir/build/BUILD/gcc-4.8.5-20150702/obj-x86_64-redhat-linux/cloog-install -
-enable-gnu-indirect-function --with-tune=generic --with-arch_32=x86-64 --build=x86_64-
redhat-linux
Thread model: posix
gcc version 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC)
cpp-httplib 用老的编译器，要么编译不通过，要么直接运行报错
百度搜索：scl gcc devsettool升级gcc
//安装scl
$ sudo yum install centos-release-scl scl-utils-build
//安装新版本gcc，这里也可以把7换成8或者9，我用的是9，也可以都安装
$ sudo yum install -y devtoolset-7-gcc devtoolset-7-gcc-c++
$ ls /opt/rh/
//启动： 细节，命令行启动只能在本会话有效
$ scl enable devtoolset-7 bash
$ gcc -v
//可选：如果想每次登陆的时候，都是较新的gcc，需要把上面的命令添加到你的~/.bash_profile中
$ cat ~/.bash_profile
# .bash_profile
# Get the aliases and functions
if [ -f ~/.bashrc ]; then
. ~/.bashrc
fi
# User specific environment and startup programs
PATH=$PATH:$HOME/.local/bin:$HOME/bin
export PATH
#添加下面的命令，每次启动的时候，都会执行这个scl命令
scl enable devtoolset-7 bash
or
scl enable devtoolset-8 bash
or
scl enable devtoolset-9 bash
安装 jsoncpp
$ sudo yum install -y jsoncpp-devel
安装 cpp-httplib
最新的cpp-httplib在使用的时候，如果gcc不是特别新的话有可能会有运行时错误的问题
建议：cpp-httplib 0.7.15
下载zip安装包，上传到服务器即可
cpp-httplib gitee链接：https://gitee.com/yuanfeng1897/cpp-httplib?_from=gitee_search
v0.7.15版本链接： https://gitee.com/yuanfeng1897/cpp-httplib/tree/v0.7.15
下载以后，我们在当前路径，找到httplib.h
把httplib.h拷贝到我们的项目中即可，就这么简单
使用样例:
#include "httplib.h"
int main()
{
httplib::Server svr;
svr.Get("/hi", [](const httplib::Request &req, httplib::Response &rsp){
rsp.set_content("你好,世界!", "text/plain; charset=utf-8");
});
svr.listen("0.0.0.0", 8080);
return 0;
}
更多的细节可以看gitee上面的使用手册,结合源码学习
安装boost库
sudo yum install -y boost-devel //是boost 开发库
安装与测试 ctemplate
安装
## 如果连接挂了，可以去gitee上搜索ctemplate
$ git clone https://gitee.com/mirrors_svn2github/ctemplate.git
$ ./autogen.sh
$ ./configure
$ make //编译
$ make install //安装到系统中
测试用例：
// 1. 编写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>用来测试</title>
</head>
<body>
<p>{{key}}</p>
<p>{{key}}</p>
<p>{{key}}</p>
<p>{{key}}</p>
<p>{{key}}</p>
</body>
</html>
//2. 编写ctemplate代码
#include 注意：调用时可能出现找不到动态库的情况，我们需要配置一下环境变量，可以先使用ldd 编译后的文件 查看是否有 not found 。如果出现解决方案：
1.find / -name 'ctemplate : 找到动态库路径
2.vim ~/.bashrc
3. 填入 export LD_LIBRARY_PATH=$LD_LIBRARY_PATH: 填入你的动态库路径
使用Ace在线编辑器（直接复制粘贴即可）
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>Ace测试title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"
type="text/javascript"
charset="utf-8">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js"
type="text/javascript"
charset="utf-8">script>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
div .ace_editor {
height: 600px;
width: 100%;
}
style>
head>
<body>
<div>
<pre id="code" class="ace_editor"><textarea class="ace_text-
input">#include<iostream>
int main()
{
std::cout << "hello ace editor" << std::endl;
return 0;
}textarea>pre>
<button class="bt" onclick="submit()">提交代码button><br/>
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
});
script>
body>
html>
在线OJ样例题目
//##questions.list: 题目编号 题目标题 题目难度 题目所在路径 题目时间限制(s) 题目空间限制(kb)##
1 回文数 简单 ./oj_questions/1 1 5000
//##题目描述##
判断一个整数是否是回文数。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。
示例 1:
输入: 121
输出: true
示例 2:
输入: -121
输出: false
解释: 从左向右读, 为 -121 。 从右向左读, 为 121- 。因此它不是一个回文数。
示例 3:
输入: 10
输出: false
解释: 从右向左读, 为 01 。因此它不是一个回文数。
进阶:
你能不将整数转为字符串来解决这个问题吗？
//##题目头部，就是用户 写代码 时，所看到的的代码结构##
#include MySQL 建表
CREATE TABLE IF NOT EXISTS `questions`(
id int PRIMARY KEY AUTO_INCREMENT COMMENT '题目的ID',
title VARCHAR(64) NOT NULL COMMENT '题目的标题',
star VARCHAR(8) NOT NULL COMMENT '题目的难度',
question_desc TEXT NOT NULL COMMENT '题目描述',
header TEXT NOT NULL COMMENT '题目头部，给用户看的代码',
tail TEXT NOT NULL COMMENT '题目尾部，包含我们的测试用例',
time_limit int DEFAULT 1 COMMENT '题目的时间限制',
mem_limit int DEFAULT 5000000 COMMENT '题目的空间限制'
)ENGINE=INNODB DEFAULT CHARSET=utf8;