qduoj前端二次开发简略流程(2020.10.10更新)
为缩减篇幅,已略去nodejs、git等软件安装操作,若有疑问请搜索相关教程。
环境:win10,qduoj前端github:https://github.com/QingdaoU/OnlineJudgeFE
1、下载源码并解压,或用git拉取源码:
git clone https://github.com/QingdaoU/OnlineJudgeFE.git
2、安装依赖,cnpm是淘宝npm镜像:
cd .\OnlineJudgeFE\
cnpm install
3、按照官方文档继续进行:
npm run build:dll
4、打开文件 \OnlineJudgeFE\config\index.js,起始位置加入一行以指定后台数据来源:
process.env.TARGET = 'http://192.168.78.128/'
也可以直接指向qduoj:
process.env.TARGET = 'https://qduoj.com/'
5、启动本地测试:
npm run dev
效果如图:
前端使用Vue框架编写,官网:https://cn.vuejs.org/
这里以修改默认语言为中文做示例,找到 src\i18n\index.js 修改locale的值为 'zh-CN'
6、修改完成后打包:
npm run build
7、让OJ加载修改后的前端文件
dist文件夹就是编译后的前端文件。
把dist文件夹放到运行oj的ubuntu中,比如/home/zzh:
接着,打开OJ配置文件docker-compose.yml:
vim docker-compose.yml
在volumes项中新增一行,路径请根据实际情况修改:
…
oj-backend:
image: registry.cn-hangzhou.aliyuncs.com/onlinejudge/oj_backend
container_name: oj-backend
restart: always
depends_on:
– oj-redis
– oj-postgres
– judge-server
volumes:
– $PWD/data/backend:/data
– /home/zzh/dist:/app/dist
environment:
– POSTGRES_DB=onlinejudge
– POSTGRES_USER=onlinejudge
– POSTGRES_PASSWORD=onlinejudge
– JUDGE_SERVER_TOKEN=CHANGE_THIS
# – FORCE_HTTPS=1
# – STATIC_CDN_HOST=cdn.oj.com
ports:
– “0.0.0.0:80:8000”
– “0.0.0.0:443:1443”
更新:
sudo -E docker-compose up -d
完成,再次访问查看效果。