HOJ是最近比较火的在线自动判题系统,为OI er 和信奥指导老师们提供的平台,好用功能强大页面整洁
但很多机构多少想让自己辛苦搭建的系统更人性化或者特色一些,对OJ定制的一些要求,但苦于方向不同,技术上多少有些力不从心,下面通过两个案例提供定制思路,你也可以拥有自己定时的特色小OJ
首先下载代码:
# 项目拉取地址:
https://gitee.com/himitzh0730/hoj.git
# 切换到hoj-vue目录执行以下命令
#安装依赖
npm install
#运行服务
npm run serve
#修改代码后构建项目到dist文件夹,到服务器docker-compose.yml中修改hoj-frontend文件映射即可
npm run build
注意本地测试只需要修改这里指向后台,不用单独本地启动后台服
案例开发:
思路:你能在页面上看到的直接搜索汉字,在zh-CN.js
文件中搜索拿到编码,然后再IDEA中按ctrl+N
,搜索编码找到代码位置模仿修改,启动项目,可边修改项目会自动编译刷新
- 修改默认显示标签
ProblemList.vue
-
-
- 改为true
-
- 修改编辑器默认配置
CodeMirror.vue
-
-
- 修改默认主题和字体大小等
-
- 修改导航栏,
NavBar.Vue
增加外链
-
-
- 加链接,注意国际化文件里面都要添加对应的说明
{{ $t('m.Power') }}
- 加链接,注意国际化文件里面都要添加对应的说明
-
- 修改页脚
-
-
- 页脚定制文件,总宽度是xs=24,自行修改,占几个自己调整md即可
-
- 增加按钮音效
Problem.vue
-
-
- 增加音效函数,添加到指定按钮位置调用即可,比如在线测试按钮
- 增加音效函数,添加到指定按钮位置调用即可,比如在线测试按钮
-
- 模拟机械键盘
CodeMirror.vue
,如果想加个控制按钮,在中Data()属性中加入keyAudio: true并增加时间监听
keyAudio: {
handler: function (newVal, oldVal) {
this.keyAudio = newVal;
if (newVal) {
localStorage.setItem('keyAudio', '1');
} else {
localStorage.removeItem('keyAudio');
}
},
immediate: true
}
-
-
- 还需要这一块js文件,修改自己的MP3文件地址即可
-
- AC彩带鼓掌喝彩特效,创建一个彩带js文件,可网上找资源比如烟花特效等
confettiUtil.js
-
-
- 这里设置一定 概率 会喝彩鼓掌,首先定义一个画布,引入彩带js
- ac相应结果处调用此方法即可
-
- 宠物
-
- 目前内侧中,待更新
- 大屏
-
- 内侧中,待更新