魔改hustoj源码使其支持显示队名和队员及女队标志

0. 起因&需求

本文涉及到的开源项目Github地址：https://github.com/zhblue/hustoj

事件的起因是，计算机学院要举办一个院级的ACM比赛，然后捏… 老师给我提了一个需求，就是能不能把比赛排行榜显示的队名下标注对应的队员，并且如果能在女队（指某个队伍的参赛者都为女生）的队伍名伍名后面标注一个“女队”的标志就好了。

当然，这个事情很简单，我们改个昵称就行了。。我相信老师也是这样想的，所以把这个任务交给了我，我也确实这样干了。

然鹅，，，修改完毕后，在测试的时候发现，有的队伍的昵称没有更新，并且他们在提交答案的时候，在“状态”页并没有发现其提交记录，可以说是很多bug了。

去hustoj的F&Q里寻找答案，果然：

来源： https://github.com/zhblue/hustoj/blob/master/wiki/FAQ.md

也就是说，如果队名足够长，就会严重影响到其他功能的正常使用。而且仅凭更改昵称实现，无法个性化定制每个部分的样式（颜色、字号、换行等），所以，最好的办法就是——修改源码。

1. 服务器&数据库

即然要修改源码，我们第一步就是要拿到部署hustoj的那台服务器的ssh权限。（如果是分布式部署，需要拿到部署web服务的那台）。

先在本地终端试一下：

ssh 账户名@主机名或ip

接着输入密码，连接成功：

在这里插入图片描述
直接登录mysql：

mysql -uroot # 这样连接不需要提供密码
use jol; # 默认数据库
select user_id, nick from users where user_id like 'kx%' limit 5;
# 从users表里查找前5个以 kx为前缀的用户（kx是某次竞赛批量生成用户们的前缀）

在这里插入图片描述

2. 比赛数据处理

2.1 生成队伍账号

我们拿到了本次比赛的参赛队伍名单（节选）：

账号	队名	队长	队员	是否为女队
kx_team01	王炸组	王晶	黄江晴史旭东	否
kx_team02	做的全队	牛颖杰	宋佳璘杨立帆	否
kx_team03	意念交流队	吴柯萱	冀晓晅张晗	是
kx_team04	翻斗花园	王浩	李响王振铭	否
kx_team05	风雨无组	张荣轩	许培李杰	是

这里我拿到的名单已经包含了账号、队名、密码的信息，所以只需要通过hustoj自带的比赛账号生成器批量生成一下就行。
在这里插入图片描述当然，如果密码尚未指定，还是用简约版的生成器比较好：

在这里插入图片描述

2.2 数据处理

2.1 中的表格被保存为：teamdata.xlsx

我们拿python处理一下表格数据，方便我们之后生成其他命令。

import json
import pandas as pd
import numpy as np

# 读取excel表格
data = pd.read_excel("teamdata.xlsx", sheet_name=0)

def format_team_members(raw_str):
    """
    处理包含多个队员姓名的字符串
    :param raw_str: 直接从表格读出来的字符串
    :return: 处理好的列表，每个列表元素为队员的姓名
    """
    return list(filter(lambda x: x != "" and x != None and x != "nan",
                       raw_str.replace("、", " ").replace("\xa0", " ").split(" ")))
                       
res_dict = dict()

for row in data.itertuples():
    team_name = getattr(row, "队名")
    team_head = getattr(row, "队长")
    team_members = format_team_members(str(getattr(row, "队员")))
    team_id = getattr(row, "账号")
    is_girl = True if getattr(row, "是否为女队") == "是" else False

    res_dict[team_id] = {
        "team_name": team_name, # 队伍名
        "team_head": team_head, # 队长
        "team_members": team_members, # 队员列表
        "team_length": 1 + len(team_members), # 总人数
        "is_girl": is_girl,
    }

	# 此处插旗flag，之后会在此处添加代码

print(json.dumps(res_dict, ensure_ascii=False))

生成的结果如下：

{
    "kx_team01": {
        "team_name": "王炸组",
        "team_head": "王晶",
        "team_members": [
            "黄江晴",
            "史旭东"
        ],
        "team_length": 3,
        "is_girl": false
    },
    "kx_team02": {
        "team_name": "做的全队",
        "team_head": "牛颖杰",
        "team_members": [
            "宋佳璘",
            "杨立帆"
        ],
        "team_length": 3,
        "is_girl": false
    },
    "kx_team03": {
        "team_name": "意念交流队",
        "team_head": "吴柯萱",
        "team_members": [
            "冀晓晅",
            "张晗"
        ],
        "team_length": 3,
        "is_girl": true
    },
    "kx_team04": {
        "team_name": "翻斗花园",
        "team_head": "王浩",
        "team_members": [
            "李响",
            "王振铭"
        ],
        "team_length": 3,
        "is_girl": false
    },
    "kx_team05": {
        "team_name": "风雨无组",
        "team_head": "张荣轩",
        "team_members": [
            "许培",
            "李杰"
        ],
        "team_length": 3,
        "is_girl": true
    }
}

这样，我们就相当于整了一个以user_id为键，以信息为值的哈希表，我们只要以某种方式在竞赛排名页内提供这个json串，用javascript操作dom就可以轻松实现。

2.3 重新编码

如何存储上一个步骤我们得到的信息，并让网页能够读取到呢？

方案一：直接存为 竞赛号（如1009）.json文件，然后当作一种静态资源，前端可以通过异步请求拿取。
方案二：用一个.php文件做中转，从$_REQUEST中获取竞赛号，然后返回对应的json字符串。前端通过异步请求拿取。
- 方案二的存储方案一：存在竞赛号（如1009）.json文件里，用file_get_contents()读取
- 方案二的存储方案二：存在users表的闲置字段里，拿sql获取

此处，我选择 方案二的存储方案二（因为闲置字段确实比较多）。

我们查看一下 users表的模型，可以看到school字段最适合存。

在这里插入图片描述

但是默认长度只有20，我们可以通过修改school字段的大小来解决。或者把json字符串编码一下，缩短一下长度：

(队员们的姓名以空格隔开)[总人数][女]

如kx_team01，编码为：(王晶黄江晴史旭东)[3]
如kx_team02，编码为：(吴柯萱冀晓晅张晗)[3][女]

用Python实现：

# 接在上段python代码里的循环体末部，插旗flag的地方

print(f'({" ".join([team_head, *team_members])})'
      f'[{1 + len(team_members)}]'
      f'{"[女]" if is_girl else ""}')

运行结果：

(王晶 黄江晴 史旭东)[3]
(牛颖杰 宋佳璘 杨立帆)[3]
(吴柯萱 冀晓晅 张晗)[3][女]
(王浩 李响 王振铭)[3]
(张荣轩 许培 李杰)[3][女]

编码方式确定了，剩下的就是更新数据库了。

有一种比较偷懒的方式，就是直接生成sql语句，然后复制粘贴到ssh终端里的mysql命令行，挨个执行。

Python编写update sql语句：

# 接在上段python代码里的循环体末部，插旗flag的地方

school =f'({" ".join([team_head, *team_members])})'\
      f'[{1 + len(team_members)}]'\
      f'{"[女]" if is_girl else ""}'
sql = f'update users set nick=\'{team_name}\', school=\'{school}\'' \
      f' where user_id = \'{team_id}\';'
print(sql)

运行结果：

update users set nick='王炸组', school='(王晶 黄江晴 史旭东)[3]' where user_id = 'kx_team01';
update users set nick='做的全队', school='(牛颖杰 宋佳璘 杨立帆)[3]' where user_id = 'kx_team02';
update users set nick='意念交流队', school='(吴柯萱 冀晓晅 张晗)[3][女]' where user_id = 'kx_team03';
update users set nick='翻斗花园', school='(王浩 李响 王振铭)[3]' where user_id = 'kx_team04';
update users set nick='风雨无组', school='(张荣轩 许培 李杰)[3][女]' where user_id = 'kx_team05';

