文档章节

qduoj~前端~二次开发~笔记

虚拟世界的懒猫
 虚拟世界的懒猫
发布于 08/18 15:10
字数 1282
阅读 161
收藏 0

青岛大学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

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

wget https://npm.taobao.org/mirrors/node/v6.11.1/node-v6.11.1-linux-x64.tar.xz(这里去找你需要的版本,里边同时包含了对应的npm
###注意,一定要下载.tar.xz拓展名的版本,这个不用编译安装,直接建立软链接即可。

tar xvf  解压之

ln -s /opt/download/node-v6.11.1-linux-x64/bin/node /usr/local/bin/
ln -s /opt/download/node-v6.11.1-linux-x64/bin/npm /usr/local/bin/

然后测试一下
node -v

npm -v

如果没有上边的问题,就继续:

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镜像上传部署的笔记。

打包上传整合笔记在这里!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

再次感谢!

© 著作权归作者所有

共有 人打赏支持
虚拟世界的懒猫
粉丝 1
博文 29
码字总数 17108
作品 0
唐山
个人站长
私信 提问
qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
08/19
0
0
短信通信笔记

  我要实现的功能比如:   (1)用户要在我的电脑网站上下载一张图片,系统就会发一条带图片地址(wappush)到用户的手机上,用户在手机上点击这个地址就可以登录到我的wap站上将这个图片下...

金笛子
2016/03/03
57
0
GIT 权威指南笔记-00前言

首先感谢送我的书 2011-9-26收到的本书 http://www.oschina.net/question/17793_28442 “蒋鑫做客OSCHINA”Git问答活动中奖名单公布 ========================= 很早以前就关注到了蒋鑫他们的...

ddatsh
2011/09/27
0
0
JQ工具集--J-LibTool

J-libtool是一款WEB前端开发 JQ工具集 提供BOX弹出层,ajax表单提交,input默认值,Cookie存取,前端验证码 等诸多功能. J-libtool 开发模式并非传统的jq插件方法,有自己独立的功能模块,如果...

木然
2013/07/22
990
0
基于 Node.js 的内容管理系统--DoraCMS

DoraCMS 使用的技术栈: 1、vue + vuex + vue-router 全家桶 2、webpack 2 3、nodejs 8.0 + express 4 4、mongodb 3+ 演示地址: 前端开发俱乐部 后台登录: https://www.html-js.cn/dr-admi...

doramart
2015/08/18
10.6K
2

没有更多内容

加载失败,请刷新页面

加载更多

Jrebel 激活服务,在springboot上面的进行热部署

1.安装JRebel 下载Jrebel插件,官网需要翻墙下载,需要的可以在csdn的下载区去进行下载 打开idea,File->settings 然后重启idea 2.破解JRebel 首先HELP -> JRebel -> Activation 在jrebel se...

glen_xu
49分钟前
1
0
设置版头的图片+网页布局

1.div的background-image(推荐) 2.div+image 1.是只有部分图,2是压图 1.frame 2.js(推荐) 因为frame不好设置大小

木之下
53分钟前
0
0
MyBatis组件之缓存实现及使用

一 .概述 先讲缓存实现,主要是mybatis一级缓存,二级缓存及缓存使用后续补充 Mybatis缓存的实现是基于Map的,从缓存里面读写数据是缓存模块的核心基础功能; 除核心功能之外,有很多额外的附...

Ala6
今天
1
0
SpringBoot中使用@RequestBody时如何自定义需要转换的日期格式

SpringBoot序列化和反序列化Json时默认使用的是Jackson(例如使用@RequestBody反序列化前端传递过来的Json字符串时), 当我们前端使用Json字符串传递到后台时日期格式可能是时间戳(即long类...

帅得拖网速
今天
1
0
可自定义扩展底部列表对话框ListBottomSheetDialogFragment

因为需要,为了方便,构建了一个可以自定义扩展的底部列表对话框,可以应付大部分场景。 效果图如下: 1.默认实现: 2.自定义列表实现 3.自定义头部和列表实现 一.可实现功能 1.默认可实现通...

明月春秋
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部