So erreichen Sie die Front-End- und Back-End-Trennung in nginx+vue.js

In diesem Artikel wird hauptsächlich der Beispielcode von nginx+vue.js vorgestellt, um eine Front-End- und Back-End-Trennung zu erreichen. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

1.nginx ist ein leistungsstarker HTTP- und Reverse-Proxy-Server, der häufig für die verteilte Serververwaltung verwendet wird.

Er wird häufig zum Lastausgleich verwendet (dies wird durch den Aufruf mehrerer Server erreicht)

Die Ausgabe statischer Ressourcen ist schneller und die Ressource kann gzip-komprimiert und ausgegeben werden (dies ist auch ein wichtiger Grund, warum dieser Artikel sie für den Zugriff auf statische Ressourcen verwendet)

Geeignet zur Lösung domänenübergreifender Probleme und Reverse Proxy (da niemand den Zugriff auf andere Domainnamen unter diesem Domainnamen sehen möchte, kann Cross-Domain zu CSRF-Angriffen führen, dies ist der zweite Grund für die Verwendung in diesem Artikel)

nimmt weniger in Anspruch Speicher und benötigt Sekunden Start, kann Knoten schnell wechseln, um Ausfallzeiten zu vermeiden

2.es6 ist die sechste Version von ECMAScript. Wenn Sie js-Frameworks wie vue.js gut erlernen möchten, ist dies eine Sprache, die es sein muss Es wird empfohlen, dass die Lernadresse wie folgt lautet: http://es6.ruanyifeng.com/

3.vue.js ist eine Front-End-Vorlagen-Rendering-Engine, ähnlich der Back-End-JSP. beetl und andere Template-Engines können natürlich auch mit der Node-Umgebung kombiniert werden. (Die offizielle Website hat es unterstützt)

Nachdem wir die oben genannten Punkte erwähnt haben, lassen Sie uns antworten ein paar Gründe?
Was sind die Vorteile der Front-End- und Backend-Trennung? Sie haben eine Backend-Vorlagen-Engine?
3 Welche Änderungen müssen vorgenommen werden, um eine Front-End- und Backend-Trennung zu erreichen?

Nachdem ich über die lange Trennlinie nachgedacht habe………………

Betrachten Sie das Problem zunächst aus der Entwicklungsperspektive. Die meisten früheren Projekte waren PC-seitige Projekte . Die meisten Anfragen sind zustandsbehaftet und die meisten der gleichen Apps sind eine Kombination aus nativen und eingebetteten Seiten ergibt ein Funktionsmodul, das wahrscheinlich das Ergebnis von Anfragen aus mehreren Projekten ist.

2. Wenn wir immer noch dem vorherigen Ansatz folgen, besteht das erste Problem darin, dass ich das Problem der Anpassung nur mit jsonp lösen kann Mehrere domänenübergreifende Aufgaben Das Problem bei der Anfrage besteht darin, dass der Code zu redundant ist, um ihn zu implementieren. Für die gleiche Funktion ist es sehr wahrscheinlich, dass es auf der App-Seite und auf der PC-Seite zwei unterschiedliche Schreibmethoden gibt. Und Bandbreite ist eine sehr teure Sache. Der Client geht immer zum Server, um statische Ressourcen anzufordern, was zu einer langsamen Geschwindigkeit führt. Durch die dynamische und statische Trennung können statische und dynamische Ressourcen getrennt erfasst werden. Der Server kann auch dynamische und statische Ressourcen trennen und so das Bandbreitenproblem effektiv lösen.

3. Back-End-Entwickler beherrschen CSS und JS möglicherweise nicht so gut wie das Front-End. Wenn sie beispielsweise JSP zum Füllen von Daten verwenden, müssen Back-End-Entwickler häufig Stile anpassen und JS schreiben , was zu einer geringen Entwicklungseffizienz führt.

4. Die Verwendung des Front-End-Vorlagen-Renderings kann einen Teil des Drucks auf der Serverseite verringern, und die Front-End-Vorlagen-Engine unterstützt mehr Funktionen als das Back-End. Sie können beispielsweise Vue zum Anpassen verwenden Komponenten, Überprüfungsmethoden, detaillierte Farbverläufe usw., was besser ist als Die Back-End-Vorlagen-Engine muss funktionaler sein.

