使用 Vue.js 实现论坛客户端

7,448 阅读2分钟

vue-nga

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


Preview


Using

Frontend

Backend

etc


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:latest

MAINTAINER crazy0x <crazy0x0419@gmail.com>

ENV container docker

#下载并安装nginx
RUN rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm

# normal updates, tools, nginx, cleanup
RUN 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

#拷贝jdk
COPY jdk1.7.0_79/ /opt/jdk/

#拷贝tomcat
COPY 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.sh

WORKDIR /root/

#添加权限
RUN chmod -R 755 /opt/
RUN chmod u+x /root/run.sh

EXPOSE 80 443 8080

ENTRYPOINT ["./run.sh"]


run.sh


#!/bin/bash
export JAVA_HOME=/opt/jdk/
export PATH=$JAVA_HOME/bin:$PATH
/usr/sbin/nginx -c /etc/nginx/nginx.conf
sh /opt/tomcat/bin/catalina.sh run


TODOS

目前仅实现浏览功能…

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