Node.js

App - 글수정 - 수정할 정보 전송

수업소개

수정할 내용을 서버로 전송하는 법을 살펴봅니다.

 

 

 

강의

 

 

 

소스코드

main.js (변경사항)

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

function templateHTML(title, list, body, control){
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    ${control}
    ${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}`,
            `<a href="/create">create</a>`
          );
          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}`,
              `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
            );
            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="/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;
          fs.writeFile(`data/${title}`, description, 'utf8', function(err){
            response.writeHead(302, {Location: `/?id=${title}`});
            response.end();
          })
      });
    } else if(pathname === '/update'){
      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,
            `
            <form action="/update_process" method="post">
              <input type="hidden" name="id" value="${title}">
              <p><input type="text" name="title" placeholder="title" value="${title}"></p>
              <p>
                <textarea name="description" placeholder="description">${description}</textarea>
              </p>
              <p>
                <input type="submit">
              </p>
            </form>
            `,
            `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
          );
          response.writeHead(200);
          response.end(template);
        });
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

 

댓글

댓글 본문
작성자
비밀번호
  1. 스티븐잡숴
    완료
  2. 임은정
    ㅠㅠㅠ

    http://localhost......ipt 로 안들어오고
    // http://localhost......ipt 로 들어오는지 모르겠어요
    똑같이 적은것같은데....




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


    function templateHTML(title, list,body,control ){
    return `
    <!doctype html>
    <html>
    <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    ${control}
    ${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;
    var title = queryData.id;

    console.log(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}`,
    `<a href="/create">create </a>`
    );
    response.writeHead(200);
    response.end(template);
    })
    } else {
    fs.readdir('./data',function(error,filelist){
    fs.readFile(`data/${queryData.id}`,'utf8',function(err,description){
    var list = templateList(filelist);
    var title = queryData.id;
    var template = templateHTML(title, list,
    `<h2>${title}</h2>${description}`,
    `<a href="/create">create </a> <a href="/update/?id=${title}"> update </a>`);
    response.writeHead(200);
    response.end(template);
    });
    });
    }
    } else if(pathname === '/create') {
    fs.readdir('./data',function(error,filelist){
    var title = 'Welcome';
    var description = 'Hello, Node js';
    var list = templateList(filelist);
    var template = templateHTML(title, list,`
    <form action="/create_process" method="post">
    <p><input type="text" name="title"></p>
    <p><textarea name="desc"></textarea></p>
    <p><input type="submit" name="button"></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 desc = post.desc;

    fs.writeFile(`data/${title}`,desc,'utf8',function(err){
    response.writeHead(302,{Location : `/?id=${title}`});
    response.end();
    });
    });

    }else if (pathname === '/update/'){
    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,
    `
    <form action="/update_process" method="post">
    <input type="hidden" name="id" value="${title}">
    <p><input type="text" name="title" value="${title}"></p>
    <p><textarea name="desc">${description}</textarea></p>
    <p><input type="submit" name="button"></p>
    </form>

    `,`<a href="/create">create </a> <a href="/update?id=${title}"> update </a>`); // body에 넣을 내용 //쿼리 실렉터 앞에 / 붙으면 아예 다른주소가 붙는것입니당..
    response.writeHead(200); //200의 의미 : 파일을 성공적으로 전송했다.
    response.end(template);

    // Q. 왜 http://localhost......ipt 로 안들어오고
    // http://localhost......ipt 로 들어오는지 모르겠음
    });
    });

    }
    else {
    response.writeHead(404);//404의 의미 : 파일을 성공적으로 전송하지 못했다.
    response.end('Not Found');

    }


    });
    app.listen(3001);

    저렇게 들어오는걸 확인하고
    일단 조건문을
    pathname === '/update/'

    으로 바꿧더니 작동은 해요..

    혹은

    pathname = '/update'

    으로 해도 됩니다...

    ㅠㅠㅠ
    왜 제대로 작동 안할까욤
  3. codinginpain
    완료뜨
    강의를 많이 하셔서 강의력이 점점 느시는건지
    제가 쫓아가다보니 는건지 모르겠지만
    이해가 쏙쏙 되는 강의입니다
    너무 감사합니다 갓고잉님
  4. 홍콩돼지
    queryData.id 가 없는게 아닐까요
    그 말은 이코드에서 뭔가 잘못된게 아니라 상세페이지에 control로 넘겨주는 a tag 링크가
    <a href="/update?id=${title}">update</a>
    이렇게 안하고
    <a href="/update">update</a>
    이렇게 하시지 않았을까요

    9개월전이니 이미 해결 하셨겠지만.......ㅎㅎㅎ...
    대화보기
    • 강다리
      runn
    • 쑤우
      수강완료. 감사합니다~
    • 굼벵이
      완료
    • YesterdayKite
      완료. 감사합니다!
    • youngjin.lee
      completed
    • 허공
      190510 감사합니다.
    • 이루
      완료
    • 위준우
      완료
    • 자유로움
      완료
    • supernet
      감사합니다.
    • younhoso
      } else if(pathname === '/update'){
      fs.readdir('./data', function(err, filelist) {
      fs.readFile(`data/${queryData.id}`, 'UTF-8', function(err, description){
      var title = queryData.id;
      var list = templateList(filelist);
      var template = templateHTML(title, list,
      `
      <form action="/update_process" method="post">
      <input type="hidden" name="id" value="${title}">
      <p><input type="text" name="title" placeholder="title" value="${title}"></p>
      <p>
      <textarea name="description" placeholder="description">${description}</textarea>
      </p>
      <p>
      <input type="submit">
      </p>
      </form>
      `,
      `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`

      );

      response.writeHead(200);
      response.end(template);
      });
      });
      }
      이부분에서 value="${title}", ${description}를 똑같이 해줬는데. 왜 undefined가 나올까요??
      도와 주세요~
    • 호두
      고맙습니다
    • 1. 기존의 파일과 같은 이름으로 create시 기존의 파일에 덮어씌워짐
      2. 한글 깨짐
      과 같은 문제가 있습니다.
      create 상황일 때는, list와 비교해서 중복 검사 -> 기존의 파일들 중 똑같은 제목이 있으면 뒤에 _2 추가와 같은 방법으로 해결하시는지, 아니면 다른 좋은 방법이 있는지 궁금합니다. 그리고 한글 제목과 내용의 경우 글자가 깨지는데 qs.escape 방법을 써도 해결이 안돼서 막막하네요...
    • 일단시작하고본다
      이고잉님 사랑해요
    • 삼고잉
      첫번째 훑기
    • Gimme_Gsuit
      같은 ${title}값을 사용하지만, input 2개의 라인에 하나는 id 하나는 title에 값을 전달함으로써, id는 원래 기존값을 부여받고 title 값은 수정 됨으로써 데이터의 흐름을 알게 되었습니다.
    • moon
      감사합니다.
    • Seo Yun Seok Tudoistube
      크롬검사도구 네트워크에서 FormData 에 전송한 값이 모두 보이는거 보고 어떻게 이런 정보를 보안으로 지킬 수 있을지 궁금합니다.
      감사합니다!
    버전 관리
    egoing
    현재 버전
    선택 버전
    graphittie 자세히 보기