HUSTOJ前端源代码解析(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。