当前位置：首页 > news >正文

负载均衡式的在线OJ项目编写(四)

news 2025/9/28 6:50:02

一.前期内容回顾

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

https://blog.csdn.net/weixin_60668256/article/details/152091526?fromshare=blogdetail&sharetype=blogdetail&sharerId=152091526&sharerefer=PC&sharesource=weixin_60668256&sharefrom=from_link

二.view模块编写和control模块编写

下面涉及到前后端联动的开发

contrl模块代码实现

#pragma once#include <iostream>
#include <string>
#include <vector>#include "../comm/util.hpp"
#include "../comm/log.hpp"
#include "oj_model.hpp"
#include "oj_view.hpp"namespace ns_control
{using namespace std;using namespace ns_log;using namespace ns_util;using namespace ns_model;using namespace ns_view;class Control{private:Model model_; //提供后台数据View view_;   //提供html渲染功能public:Control(){}~Control(){}//根据题目数据构建网页bool AllQuestions(std::string *html){bool ret = true;vector<Question> all;if(model_.GetAllQUestions(&all)){//获取一个题目信息成功,将所有的题目数据构建成网页view_.AllExpandHtml(all,html);}else{*html = "获取题目失败,形成题目列表失败";ret = false;}return ret;}bool OneQuestion(const string& number,string* html){bool ret = true;Question q;if(model_.GetOneQUestion(number,&q)){//获取指定题目信息成功,将所有的题目数据构建成网页view_.OneExpandHtml(q,html);}else{*html = "指定题目: " + number + " 不存在!";ret = false;}return ret;}};
}

现在我们要写html文件(推荐一个网站)

w3school 在线教程

我们在呈现题目的时候,推荐使用表格

<table><tr><th>题目编号</th><th>题目标题</th><th>题目难度</th></tr><tr><td>111</td><td>222</td><td>333</td></tr><tr><td>111</td><td>222</td><td>333</td></tr><tr><td>111</td><td>222</td><td>333</td></tr></table>

展示效果

实现网页跳转的功能

如果后续引⼊了ctemplate，⼀旦对⽹⻚结构进⾏修改，尽量的每次想看到结果，将server重启⼀下。ctemplate有⾃⼰的优化加速策略，可能在内存中存在缓存⽹⻚数据(old)

将这个标题啥的全部显示,<textarea>文本框用于代码编写

view模块代码具体实现:

#pragma once#include <iostream>
#include <string>
#include <ctemplate/template.h>
#include <vector>#include "oj_model.hpp"
#include "../comm/log.hpp"namespace ns_view
{// struct Question// {//     std::string number;//题目编号,唯一//     std::string title; //题目标题//     std::string star;  //难度//     int cpu_limit;     //题目时间要求//     int mem_limit;     //题目空间要求//     std::string desc;  //题目的描述//     std::string header;//题目预设给用户的在线编辑器的代码//     std::string tail;  //题目的测试用例,需要和header拼接,形成完整代码// };using namespace ns_model;const std::string template_path = "./template_html/";class View{public:View(){}~View(){}public:void AllExpandHtml(const vector<Question> &questions,std::string * html){//显示    题目的编号   题目的标题   题目的难度//推荐使用表格显示//1.形成路径std::string src_html = template_path + "all_questions.html";//2.形成数字字典ctemplate::TemplateDictionary root("all_questions");for(const auto& q:questions){ctemplate::TemplateDictionary *sub = root.AddSectionDictionary("question_list");sub->SetValue("number",q.number);sub->SetValue("title",q.title);sub->SetValue("star",q.star);}//3.获取被渲染的网页ctemplate::Template* tpl = ctemplate::Template::GetTemplate(src_html,ctemplate::DO_NOT_STRIP);//4.执行渲染tpl->Expand(html,&root);}void OneExpandHtml(const Question &question,std::string * html){//1.形成路径std::string src_html = template_path + "one_question.html";//2.形成数字典ctemplate::TemplateDictionary root("one_question");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.header);//3.获取被渲染的htmlctemplate::Template* tpl = ctemplate::Template::GetTemplate(src_html,ctemplate::DO_NOT_STRIP);//4.开始完成渲染功能tpl->Expand(html,&root);}};
}

all_question.html代码编写:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>在线OJ-题目列表</title>
</head>
<body><table><tr><th>编号</th><th>标题</th><th>难度</th></tr>{{#question_list}}<tr><td><a href="/question/{{number}}">{{number}}</a></td><td><a href="/question/{{number}}">{{title}}</a></td><td><a href="/question/{{number}}">{{star}}</a></td></tr>{{/question_list}}</table>
</body>
</html>

one_question代码实现:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>{{number}}.{{title}}</title>
</head>
<body><h4>{{number}}.{{title}}.{{star}}</h4><p>{{desc}}</p><textarea name="code"cols="100"rows="100">{{pre_code}}</textarea>
</body>
</html>

运行效果如下: