(Node.js) Form 이용하여 데이터 주고받기

카테고리

{ "Hello World!" };/Node.js

작성일

2023. 12. 10. 18:24

작성자

갱수터

728x90

데이터 전송하기

1. create 링크만들기

/**
 * 본문 셋팅 함수
 * @param {*} title 제목
 * @param {*} list 글 목록
 * @param {*} body 본문
 * @returns 중복코드 => template
 */
function templateHTML(title, list, body) {
  return `
  <!doctype html>
  <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      ${list}
      <a href="/create">create</a>   //여기
      ${body}
    </body>
  </html>
  `;
}

2. 분기처리한 곳에 create 조건 추가해주기

if(pathname === '/') {                //루트일 때 실행 (오류X)
...생략...


} else if(pathname === '/create') {   //create 일 때
fs.readdir('./data',function(error, filelist) {
  var title = 'WEB - create';
  var description = 'Hello, Node.js';
  var list = templateList(filelist);
  var template =templateHTML(title, list, `
    <form action="http://localhost:3000/create_process" method="post">
      <p><input type="text" name="title" placeholder="title" /></p>
      <p>
        <textarea name="description" placeholder="description" ></textarea>
      </p>
      <p><input type="submit" /></p>
    </form>
  `);

  response.writeHead(200);
  response.end(template); //template 문자열 응답
});


} else {                              //루트가 아닐 때 실행(오류 O)
...생략...
}

3. 결과

아직 create_process가 없어서 그렇지 데이터는 잘 넘어간다

데이터 받기

1. 분기처리한 곳에 /create_process 조건추가하기

if(pathname === '/') {                //루트일 때 실행 (오류X)
...생략...
} else if(pathname === '/create') {   //create 일 때(화면)
...생략...


} else if(pathname === 'create_process') {	//create_process일때(처리)
    response.writeHead(200);
    response.end('success');
    
    
} else {                              //루트가 아닐 때 실행(오류 O)
...생략...
}

2. qeuerystring 모듈을 이용하여 post값 확인

참고 사이트

Node.js에서 웹 브라우저로 접속할 때마다 createServer의 콜백함수를 호출한다.

이때 두개의 인자를 전달하는데, request= 브라우저가 보낸 정보, response = 응답할때 브라우저에 전송할 정보이다.

즉 form에서 POST형식으로 보낸 데이터는 request에 있다.

var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
var app = http.createServer(function(request, response) {
  var _url = request.url;
  var queryData = url.parse(_url, true).query;
  var pathname = url.parse(_url, true).pathname; 
  
  if(pathname === '/') {                //루트일 때 실행(오류X)
  ...생략...
  
  }else if(pathname === '/create_process') {
      var body = '';
        request.on('data', function(data) {
          //조각조각 나눠서 데이터를 수신할 때마다 호출되는 콜백 함수
          //데이터를 처리하는 기능을 정의
          body = body + data;
        });
        request.on('end', function(data) {
          //더이상 수신할 정보가 없으면 호출되는 콜백 함수
          //데이터 처리를 마무리하는 기능을 정의
          var post = qs.parse(body);
          console.log(post);
        });
  
  
  } else {
  ...생략...
  }
  ...생략...

3. 값만 추출하기

else if(pathname === '/create') {   //create 눌렀을 때
fs.readdir('./data',function(error, filelist) {
  var title = 'WEB - create';
  var description = 'Hello, Node.js';
  var list = templateList(filelist);
  var template =templateHTML(title, list, `
    <form action="http://localhost:3000/create_process" method="POST">
      <p><input type="text" name="title" placeholder="title" /></p>
      <p>
        <textarea name="description" placeholder="description" ></textarea>
      </p>
      <p><input type="submit" /></p>
    </form>
  `);

  response.writeHead(200);
  response.end(template); //template 문자열 응답
});

}

파일생성

공식문서 - fs.writeFile

코드

else if(pathname === '/create_process') {
var body = '';
request.on('data', function(data) {
  //조각조각 나눠서 데이터를 수신할 때마다 호출되는 콜백 함수
  //데이터를 처리하는 기능을 정의
  body = body + data;
});
request.on('end', function(data) {
  //더이상 수신할 정보가 없으면 호출되는 콜백 함수
  //데이터 처리를 마무리하는 기능을 정의
  var post = qs.parse(body);
  var title = post.title;
  var description = post.description;
              //   파일 ,  파일에 쓸 내용 ,  인코딩 방식, callback
  fs.writeFile(`data/${title}`, description, 'utf8', function(err){
      response.writeHead(200);
      response.end('success');
  });
});

}

결과

다시 홈으로 보내주기(리다이렉션)

        //   파일 ,  파일에 쓸 내용 ,  인코딩 방식, callback
  fs.writeFile(`data/${title}`, description, 'utf8', function(err){
      response.writeHead(302, {Location: `/?id={title}`});
      response.end();
  });