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>
最后，我们修改一下下 /home/judge/src/web/template/syzoj/contestrank.php 就可以了。（红色圈住的是新增代码）
4 效果演示
扫一扫
738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
