使用Vue框架实现NGA客户端

vue-nga

由于手机配置不太好，刷nga安卓端经常重载，每次进入都要看好几秒的广告。。于是用vue.js试着做了一个（常年看帖不回，先只做游客功能- -），在浏览器上面体验还好（还可以全屏！），速度也过得去，能满足自己的日常需求了。

---

Preview

  

---

Using

Frontend

• Vue.js
• vue-router
• vue-resource
• vuex
• cooking
• webpack
• Muse-UI

Backend

• Springboot
• OkHttp
• Kotlin

etc

• docker
• Nginx
• Apache Tomcat

---

Live Demo

Demo (for mobile)

---

Installation

Docker Image:

crazy0x/vue-nga:1.4

1. 登录Arukas(https://app.arukas.io/)并注册账户
2. 进入控制台，如下图填写，其它配置默认，其中app和endpoint(域名)可以按自己喜好
3. 提交并等待部署完成，访问 https://域名.arukascloud.io/home 即可使用

---

Problems

• 跨域请求（webpack代理）

由于NGA服务端设置了跨域，AJAX（包括JSONP也需要服务器端支持）基本杯具，这里使用了服务器代理转发请求，在header中伪造游客的cookies获得游客权限，达到获取数据的目的，没有办法的办法

• 图片反盗链

由于图片反盗链机制，帖子中的站内图片都无法打开，Vue无法伪造header中的referer来规避，所以这里也同样使用了服务器代理下载图片。

• html5 history

vue-router开启history模式以后，站点会出现无法访问的情况，这里要修改一下nginx配置，把所有没有后缀名的请求如果404都跳转到index.html，这里给出nginx.conf

server {  listen 80 default;  server_name vue-nga;  #tomcat目录  root /opt/tomcat/webapps/mnga;  #所有没有后缀名的请求如果404都跳转到index.html  location / {    rewrite ^ /index.html break;  }  location /dist/ {    # Do nothing. nginx will serve files as usual.  }}

• 打包部署

使用Docker将环境和应用打包后上传到docker hub，就可以方便地部署APP

Dockerfile

#使用centos镜像作为基础FROM centos:latestMAINTAINER crazy0x <[e-mail]>ENV container docker#下载并安装nginxRUN rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm# normal updates, tools, nginx, cleanupRUN yum -y update \ && yum -y install epel-release iproute crontabs \ && yum -y install nginx \ && yum clean all \ && rm -rf /etc/localtime \ && ln -s /usr/share/zoneinfo/Europe/Berlin /etc/localtime#拷贝本地配置文件COPY nginx.conf /etc/nginx/RUN systemctl enable nginx \ && systemctl enable crond#拷贝jdkCOPY jdk1.7.0_79/ /opt/jdk/#拷贝tomcatCOPY apache-tomcat-8.5.11/ /opt/tomcat/#拷贝服务器代理COPY nga.war /opt/tomcat/webapps/nga.war#webpack打包后的app目录COPY mnga/ /opt/tomcat/webapps/mnga#执行脚本，用来启动服务COPY run.sh /root/run.shWORKDIR /root/#添加权限RUN chmod -R 755 /opt/RUN chmod u+x /root/run.shEXPOSE 80 443 8080ENTRYPOINT [“./run.sh”]

run.sh

#!/bin/bashexport JAVA_HOME=/opt/jdk/export PATH=$JAVA_HOME</span>/bin:<span class="nv" style="color:rgb(0,128,128)">$PATH/usr/sbin/nginx -c /etc/nginx/nginx.confsh /opt/tomcat/bin/catalina.sh run

---

TODOS

目前仅实现浏览功能…

1. 用户相关操作
2. 其它细节