使用Vue框架实现NGA客户端

By | 03月07日
Advertisement

vue-nga

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


Preview

使用Vue框架实现NGA客户端
 使用Vue框架实现NGA客户端
 使用Vue框架实现NGA客户端


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 即可使用

使用Vue框架实现NGA客户端


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 <[email protected]>

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. 其它细节

Similar Posts:

  • 理解vue实现原理,实现一个简单的Vue框架

    参考: 剖析Vue实现原理 - 如何实现双向绑定mvvm Vue.js源码(1):Hello World的背后 Vue.js官方工程 本文所有代码可以在git上找到. 其实对JS我研究不是太深,用过很多次,但只是实现功能就算了.最近JS实在是太火,从前端到后端,应用越来越广泛,各种框架层出不穷,忍不住也想赶一下潮流.        Vue是近年出的一个前端构建数据驱动的web界面的库,主要的特色是响应式的数据绑定,区别于以往的命令式用法.也就是在var a=1;的过程中,拦截'='的过程,从而实

  • [已解决]使用django rest框架,给客户端提供api,在写完后,查看输出的json数据,返回的网页数据,不是json

    curl -v -H "Content-Type: application/json" -X GET -u 1:1 http://192.168.17.3:8000/api2/repo/f9587a44-ea42-41b7-a978-237328633072/files/?p=/要买的书.png api里返回的是json,windows运行上面的命令,返回怎么是网页呢?如何才能返回json数据? 只有个别的试验成功了,其他的基本都不是json,应该如何写命令才行,根据什么写命令 --c

  • DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.

    j-ui.com DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.DWZ富客户端框架设计目标是简单实用.扩展方便.快速开发.RIA思路.轻量级 DWZ支持用html扩展的方式来代替javascript代码, 基本可以保证程序员不董javascript, 也能使用各种页面组件和ajax技术. 如果有特定需求也可以扩展DWZ做定制化开化. DWZ基于jQuery可以非常方便的定制特定需求的UI组件, 并以jQuery

  • JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查)

    阅读目录 一.MVVM大比拼 二.Vue常用网址 三.Vue基础入门 1.MVVM图例 2.第一个Vue实例 3.双向绑定 四.常用指令 1.v-text.v-html指令 2.v-model指令 3.v-if.v-else指令 4.v-show指令 5.v-for指令 6.v-once指令 7.v-bind指令 8.v-on指令 9.实例一:30分钟搞定增删改查 10.实例二:带分页的表格 五.总结 正文 前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在

  • 基于AJAX技术实现Struts校验框架

    一. 引言 校验框架的根本目的是实现域校验.在Web应用程序中有许多方法可以实现域校验,总体上可以分为两类:服务器端和客户端.其中,Struts校验框架是适合于基于Java的Web应用程序环境最好的框架之一.它可以使用服务器端校验来配置应用程序并且使用在校验过程(在请求处理期间激活)中生成的错误消息:而且它也可以通过在请求页面上生成的JavaScript来实现客户端校验. AJAX是一种能异步地调用服务器并返回XML文档的技术,近来十分流行.它的重要优点之一是能够实现数据的实时校验. 本文将主要

  • 创建定制的ASP.NET AJAX非可视化客户端组件

    一.简介 在本文中,我们将共同讨论如何创建一个由基类Sys.Component派生的ASP.NET AJAX非可视化客户端组件,并将展示它在Web页面中的用法. 具体说来,你将学习如何实现: ◆使用prototype设计模式以JavaScript定义一个非可视化组件类. ◆把一个非可视化组件注册为一个由基类Component派生的类. ◆初始化该非可视化组件的基类-Component,并调用它的方法. ◆创建能够激发一个更改通知的属性. ◆打造一个完整的Demo.Timer非可视化组件. ◆在一

  • 几种流行Webservice框架性能对比

    1 摘要 开发webservice应用程序中离不开框架的支持,当open-open网站列举的就有30多种,这对于开发者如何选择带来一定的疑惑.性能Webservice的关键要素,不同的框架性能上存在较大差异,而当前在官方网站.网络资料中可以方便的找到各自框架的介绍,但是很少有针对不同框架性能测试数据.本文选择了比较流行几个框架:Apache Axis1.Apache Axis2.Codehaus XFire.Apache CXF等,采用java作为测试用例,通过本机和远程两种进行测试方式,对这几

  • 推荐几个常用的jquery ui 框架

    jQuery ui框架很多,除了官方提供的jquery UI(如果你还不知道什么是jQuery UI,请看下载了jquery ui后如何使用),还有很多第三方提供的ui框架,因官方提供的jquery ui框架体积较大,所以很多人都不喜欢用,但不论是官方提供还是第三方提供,他们都是基于jquery核心类库实现的ui框架. 1.jQuery Smart UI 官网地址http://smartui.chinamzz.com JQuery Smart UI是基于JQuery的Ajax开发的一个jquer

  • (转载)Mina框架 初识

    MINA是一个Socket的网络框架,但是它提供了方便的Protocol支持,通过它的Encoder和Decoder,你将你的应用可以方便的扩展并支持各种基于Socket的网络协议,比如HTTP服务器.FTP服务器(当然,这很复杂).Telnet服务器等等.基于MINA用户可以容易地开发高性能和高伸缩性的网络应用程序. 1.介绍 Apache MINA 是一个网络应用框架,有助于用户非常方便地开发高性能.高伸缩性的网络应用.它通过Java NIO提供了一个抽象的.事件驱动的.异步的位于各种传输协

  • Android 核心分析 之IPC框架分析 Binder,Service,Service manager (转DEVDIV)

    我首先从宏观的角度观察Binder,Service,Service Manager,并阐述各自的概念.从Linux的概念空间中,Android的设计每个Activity都是一个独立的进程,每个Service也都是一个独立的进程,Activity,Service之间要交换数据属于IPC.Binder就是为了Activity通讯而设计的一个轻量级的IPC框架. 在代码分析中,我发现Android中只是把Binder理解成进程间通讯的实现,有点狭隘,而是应该站在公共对象请求代理这个高度来理解Binde

Tags: