HOJ项目部署-前端定制案例分享:默认显示标签、 编辑器修改、导航栏、增加按钮音效、模拟机械键盘、AC彩带鼓掌喝彩特效、大屏、宠物升级、信奥编程python c++ 自动评测判题_前端网页编辑按下键盘不同类型按键音效的库

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相应结果处调用此方法即可

• 宠物

• • 目前内侧中，待更新

• 大屏

• • 内侧中，待更新