我们直接复制粘贴到mysql客户端里执行即可。

在这里插入图片描述
至此，我们成功将【队长、队员信息、人数、是否为女队】信息存到了数据库里，只剩下中转php文件的编写了。

3 修改源码

PHP是一种在服务器端执行的脚本语言，尤其适用于Web开发并可嵌入HTML中。PHP语法学习了C语言，吸纳Java和Perl多个语言的特色发展出自己的特色语法，并根据它们的长项持续改进提升自己。PHP可以与数据库交互，创建动态内容。
PHP代码不需要编译，而是直接由解释器解释执行。这样就可以在不重启服务器的情况下修改代码，并立即看到效果。这对于快速开发和调试非常方便。

基于这个前提，我们可以直接修改生产环境下的源码并看到效果（不用重启任何程序）。

稍微用点时间，可以找到存放web服务php代码的地方 /home/judge/src/web。

在这里插入图片描述

3.1 中转php文件编写（api接口）

我们在 /home/judge/src/web 下新建文件夹 api/team，然后在里面新建一个index.php文件。

cd /home/judge/src/web
mkdir api/team -p
vi api/team/index.php

然后在get.php填写代码（这里我已经研究完了）：

<?php
/* /home/judge/src/web/api/team/get.php */
chdir("../..");
/* 参数接收 */
if (isset($_REQUEST['cid']) && is_numeric($_REQUEST['cid'])) {
    $cid = intval($_REQUEST['cid']);
}
/* 返回体设置 */
class ReturnBody
{
    var $code;
    var $msg;
    var $data;

    function success($data)
    {
        $this->code = 200;
        $this->msg = "success";
        $this->data = $data;
        echo json_encode($this, JSON_UNESCAPED_UNICODE);
        exit(0);
    }

    function fail($msg, $data)
    {
        $this->code = 401;
        $this->msg = $msg;
        $this->data = $data;
        echo json_encode($this, JSON_UNESCAPED_UNICODE);
        exit(0);
    }
}
header('Content-Type:Application/json;charset=utf-8');
$ret = new ReturnBody;

/* 必要的信息索引 */
$cache_time = 10;
$OJ_CACHE_SHARE = false;
require_once('./include/cache_start.php');
require_once('./include/db_info.inc.php');
require_once('./include/const.inc.php');
require_once('./include/memcache.php');
require_once('./include/setlang.php');



/* 队伍信息 */
if ($OJ_MEMCACHE) {
    $sql = "select `user_id`, concat('#[', `nick`, ']', `school`) as `name` from `users` where `users`.`user_id` in (select `user_id` from `solution` where `contest_id` = $cid );";
    $fb = mysql_query_cache($sql);
} else {
    $sql = "select `user_id`, concat('#[', `nick`, ']', `school`) as `name`  from `users` where `users`.`user_id` in (select `user_id` from `solution` where `contest_id` = ? );";
    $fb = pdo_query($sql, $cid);
}

$ans = array();
foreach ($fb as $val) {
    $ans[$val["user_id"]] = $val["name"];
}
$ret->success($ans);

if (file_exists('./include/cache_end.php'))
    require_once('./include/cache_end.php');

如此，我们访问http://oj地址/api/team/?cid=竞赛编号，就可以得到json字符串了。

{
    "code": 200,
    "msg": "success",
    "data": {
        "kx_team01": "王炸组(王晶 黄江晴 史旭东)[3]",
        "kx_team02": "做的全队(牛颖杰 宋佳璘 杨立帆)[3]",
        "kx_team03": "意念交流队(吴柯萱 冀晓晅 张晗)[3][女]",
        "kx_team04": "翻斗花园(王浩 李响 王振铭)[3]",
        "kx_team05": "风雨无组(张荣轩 许培 李杰)[3][女]",
    }
}

3.1 找到显示排行榜信息的php文件

很明显，和竞赛排名相关的php文件如下：
在这里插入图片描述
这里之所以有这么多的contestrank开头的文件，是因为排行榜页面不止一个，本文我们以 contestrank.php 为例。

