Heim > Artikel > Web-Frontend > Der Knoten implementiert eine einfache Front-End- und Back-End-Interaktion

Der Knoten implementiert eine einfache Front-End- und Back-End-Interaktion

小云云Original: 2017-12-21 11:13:561518Durchsuche

Node ist eine Fähigkeit, die im Front-End erlernt werden muss. Wir alle wissen, dass Node js als Back-End verwendet. Bevor wir Node lernen, müssen wir verstehen, wie Node die Front-End- und Back-End-Interaktion implementiert. Dieser Artikel bietet Ihnen eine einfache Front-End- und Back-End-Interaktion von Node (Erklärung mit Beispielen). Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Hier ist eine einfache Interaktion zwischen nativem Ajax und Node. Freunde, die gerade Node gelernt haben, können einen Blick darauf werfen. Einerseits verstehen Sie, wie Server und Client interagieren, andererseits sind Sie mit der Knotenentwicklung besser vertraut.

Veröffentlichen Sie zuerst den Code: (Bei Interesse können Sie ihn lokal kopieren und selbst ausführen)

Der HTML-Code der Hauptseite

index.html:

<!doctype>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <button id="btn1">food</button>
  <button id="btn2">other</button>
  <h1 id="content"></h1>

  <script type="text/javascript" src="./client.js"></script>
 </body>
</html>

Der nächste ist der serverseitige Code. Die Ausführungsmethode besteht darin, den Befehl in die Knotenumgebung einzugeben: node server.js

server.js:

let http = require('http'); 
let qs = require('querystring'); 

let server = http.createServer(function(req, res) {
 let body = ''; // 一定要初始化为"" 不然是undefined
 req.on('data', function(data) {
  body += data; // 所接受的Json数据
 });
 req.on('end', function() { 
  res.writeHead(200, { // 响应状态
   "Content-Type": "text/plain", // 响应数据类型
   'Access-Control-Allow-Origin': '*' // 允许任何一个域名访问
  });
  if(qs.parse(body).name == 'food') {
   res.write('apple');
  } else {
   res.write('other');
  } 
  res.end();
 }); 
});

server.listen(3000);

Das eingeführte qs-Modul wird verwendet. Parse JSON

req.on('data', callback); // Überwachen Sie die Daten des Clients und führen Sie die Rückruffunktion aus, sobald Daten gesendet werden

req.on('end', callback ); // Datenempfang abgeschlossen

res // Auf

client js antworten (die Funktion ist für einige DOM-Operationen und das Senden von Ajax-Anfragen verantwortlich )

client.js:

let btn1 = document.getElementById('btn1');
let btn2 = document.getElementById('btn2');
let content = document.getElementById('content');

btn1.addEventListener('click', function() {
 ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);
});

btn2.addEventListener('click', function() {
 ajax('POST', "http://127.0.0.1:3000/", 'name='+this.innerHTML);
});

// 封装的ajax方法
function ajax(method, url, val) { // 方法，路径，传送数据
 let xhr = new XMLHttpRequest();
 xhr.onreadystatechange = function() {
  if(xhr.readyState == 4) {
   if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
    content.innerHTML = xhr.responseText;
   } else {
    alert('Request was unsuccessful: ' + xhr.status);
   }
  }
 };

 xhr.open(method, url, true); 
 if(val)
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
 xhr.send(val);
}

Diese einfache Interaktion ist so. Tatsächlich ist das erste, was wir tun, wenn wir zum ersten Mal eine Back-End-Sprache lernen, eine Front-End-Sprache zu schreiben. Interaktives End- und Back-End-Programm. Dies wird uns helfen, die Arbeitsteilung zwischen Front- und Back-End besser zu verstehen.

Ausführungsmethode:

Führen Sie zuerst server.js aus und öffnen Sie dann HTML, um eine Antwort anzufordern.

Verwandte Empfehlungen:

Zusammenfassung verwandter Inhalte zur Front-End- und Back-End-Interaktion

Node.js+Koa-Framework realisiert Front -End- und Back-End-Interaktion

PHP-Front-End- und Back-End-Interaktion

Das obige ist der detaillierte Inhalt vonDer Knoten implementiert eine einfache Front-End- und Back-End-Interaktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Vue implementiert ein cooles Menü-Plug-in-BeispielNächster Artikel：Vue implementiert ein cooles Menü-Plug-in-Beispiel

In Verbindung stehende Artikel

Mehr sehen