Node.js

App - POST 방식으로 전송된 데이터 받기

수업소개

POST 방식으로 전송된 데이터를 받아서 파일로 저장하는 방법에 대해서 알아보겠습니다. 

 

 

강의

 

 

소스코드

main.js (변경사항)

var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');

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>
  `;
}
function templateList(filelist){
  var list = '<ul>';
  var i = 0;
  while(i < filelist.length){
    list = list + `<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
    i = i + 1;
  }
  list = list+'</ul>';
  return list;
}

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 === '/'){
      if(queryData.id === undefined){
        fs.readdir('./data', function(error, filelist){
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          var list = templateList(filelist);
          var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
          response.writeHead(200);
          response.end(template);
        });
      } else {
        fs.readdir('./data', function(error, filelist){
          fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
            var title = queryData.id;
            var list = templateList(filelist);
            var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
            response.writeHead(200);
            response.end(template);
          });
        });
      }
    } else if(pathname === '/create'){
      fs.readdir('./data', function(error, filelist){
        var title = 'WEB - create';
        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);
      });
    } else if(pathname === '/create_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var title = post.title;
          var description = post.description
      });
      response.writeHead(200);
      response.end('success');
    } else {
      response.writeHead(404);
      response.end('Not found');
    }



});
app.listen(3000);

 

댓글

댓글 본문
작성자
비밀번호
  1. CronEB
    완료
  2. YesterdayKite
    완료. 감사합니다!
  3. 웅이
    cmd에 [Object: null prototype] { title: 'nodejs', description: 'nodejs is ...' }
    이런식으로 앞에 [Object: null prototype]이 함꼐 출력되는 부분은
    크게 상관없는 부분인가요?
  4. youngjin.lee
    completed
  5. 허공
    190510 감사합니다.
  6. 위준우
    완료
  7. 자유로움
    완료
  8. supernet
    감사합니다.
  9. 지미츄
    감사합니다
  10. 호두
    고맙습니다
  11. popinbompin
    complete
  12. 카렌, 에델, 웅 완료
  13. 일단시작하고본다
    ㅠㅠ감사합니다 꿀잼
  14. jo_onc
    와우!!!
    아주 좋은 강의입니다!
  15. farfromhere_
    감사합니다 정말!!!!
  16. 삼고잉
    잘 읽었습니다
  17. metallsk
    어렵지만, 앞으로 내딛는 걸음이 즐겁군요. 항상 egoing님의 수고에 감사드립니다.
  18. 김라식
    콘솔로그로 찍으면 아래와 같이 나오는데 윈도우라서 그런가요? 정상적인가요?
    title=nodejs&description=nodejs+is...
  19. Gimme_Gsuit
    저도 namimoon 님 같은 문제가 있어서 계속 찾아보고 코딩도 다시 해보고 했는데 원인은 저도 form 에서 유저의 값이 post 방식으로 전달 되어야 되는데 post 코딩을 빼먹고 코딩했었네요. ㅎㅎㅎ
    <form action="http://localhost:3000/create_process" method="post"> 요부분 입니다.
  20. egoing
    곧 강의를 누구나 만들 수 있게 돕기 위해서 여러가지 일들을 벌려보려고해요. 그 때 함께 해주세요 :)
    대화보기
    • namimoon
      egoing 님 처리 되었습니다.
      원인은 바로 앞 강좌에서 post 로 넘긴 값을 받아야 하는데
      제가 이전 강의랑 바로 이어서 듣지 않고, 이번 강의를 몇일 후에 듣게 되어
      그냥 강의상에 있는 URL을 호출해서 전달된 값이 없었던 것이었습니다.

      조금 어리석었네요. 번거롭게 해드려 죄송합니다.
      대화보기
      • egoing
        글써요. 그런 경우는 크롬 개발자 도구의 네트워크 탭에서 실제 어떤 데이터가 전송되고 있는지를 살펴보시는 것이 도움이 됩니다.
        대화보기
        • namimoon
          안녕하세요 질문이 있습니다.
          저는 windows 에서 사용 중인데
          console.log(post); 를 하면 "{ }" 이렇게 출력이 되네요.. 즉, 이고잉님처럼 title, description 항목이 보이지 않네요. 제가 생각할 때 다른 점은 OS인 것 같은데.. 이거 빼고는 다 동일하게 되네요. 혹시 이 부분은 어떤 것 때문에 출력이 안 되는지 문의 드립니다.
        • moon
          감사합니다.
        • Seo Yun Seok Tudoistube
          querystring 을 이용하는거군요.
          창업준비를 하면서 느끼는 아쉬움은 적극적인 피드백을 줄 수 있는 생산자를 어디서 많이 만날 수 있을까 인데,
          그러기 위해서는 제가 적극적인 피드백을 줄 수 있는 생산자가 되어야 가능할거 같아요.
          창업을 위해서 혼자 다 공부하고 배워야 한다엔 취업해서 맡은거만 잘하는게 더 나은거 같거든요.
          그래서, 저두 동영상강의 만드는 법 배우고 싶다는 생각이 듭니다.
          감사합니다.
        graphittie 자세히 보기