这里有个细节，/home/judge/src/web/contestrank.php 确实是排行榜的页面，但是查看具体的代码可以在文件末尾看到这样一行代码：

/Template
require("template/".$OJ_TEMPLATE."/contestrank.php");

也就是说，/home/judge/src/web/contestrank.php 执行完以后，还要再继续执行，主题下的 contestrank.php。（/home/judge/src/web/contestrank.php 只进行了数据的获取，没有编写前端部分）

那么 $OJ_TEMPLATE 是指什么呢？
我们可以通过查看 /home/judge/src/web/include/db_info.inc.php获取。

在该文件，你可以看到这条语句：

static  $OJ_TEMPLATE="syzoj";
//使用的默认模板,template目录下的每个子目录都是一个模板, [bs3 mdui sweet syzoj mario bshark] work with discuss3

修改此处的变量值可以切换主题（如果你不知道，这个是一个很有用的知识），我们也得知$OJ_TEMPLATE其实就是 syzoj。

我们最终要修改的文件是：/home/judge/src/web/template/syzoj/contestrank.php。

3.2 异步请求

直接编写/home/judge/src/web/template/syzoj/contestrank.php好像有点不太好，最好的方式是把要新增的代码写在另一个文件里，然后在 /home/judge/src/web/template/syzoj/contestrank.php里引用。

# 创建 team-nick.php
touch /home/judge/src/web/include/team-nick.php

然后在 /home/judge/src/web/template/syzoj/contestrank.php 中的加入代码<?php include("include/team-nick.php") ?> ：

<?php include("include/team-nick.php") ?>
<?php include("template/$OJ_TEMPLATE/footer.php"); ?>

注意：<?php include("template/$OJ_TEMPLATE/footer.php"); ?> 这条是帮助你定位用的，我们实际插入的代码只有第一条。

接下来我们编辑 /home/judge/src/web/include/team-nick.php。

<script>
    function getHtmlByTag(team_len) {
        if (team_len == 2) {
            return `
            <span style="background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);padding: 3px;font-size: 8px;color:white;border-radius: 0.8em">
            双人成行
            </span>
            `;
        } else if (team_len == 1) {
            return `
        <span style="background-image: linear-gradient(to top, #f43b47 0%, #453a94 100%);padding: 3px;font-size: 8px;color:white;border-radius: 0.5em">
        单枪匹马
        </span>

            `;
        } else {
            return "";
        }
    }

    function getGirlTag(is_girl) {
        if (is_girl) {
            return `
            <span style="background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);padding: 3px;font-size: 8px;color:white;border-radius: 0.8em">
            女队
            </span>
            `;
        } else {
            return "";
        }
    }


    new Promise((res) => {
        res(document.querySelectorAll('#main > div.padding > table > tbody > tr > td > a[name]') || [])
    }).then((data) => {
        fetch('/api/team/?cid=<?php echo $cid; ?>')
            .then(response => response.json())
            .then(fetch_data => {
                const team_data = fetch_data.data;
                data.forEach((item) => {
                    const raw_text = team_data[item.name] || "";
                    if (raw_text.startsWith("#")) {
                        let team_numbers = raw_text.match(/\([^\)]+\)/g)[0];
                        team_numbers = team_numbers.substring(1, team_numbers.length - 1);
                        // team_numbers = team_numbers.split(" ");
                        let team_name = raw_text.match(/\[[^\)]+\]/g)[0];
                        team_name = team_name.substring(1, team_name.length - 1);

                        let team_len = raw_text.match(/\[[^\)]+\]/g)[1];
                        team_len = team_len.substring(1, team_len.length - 1);


                        item.innerHTML = `
                <div style="display: flex; justify-content: center">
                <div>

          <div style='font-size: 16px;font-weight: bold'>${team_name}${getHtmlByTag(team_len)}${getGirlTag(raw_text.includes("[女]"))}</div>
          <div style='font-size: 12px'>${team_numbers}</div>
          
          
                </div>
                </div>
        `;
                    }
                })

            });

    })
</script>