Maison > Article > interface Web > Node implémente une interaction simple front-end et back-end

Node implémente une interaction simple front-end et back-end

小云云original: 2017-12-21 11:13:561518parcourir

Node est une compétence incontournable pour le front-end. Nous savons tous que node utilise js comme back-end. Avant d'apprendre node, nous devons comprendre comment node réalise les interactions front-end et back-end. Cet article vous propose une interaction simple front-end et back-end de Node (explication avec exemples). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Voici une interaction simple entre ajax natif et node. Les amis qui viennent d'apprendre node peuvent y jeter un œil. D'une part, vous comprenez comment le serveur et le client interagissent et, d'autre part, vous êtes plus familier avec le développement de nœuds.

Publiez d'abord le code : (Si vous êtes intéressé, vous pouvez le copier localement et l'exécuter vous-même)

Le html de la page principale

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>

Vient ensuite le code côté serveur. La méthode d'exécution consiste à saisir la commande dans l'environnement du nœud : node server.js

server.js : le module qs introduit. par

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);

est utilisé Parse JSON

req.on('data', callback); // Surveille les données du client et exécute la fonction de rappel une fois les données envoyées

req.on('end', callback ); // Réception des données terminée

res // Répondre au

client js (la fonction est responsable de certaines opérations DOM et de l'envoi des requêtes ajax )

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);
}

Cette simple interaction est comme ceci. En fait, la première chose que nous faisons lorsque nous apprenons pour la première fois un langage back-end est d'écrire un front-end. programme interactif final et back-end. Cela nous aidera à mieux comprendre la division du travail entre le front-end et le back-end.

Méthode d'exécution :

Exécutez d'abord server.js, puis ouvrez le code HTML pour demander une réponse.

Recommandations associées :

Résumé du contenu associé sur l'interaction front-end et back-end

Le framework Node.js+Koa réalise le front-end -Interaction PHP front-end et back-end

Interaction PHP front-end et back-end

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Vue implémente un exemple de plug-in de menu sympaArticle suivant：Vue implémente un exemple de plug-in de menu sympa

Articles Liés

Voir plus