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?
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: '#app',
data: {
message: 'Hello Vue!'
}
})<p class="static"
v-bind:class="{ active: isActive, 'text-danger': 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 implementierenDas 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!
