qduoj~前端~二次開發

青島大學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)

3.由於qduoj2.0說明須要nodejs version 6.11，我已開始直接下載的源碼包本地編譯安裝，但是裝好了在後邊的oj部署時候老是出錯，也多是其餘版本的npm沒有刪乾淨，因此最後我用的nvm，這是nodejs的版本管理器，挺方便的。

wget -O- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash

等命令運行完安裝好了，須要關閉bash，而後重啓機器，nvm纔會生效。

#這裏不要急着運行！最後的這個.0挺有意思，由於要符合nvm的語義，不寫的話就默認安裝6.11.x中最新的那個
nvm install 6.11.0  
#若是上邊的命令安裝太慢就用這個taoao的鏡像安裝！
NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node nvm install 6.11.0

nvm默認使用的nodejs版本是最近一次安裝的版本，若是你有不少版本能夠用下邊的命令來選擇

nvm use 6.11.0
node --version

4.都裝好了，如今能夠部署前端了，cd到剛纔的git好的文件夾根目錄，

npm install
#若是這一步過於慢就用taobao的鏡像
npm config set registry https://registry.npm.taobao.org 
npm install

NODE_ENV=development npm run build:dll

#這裏的Your-backend不須要懷疑不須要改！直接這麼寫！！！
export TARGET=http://Your-backend

npm run dev

而後在瀏覽器輸入localhost:8080就出現了前端。

5.如何更改頁面呢，我們先來看看vue.js框架的網站目錄結構：

| build |
項目構建(webpack)相關代碼

|
| config | 配置目錄，包括端口號等。咱們初學可使用默認的。 |
| node_modules | npm 加載的項目依賴模塊 |
| src |

這裏是咱們要開發的目錄，基本上要作的事情都在這個目錄裏。裏面包含了幾個目錄及文件：

• assets: 放置一些圖片，如logo等。
• components: 目錄裏面放了一個組件文件，能夠不用。
• App.vue: 項目入口文件，咱們也能夠直接將組件寫這裏，而不使用 components 目錄。
• main.js: 項目的核心文件。

|
| 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 https://my.oschina.net/finchxu/blog/1927273
打包成docker鏡像https://my.oschina.net/finchxu/blog/1930191

參考文檔：

很是感謝如下前輩！

qduoj-二次開發記錄：https://www.finen.top/qduoj-development-record/

vue.js框架講解：http://www.runoob.com/vue2/vue-directory-structure.html

Ubuntu下安裝使用nvm：https://www.linuxidc.com/Linux/2017-01/139024.htm

https://stackoverflow.com/questions/31829198/npm-error-failed-to-fetch-from-registry-http-registry-npmjs-org-sass

https://stackoverflow.com/questions/36467239/nvm-nodejs-org-mirror-is-deprecated-please-use-nodejs-org-mirror

https://www.npmjs.com/package/gulp-iconfont

執行sudo報錯command not found：https://blog.csdn.net/n66040927/article/details/78870627

解決nvm安裝錯誤：https://cnodejs.org/topic/55ab67fe8834fbb55261c4e0

npm使用taobao源：ttps://blog.csdn.net/aerchi/article/details/54582778

https://libraries.io/github/QingdaoU/Minos

前端組件沒法渲染：https://github.com/QingdaoU/OnlineJudgeFE/issues/21

網頁動態背景隨鼠標變換的線條：https://www.cnblogs.com/qq597585136/p/7019755.html

https://usermanual.wiki/Document/Instructions.1857041035.pdf

再次感謝！