qduoj前端二次开发简略流程
为缩减篇幅,已略去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前端二次开发简略流程的更多相关文章
- qduoj~前端~二次开发
青岛大学qdu的onlinejudge是js的写的前端,框架是vue.js,在nodejs上部署运行,其实整体运行还是建立在docker的容器虚拟环境里,这里暂时不需要docker.安装环境是Ubun ...
- OnlineJudgeFE之前端二次开发
之前我们在这篇文章青岛大学开源OJ平台搭建 讲了关于它的安装和部署. 今天我们讨论如何对其进行二次开发.首先谈谈前端的二次开发. 如果想要对青岛大学的OJ项目进行二次开发,目前我觉得要满足这么几个要求 ...
- GTS-800二次开发基本流程总结
1.打开控制器 GT_Open 2.启动伺服使能 GT_ClrSts 3.轴规划位置清零 GT_SetPrfPos 4.轴运动模式 GT_PrfTrap 5.轴目标位置 GT_SetPos 6. ...
- 解析大型.NET ERP系统 窗体、查询、报表二次开发
详细介绍Enterprise Solution 二次开发的流程步骤,主要包括数据输入窗体(Entry Form),查询(Query/Enquiry),报表(Report)三个重要的二次开发项目. 数据 ...
- ccflow表机构与运行机制(二次开发必看)
驰骋工作流引擎,工作流程管理系统,表结构与运行机制. ------------------------------------------------------- 前言: 1, ccflow 有自动 ...
- 基于VB语言对SolidWorks参数化设计的二次开发
0 引言 随着数字信息化进程的快速推进,如今三维CAD技术在越来越多的企业当中得到运用.为了降低在设计生产中的成本,缩短设计周期,增强企业竞争力,三维参数化技术随之应声,它凭借更贴近现代概念的设计以及 ...
- OMCS开发手册(04) -- 二次开发流程
在掌握了前面几篇关于OMCS的详细介绍后,我们就可以正式基于OMCS进行二次开发了.下面我们就从服务端和客户端的角度分别介绍开发的步骤. 一.服务端开发 抛开具体的业务逻辑而言,就OMCS的服务端的开 ...
- C#开发BIMFACE系列2 二次开发流程
系列目录 [已更新最新开发文章,点击查看详细] BIMFACE 平台是一个对外开放的平台,建筑行业的相关公司.软件公司或者有 BIM 业务需求的公司都可以注册成为开发者并使用其提供的强大功能. ...
- Ecshop系统二次开发教程及流程演示
来源:互联网 作者:佚名 时间:03-01 16:05:31 [大 中 小] Ecshop想必大家不会觉得陌生吧,大部分的B2C独立网店系统都用的是Ecshop系统,很受用户的喜爱,但是由于Ecs ...
随机推荐
- SQL Server Cast、Convert数据类型转换
一.概述 本篇文章转载来着官网在线文档,文章主要介绍SQL Server数据类型转换相关语法.隐式转换.Date样式等. 语法 Syntax for CAST: CAST ( expression A ...
- Android开发:Android虚拟机启动错误Can't find 'Linux version ' string in kernel image file
Android启动出错,虚拟机报错信息如下: Starting emulator for AVD 'test' emulator: ERROR: Can't find 'Linux version ' ...
- python高级-装饰器(19)
一.什么是闭包 先看一个例子: #定义一个函数 def test(number): #在函数内部在定义一个函数,并且这个函数用到外围函数的变量 #那么将这个函数及用到的一些变量称之为闭包 def te ...
- 【Storm篇】--Storm并发机制
一.前述 为了提高Storm的并行能力,通常需要设置并行. 二.具体原理 1. Storm并行分为几个方面: Worker – 进程一个Topology拓扑会包含一个或多个Worker(每个Worke ...
- Linux篇---Grep和正则匹配
一.前述 Linux中正则匹配查找比较常用,所以分享一篇关于正则匹配和Grep结合的文章. 二.匹配规则 匹配操作符: \ 转义字符. ...
- 5.jQuery
简介 jQuery是一个快速.简洁的JavaScript框架,jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代 ...
- 在阿里云 ECS 搭建 nginx https nodejs 环境 (一、 nginx)
首先介绍下相关环境.软件的版本 1.阿里云 ECS . ubuntu-14.04.5 LTS 2.nginx 版本 1.9.2 可能会遇到的问题: 一.在 ssh 服务器上的时候,提示 这个时候需要将 ...
- Linux~常用的命令
大叔学Linux就一个目的,部署在它上面的服务,如redis,mongodb,fastDFS,cat,docker,mysql,nginx等 下面找一下的命令,来学学这个神秘的操作系统 常用指令 ls ...
- Markdown 文档生成工具
之前用了很多Markdown 文档生成工具,发现有几个挺好用的,现在整理出来,方便大家快速学习. loppo: 非常简单的静态站点生成器 idoc:简单的文档生成工具 gitbook:大名鼎鼎的文档协 ...
- Chapter 4 Invitations——28
"Oh, thanks, now that's all cleared up." Heavy sarcasm. “哦,真感谢,现在一切都清楚了.” 我很讽刺的说道 I realiz ...