为缩减篇幅,已略去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”

更新:

# sudo -E docker-compose up -d

再次访问测试:

我只修改了导航栏标题内容,可以看到确实生效了。

本文至此结束,若有疑问请在评论区讨论~

qduoj前端二次开发简略流程的更多相关文章

  1. qduoj~前端~二次开发

    青岛大学qdu的onlinejudge是js的写的前端,框架是vue.js,在nodejs上部署运行,其实整体运行还是建立在docker的容器虚拟环境里,这里暂时不需要docker.安装环境是Ubun ...

  2. OnlineJudgeFE之前端二次开发

    之前我们在这篇文章青岛大学开源OJ平台搭建 讲了关于它的安装和部署. 今天我们讨论如何对其进行二次开发.首先谈谈前端的二次开发. 如果想要对青岛大学的OJ项目进行二次开发,目前我觉得要满足这么几个要求 ...

  3. GTS-800二次开发基本流程总结

    1.打开控制器 GT_Open 2.启动伺服使能    GT_ClrSts 3.轴规划位置清零 GT_SetPrfPos 4.轴运动模式 GT_PrfTrap 5.轴目标位置 GT_SetPos 6. ...

  4. 解析大型.NET ERP系统 窗体、查询、报表二次开发

    详细介绍Enterprise Solution 二次开发的流程步骤,主要包括数据输入窗体(Entry Form),查询(Query/Enquiry),报表(Report)三个重要的二次开发项目. 数据 ...

  5. ccflow表机构与运行机制(二次开发必看)

    驰骋工作流引擎,工作流程管理系统,表结构与运行机制. ------------------------------------------------------- 前言: 1, ccflow 有自动 ...

  6. 基于VB语言对SolidWorks参数化设计的二次开发

    0 引言 随着数字信息化进程的快速推进,如今三维CAD技术在越来越多的企业当中得到运用.为了降低在设计生产中的成本,缩短设计周期,增强企业竞争力,三维参数化技术随之应声,它凭借更贴近现代概念的设计以及 ...

  7. OMCS开发手册(04) -- 二次开发流程

    在掌握了前面几篇关于OMCS的详细介绍后,我们就可以正式基于OMCS进行二次开发了.下面我们就从服务端和客户端的角度分别介绍开发的步骤. 一.服务端开发 抛开具体的业务逻辑而言,就OMCS的服务端的开 ...

  8. C#开发BIMFACE系列2 二次开发流程

    系列目录     [已更新最新开发文章,点击查看详细] BIMFACE 平台是一个对外开放的平台,建筑行业的相关公司.软件公司或者有 BIM 业务需求的公司都可以注册成为开发者并使用其提供的强大功能. ...

  9. Ecshop系统二次开发教程及流程演示

      来源:互联网 作者:佚名 时间:03-01 16:05:31 [大 中 小] Ecshop想必大家不会觉得陌生吧,大部分的B2C独立网店系统都用的是Ecshop系统,很受用户的喜爱,但是由于Ecs ...

随机推荐

  1. FCC(ES6写法) Inventory Update

    依照一个存着新进货物的二维数组,更新存着现有库存(在 arr1 中)的二维数组. 如果货物已存在则更新数量 . 如果没有对应货物则把其加入到数组中,更新最新的数量. 返回当前的库存数组,且按货物名称的 ...

  2. 【安富莱原创开源应用第1期】花式玩转网络摄像头之TCP上位机软件实现,高端大气上档次,速度2MB/S,华丽丽的界面效果

    说明:1.例子是两年前做的,一直没有顾上整理出来,今天特地整理出来,开源出来给大家玩.2.上位机是emWin模拟器开发的,大家估计很难猜到,所以你会emWin话的,就可以轻松制作上位机.做些通信和控制 ...

  3. ubuntu系统界面改变

    主题:https://gitzab.com/Anduin/GNOME-OSX-II-Theme.git图标:https://github.com/keeferrourke/la-capitaine-i ...

  4. [Swift]LeetCode305. 岛屿的个数 II $ Number of Islands II

    A 2d grid map of m rows and n columns is initially filled with water. We may perform an addLand oper ...

  5. 聊聊Python的time模块

    time模块 time模块是很多人最早接触到的模块,像time.sleep(x)好像随处可见,但是time模块里面的其他方法呢?下面一起看一下time模块. 在Python中一般用这3种方式表示时间: ...

  6. 树莓派pwm驱动好盈电调及伺服电机

    本文讲述如何通过树莓派的硬件PWM控制好盈电调来驱动RC车子的前进后退,以及如何驱动伺服电机来控制车子转向. 1. 好盈电调简介 车子上的电调型号为:WP-10BLS-A-RTR,在好盈官网并没有搜到 ...

  7. 受到 1 万点暴击,二狗子被 DDoS 攻击的惨痛经历

    二狗子的遭遇 “好消息,好消息,免费 DDoS 攻击软件上线了,性感黑客在线攻击,帮您攻克所有商业难题.”二狗子不知道在看着什么网站,新买的 Mac 中发出热闹的声音. 二狗子想知道“DDoS 是什么 ...

  8. CentOS7 systemctl tomcat常用配置

    开始配置tomcat 1.环境准备,安装java 在生产环境上,我一般使用oracle java,不使用openjdk,所以先卸载系统自带的openjdk yum remove java 下载orac ...

  9. 前端笔记之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡

    一.CSS3选择器 CSS3是CSS的第三代版本,新增了很多功能,例如:强大的选择器.盒模型.圆角.渐变.动画.2D/3D转换.文字特效等. CSS3和HTML5没有任何关系!HTML5骨架中,可以用 ...

  10. 行为驱动:Cucumber + Selenium + Java(二) - 第一个测试

    在上一篇中,我们搭建好了Selenium + Cucumber + Java的自动化测试环境,这一篇我们就赶紧开始编写我们的第一个BDD测试用例. 2.1 创建features 我们在新建的java项 ...