집 > 기사 > 웹 프론트엔드 > 노드는 간단한 프런트엔드 및 백엔드 상호 작용을 구현합니다.

노드는 간단한 프런트엔드 및 백엔드 상호 작용을 구현합니다.

小云云원래의: 2017-12-21 11:13:561518검색

노드는 프론트엔드에서 꼭 배워야 할 기술입니다. 노드가 백엔드로 js를 사용한다는 것은 우리 모두 알고 있는 사실입니다. 노드를 배우기 전에 노드가 프론트엔드와 백엔드 상호작용을 어떻게 구현하는지 이해해야 합니다. 이 기사에서는 Node의 간단한 프런트엔드 및 백엔드 상호 작용(예제 설명)을 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

여기에는 네이티브 Ajax와 Node 간의 간단한 상호 작용이 있습니다. 방금 Node를 배운 친구들은 한 번 살펴볼 수 있습니다. 한편으로는 서버와 클라이언트가 상호 작용하는 방식을 이해하고 다른 한편으로는 노드 개발에 더 익숙합니다.

먼저 코드 게시: (관심이 있으시면 로컬로 복사하여 직접 실행할 수 있습니다.)

메인 페이지의 HTML

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>

다음 단계는 서버 측 코드입니다. 실행 방법은 node 환경에서 명령어를 입력하는 것입니다. : 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);

에서 도입한 qs 모듈은 JSON

req.on('data', callback)을 구문 분석하는 데 사용됩니다. // 클라이언트의 데이터를 모니터링하고 데이터가 전송되면 콜백을 실행합니다. Function

req.on('end', callback) // 데이터 수신 완료

res //

클라이언트 js에 응답합니다. 일부 DOM 작업 및 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);
}

이 간단한 상호 작용은 실제로 백엔드 언어를 처음 배울 때 가장 먼저 하는 일은 프런트-엔드를 작성하는 것입니다. 엔드 및 백엔드 대화형 프로그램은 프런트엔드와 백엔드 간의 작업 분할을 더 잘 이해하는 데 도움이 됩니다.

실행 방법:

먼저 server.js를 실행한 다음 html을 열어 응답을 요청합니다.

노드는 간단한 프런트엔드 및 백엔드 상호 작용을 구현합니다.

관련 기사