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

一.前期内容回顾

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

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模块代码实现

cpp 复制代码

#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 在线教程

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

html 复制代码

<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模块代码具体实现:

cpp 复制代码

#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.获取被渲染的html
            ctemplate::Template* tpl = ctemplate::Template::GetTemplate(src_html,ctemplate::DO_NOT_STRIP);
            //4.开始完成渲染功能
            tpl->Expand(html,&root);
        }
    };
}

all_question.html代码编写:

cpp 复制代码

<!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代码实现:

cpp 复制代码

<!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>

运行效果如下:

未完待续