Unsere Lösung ist wie folgt

1. Traditionelle Interaktionsmethode:

Initiiert durch die Client-Anfrage, serverseitige Antwort, werden dynamische Daten durch eine Reihe von Vorgängen generiert und die dynamischen Daten werden an die Back-End-Vorlage übergeben Engine und wird nach dem Rendern an das Frontend übergeben.

2. Verbesserte Interaktionsmethode

Der Client initiiert eine Anfrage und Nginx fängt sie ab Direkt vom Dateiserver komprimiert und an das Frontend gesendet. Wenn es sich um eine dynamische Ressourcenanforderung handelt, werden dynamische Daten über den dynamischen Ressourcenserver generiert, im JSON-Format an das Frontend zurückgegeben und nach dem Rendern an vue.js übergeben .

5. Erläuterung der wichtigsten Funktionen von vue.js Version 2.x

1 Stil: Was sind die häufig verwendeten Überwachungsereignisse

    //html结构
    <p id="app">
     {{ message }}
    </p>

    //js模块
    var app = new Vue({
    //会检索绑定的id 如果是class 则是.class即可绑定
       el: &#39;#app&#39;,
       data: {
        message: &#39;Hello Vue!&#39;
       }
    })

2. Häufig verwendete Bindungsereignisse

<p class="static"
  v-bind:class="{ active: isActive, &#39;text-danger&#39;: hasError }">
</p>

 data: {
     isActive: true,
     hasError: false
    }

渲染结果为:<p class="static active"></p>

🎜>

 //输出html
<p v-html="rawHtml"></p>
//绑定id或class
<p v-bind:id="dynamicId"></p>
//绑定herf
<a v-bind:href="url" rel="external nofollow" ></a>
//绑定onclick
<a v-on:click="doSomething"></a>

2. So kommunizieren Sie mit dem Server

Hier empfehlen wir, dass Sie Axios verwenden, um Anfragen an den Server zu stellen, und die angeforderten Daten dann zur Verarbeitung an vue.js übergeben.

Über die Axios-Nutzungsbeispiel-Linkadresse

3. Benutzerdefinierte Anweisungen zur Datenüberprüfung für allgemeine Flusskontrollanweisungen

 //if 语句
 <h1 v-if="ok">Yes</h1>

 //for 循环语句
 <ul id="example-1">
 <li v-for="item in items">
  {{ item.message }}
 </li>
 </ul>

Linkadresse für die Datenüberprüfung und ihre Formkontrollbindung (https://cn.vuejs .org/v2/guide/forms.html)

Die folgenden vier Punkte beziehen sich auf die offizielle Website-API und werden nicht noch einmal vorgestellt

So implementieren Sie eine detaillierte Reaktionsfähigkeit (für Was soll ich tun, wenn es Änderungen gibt, nachdem die Seite zum ersten Mal initialisiert und mit Werten gefüllt wurde?

5. Benutzerdefinierte Komponentenanwendung und deren Verwendung von Render zum Erstellen einer HTML-Struktur

6. Verwendung von Routing

7. Allgemeine Modifikatoren

1.nginx statische Ressourcen konfigurieren

 server {
    listen    4000;
    server_name www.test.com;
    charset utf-8;
    index /static/index.html;//配置首页

    //这边可使用正则表达式,拦截动态数据的请求,从而解决跨域问题
    location = /sellingJson.html {
      proxy_pass http://192.168.100.17:8090/vueHelpSellingcar.html;
    }

    #配置Nginx动静分离，定义的静态页面直接从static读取。
    location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ 
    { 
    root /static/;
    #expires定义用户浏览器缓存的时间为7天，如果静态页面不常更新，可以设置更长，这样可以   节省带宽和缓解服务器的压力
    expires   7d; 
    }  
  }

2. Nehmen Sie Java als Beispiel.

Verwandte Artikel:

So erzielen Sie einen intermittierenden Textzyklus-Scrolleffekt durch JS

Detaillierte Erläuterung der Refs in React (ausführliches Tutorial)

Verwenden Sie tween.js, um den Easing-Tween-Animationsalgorithmus zu implementieren

Das obige ist der detaillierte Inhalt vonSo erreichen Sie die Front-End- und Back-End-Trennung in nginx+vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!