vue-nga

Because the mobile phone configuration is not very good, brush NGA Android terminal often reload, each time into a few seconds of advertising. So with vue. Js tried to make a (perennial read post does not return, first only do tourist function – -), in the browser experience is ok (can also be full screen!) , the speed is acceptable, can meet their daily needs.

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. Log on to Arukas(https://app.arukas.io/) and set up an account
  2. Enter the console, fill in the following figure, other Settings default, app and endpoint(domain name) can be based on your preferences
  3. To submit and wait for the deployment to complete, visit https:// domain.arukascloud.io /home to use it

Problems

  • Cross-domain request (Webpack agent)

AJAX (including JSONP also needs server-side support) is basically weak due to the cross-domain setting of NGA server. Here, the server proxy is used to forward requests, cookies of tourists are forged in the header to obtain tourists’ permissions, and the purpose of obtaining data is achieved. There is no way out

  • Picture anti-theft

Due to the anti-leecking mechanism of pictures, the pictures in the post cannot be opened, and Vue cannot forge the referer in the header to avoid it, so the server proxy is also used to download pictures here.

  • html5 history

[root@router] [root@router] [root@router] [root@router] [root@router] [root@router] [root@router] [root@router] [root@router] [root@router] [root@router] [root@router] [root@router

server { listen 80 default; server_name vue-nga; Root /opt/tomcat/webapps/mnga; Rewrite ^ /index.html break; rewrite ^ /index.html break; } location /dist/ { # Do nothing. nginx will serve files as usual. } }Copy the code
  • Packaged deployment

Use Docker to package the environment and application and upload it to docker Hub for easy APP deployment

Dockerfile

FROM centos:latest MAINTAINER crazy0x <[email protected]> ENV container docker download and install 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 local configuration file COPY nginx. Conf /etc/nginx/ RUN systemctl enable nginx \ && systemctl enable crond # COPY JDK COPY jdk1.7.0_79/ /opt/ JDK / # COPY tomcat COPY Apache tomcat - 8.5.11 COPY / / opt/tomcat / # server agent COPY nga. War/opt/tomcat/webapps/nga. War # webpack after packaging COPY mnga/app directory /opt/tomcat/webapps/mnga Sh WORKDIR /root/ # Add permission run chmod -r 755 /opt/ run chmod u+x /root/run.sh EXPOSE 80 443 8080 ENTRYPOINT ["./run.sh"]Copy the code

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 runCopy the code

TODOS

At present, only browsing function is implemented…

  1. User-related Operations
  2. Other details