稳健 Online Judge 开发记录（二）

文章目录

1 1.安装一大堆软件
2 2.开始搞事情
3 3.安装node.js
4 4.部署前端
5 5.更改界面
6 6.尾声

「青岛大学 Online Judge」是js的写的前端，框架是vue.js，在node.js上部署运行，其实整体运行还是建立在docker的容器虚拟环境里，这里暂时不需要Docker。安装环境是Ubuntu 18.04-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到本地机器。我的WSL（Windows Linux子系统）运行的Ubuntu 18.04-64bit。后边的命令如果需要权限就把sudo加上，root用户就主动忽略吧。

git clone your_url(fork到你自己的github上的url)

3.安装node.js

因为qduoj2.0说明需要nodejs version 8.12.0，我已开始直接下载的源码包本地编译安装，可是装好了在后边的oj部署时候总是出错，也可能是其他版本的npm没有删干净，所以最后我用的nvm，这是nodejs的版本管理器，挺方便的。

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

等命令运行完安装好了，需要关闭WSL，再次启动nvm才会生效。

#这里不要急着运行！最后的这个.0挺有意思，因为要符合nvm的语义，不写的话就默认安装8.12.x中最新的那个
nvm install 8.12.0
#如果上边的命令安装太慢就用这个taoao的镜像安装！
NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node nvm install 8.12.0

nvm默认使用的nodejs版本是最近一次安装的版本，如果你有很多版本可以用下边的命令来选择

nvm use 8.12.0
node --version

安装依赖包

npm install
#如果这一步过于慢就用taobao的镜像
npm config set registry https://registry.npm.taobao.org
npm install

4.部署前端

都装好了，现在可以部署前端了，cd到刚才的git好的文件夹根目录

如果在上一步npm install一直失败报错，要不你就多运行几次这个命令，可能是网络不稳定导致的，有时候就算是淘宝的源也没法救你，那就只好把nvm和nodejs和npm统统的删除干净，重启，然后手动去官网下载nodejs的源码包

wget https://npm.taobao.org/mirrors/node/v6.11.1/node-v8.12.0-linux-x64.tar.xz
#这里去找你需要的版本，里边同时包含了对应的npm 注意，一定要下载.tar.xz拓展名的版本，这个不用编译安装，直接建立软链接即可。
tar xvf
#解压之
ln -s /opt/download/node-v8.12.0-linux-x64/bin/node /usr/local/bin/
ln -s /opt/download/node-v8.12.0-linux-x64/bin/npm /usr/local/bin/

然后测试一下

node -v
npm -v

如果没有上边的问题，就继续：

NODE_ENV=development npm run build:dll
#也可以把地址定义到自己已部署好的OJ上
export TARGET=http://127.0.0.1
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 格式。