OnlineJudgeFE之前端二次開發

之前我們在這篇文章青島大學開源oj平台搭建

講了關於它的安裝和部署。

今天我們討論如何對其進行二次開發。首先談談前端的二次開發。

如果想要對青島大學的oj專案進行二次開發，目前我覺得要滿足這麼幾個要求？

第一、前端使用的是vue.js，你需要對vue.js畢竟熟悉；

第二、nodejs和webpack你最好也要熟悉，因為部署環境需要和打包的時候也需要；

vue.js:

node.js:

onlinejudgefe位址為:

當然了，還可以去w3cschool或者菜鳥教程。

node.js環境安裝和配置，我的伺服器作業系統是ubuntu16.04，ubuntu安裝軟體很簡單，通常sudo apt-get install 安裝包名稱即可達到安裝的目的。但是node.js預設通過這種安裝版本會不符合官方文件上面要求的那樣。所以建議最好還是不要通過這種形式安裝。

可以選擇對應的版本，最好是高於8.12.0或者等於8.12.0。

我是通過原始碼(已經編譯好了)安裝，步驟如下:

步驟如下:

git clone .git

cd onlinejudgefe

npm install

node_env=development npm run build:dll

export target=

#target指的是後台**伺服器位址，通常為judgeserver

npm run dev

最終控制台輸出的結果如下圖所示（成功）:

通常失敗的話，一般都是npm install或者node_env=development npm run build:dll，原因就是因為node.js的版本及其npm問題。按照我上述的nodejs安裝教程，就可以避免這種情況的出現。

另外注意，如果改動了前端**重新部署，不是直接進入onlinejudgefe目錄直接執行npm run dev就可以的。

需要依次輸入如此命令來完成部署，一步都不能省略:

node_env=development npm run build:dll
export target=
npm run dev

如果不按照上面的流程就直接執行npm run dev會出現如下錯誤:

對了，如果你覺得英文閱讀有難度體驗不好可以進入到對應的目錄修改乙個檔案即可。

主要cd 到onlinejudgefe/src/i18n目錄

修改index.js檔案即可，index.js檔案內容，如圖:

最終展示的效果是這樣的，如圖所示: