qduoj前端二次开发简略流程

最新推荐文章于 2024-04-30 10:36:58 发布

转载最新推荐文章于 2024-04-30 10:36:58 发布 · 828 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/stargazerzzh/p/10420049.html

文章标签：

#前端 #git #javascript #ViewUI

本文详述在win10环境下，使用Vue框架部署QDUOJ前端项目的全过程，包括下载源码、安装依赖、配置后台数据源、本地测试、打包及在Ubuntu上更新前端文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为缩减篇幅，已略去nodejs、git等软件安装操作，若有疑问请搜索相关教程。

为区分win和ubuntu的命令，作如下约定：

$ cd  //以$标记win下命令
# cd  //以#标记linux命令

环境：win10，qduoj前端github：https://github.com/QingdaoU/OnlineJudgeFE

1、下载源码并解压，或用git拉取源码：

$ git clone https://github.com/QingdaoU/OnlineJudgeFE.git

2、安装依赖：

$ 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/

6、修改完成后打包：

$ npm run build

7、让OJ加载修改后的前端文件

在dist文件夹里生成的文件，就是编译后的前端文件。

首先要把修改后的文件传输到ubuntu，我们使用WinSCP，

通过其连接虚拟机：

把dist文件夹直接拖到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”

更新：