# HUSTOJ前端源代码解析（PHP）

> 发布于：2023-03-09 | 分类：技能分享 | 原文：https://www.imbailey.cn/post/hustoj-frontend-source-code-analysis-php

## 需求

老师写了一本c++教材，这本教材的一大特色就是构建了一个有关c++的知识点网络。只有在电子版教材中，这种知识点网络才能真正发挥它的作用（比如点击超链接跳转到指定知识点），而出版社（清华大学出版社）不提供电子版教材的支持，因此我们需要自己搭建一个电子版教材网站。

刚好老师为了给本科生考试，让学长搭建了一个HUSTOJ。老师想了一个主意，把HUSTOJ修改一下，增加一些页面，把教材放进去，这样既有题目又有教材，而且貌似很方便就能实现。

作为组里唯一一个既懂一点前端，又懂一点后端，还懂一点运维的学生，这个任务自然落在我头上了。

## 分析

语言：

* HUSTOJ是用php写的，我没有学习过，但是看了一会源代码，就发现跟Django的模板语言比较像，还是能看得懂的，所以上手修改不成问题。
* 还有一个神器就是ChatGPT，看不懂的地方直接把代码复制进去，让它给我解释一下，它给出的的答案真的很让我满意。

思路：

* 首先把教材转成html文件，放在/home/judge/src/web目录下，这是网站的根目录。实操过程中，我新建了一个文件夹book，把`.html`改成`.php`后放了进去。
* 然后在根目录下新建一个book.php文件，无参数访问该文件为教材的目录；点击目录可跳转到教材的指定章节（带参数访问，如book.php?ch=2表示访问第二章）。
* 修改导航栏，增加一栏“教材”，然后指向book.php。

文件：

这里列出一些重要的的文件的作用，这个在官方文档中是没有给出来的，自己探索花了很长时间。

/home/judge/src/web：网站的根目录，下面的都是该目录下的文件：

* index.php：首页，主要引用了模板里的index.php，所以对首页的修改不要在这里改，而要在模板里的index.php里改。
* book.php：我自己加的教材页面，无参数访问该文件为教材的目录；点击目录可跳转到教材的指定章节（带参数访问，如book.php?ch=2表示访问第二章）。
* book/*.php：教材的静态html代码


/template/syzoj使用了syzoj主题目录文件，里面放的都是模板，下面的都是该目录下的文件：

* book_contents.php：我自己创建的目录。
* index.php：模板里的首页，在这里我又加了一个目录，引用book_contents.php。
* hedaer.php：修改导航栏在这里改，不要在nav.php改！

## 工具

工欲善其事，必先利其器，有哪些好用的工具可以用呢

* Tabby：很好用的跨平台开源终端软件，帮你管理密钥，sftp也很好用。
* macOS的文件搜索：不仅能搜文件名，还能搜文件内容，速度贼快（因为有建立索引），Windows可用everything这个软件
* VS code的ssh remote插件：可以直接用VS code修改服务器上的代码，比vim舒服多了。

## 部署

nginx+php的部署起来稍微有些麻烦，但是由于php的逻辑代码是嵌入在html文档中的（不像vue，每次修改完源码都需要编译），所以部署完再修改代码是很方便的。

## 总结

又解锁了一个新的技术栈php，qwq。