青島大學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設計模式開發,基於模組和操作的方式進行訪問,採用單一入口模式進行專案部署和訪問,無論訪問任何乙個模組或者功能,只有乙個統一的入口...