qduoj 前端 二次開發

2022-04-29 17:03:10 字數 2164 閱讀 9668

青島大學qdu的onlinejudge是js的寫的前端,框架是vue.js,在nodejs上部署執行,其實整體執行還是建立在docker的容器虛擬環境裡,這裡暫時不需要docker。安裝環境是ubuntu14-64bit

1.安裝一大堆軟體

sudo apt-get update

sudo apt-get install git vim wget

sudo apt-get install redis-server

sudo apt-get install postgresql

#openssl是後邊部署oj必須

sudo apt-get install openssl libssl-dev

#這是乙個完整的開發工具包,提供了gcc,libc等亂七八糟的工具和軟體

sudo apt-get install build-essential

2.首先fock前端到你的github,這樣以後可以自己改並且自己推送,然後git到本地機器。我的虛擬機器執行的ubuntu14-64bit。後邊的命令如果需要許可權就把sudo加上,root使用者就主動忽略吧。

git clone your_url(fork到你自己的github上的url)
wget -o-  | bash
等命令執行完安裝好了,需要關閉bash,然後重啟機器,nvm才會生效。

#這裡不要急著執行!最後的這個.0挺有意思,因為要符合nvm的語義,不寫的話就預設安裝6.11.x中最新的那個

nvm install 6.11.0

#如果上邊的命令安裝太慢就用這個taoao的映象安裝!

nvm_nodejs_org_mirror= nvm install 6.11.0

nvm use 6.11.0

node --version

4.都裝好了,現在可以部署前端了,cd到剛才的git好的資料夾根目錄,

npm install

#如果這一步過於慢就用taobao的映象

npm config set registry

npm install

node_env=development npm run build:dll
#這裡的your-backend不需要懷疑不需要改!直接這麼寫!!!

npm run dev
然後在瀏覽器輸入localhost:8080就出現了前端。

| build |

專案構建(webpack)相關**

|| config | 配置目錄,包括埠號等。我們初學可以使用預設的。 |

| node_modules | npm 載入的專案依賴模組 |

| src |

這裡是我們要開發的目錄,基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案:

|| static | 靜態資源目錄,如、字型等。 |

| index.html | 首頁入口檔案,你可以新增一些 meta 資訊或統計**啥的。 |

| package.json | 專案配置檔案。 |

| readme.md |

專案的說明文件,markdown 格式。

所以自定義頁面基本就是在src/pages/oj/這裡進行,當然src/裡邊的其他目錄,比如styles/common.less就是css檔案,還有static/css/loader.css這個是載入頁面的css。

6.就先這樣,之後我在補上打包成docker映象上傳部署的筆記。

搭建qduoj

打包成docker映象

非常感謝以下前輩!

qduoj-二次開發記錄:

vue.js框架講解:

ubuntu下安裝使用nvm:

執行sudo報錯command not found:

解決nvm安裝錯誤:

npm使用taobao源:ttps:

前端元件無法渲染:

網頁動態背景隨滑鼠變換的線條:

再次感謝!

postek二次開發 POSTEK二次開發介面

例項簡介 例項截圖 核心 using system using system.collections.generic using system.componentmodel using system.data using system.drawing using system.text using ...

OnlineJudgeFE之前端二次開發

之前我們在這篇文章青島大學開源oj平台搭建 講了關於它的安裝和部署。今天我們討論如何對其進行二次開發。首先談談前端的二次開發。如果想要對青島大學的oj專案進行二次開發,目前我覺得要滿足這麼幾個要求?第一 前端使用的是vue.js,你需要對vue.js畢竟熟悉 第二 nodejs和webpack你最好...

mcms二次開發 YzmCMS二次開發手冊

摘要 yzmcms是採用mvc設計模式開發,基於模組和操作的方式進行訪問,採用單一入口模式進行專案部署和訪問,無論訪問任何乙個模組或者功能,只有一.yzmcms是採用mvc設計模式開發,基於模組和操作的方式進行訪問,採用單一入口模式進行專案部署和訪問,無論訪問任何乙個模組或者功能,只有乙個統一的入口...