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. 21.10.11
  3. 졸작완성하자
    211008 완료
  4. labis98
    20210727 completed!!
  5. 2021.07.18
  6. Jeong Il Haan
    20210421
  7. byoonn
    완료
  8. 21.02.27
  9. chimhyangmoo
    21.02.24
  10. jeisyoon
    2021.02.11 App - 글수정 - 수정할 정보 전송 완료
  11. 마아앙
    2021.02.09
  12. 뭄수
    완료
  13. ohhigo
    21/1/24 ★★★★★
  14. 2021.01.06 완료!
  15. 손민철
    20/12/31 완료
  16. 생활둘기
    2020 12 26
  17. kkn1125
    20.12.22 완료~!
  18. 옹옹
    2021124
  19. Kim Jaok
    너무 늦은 답변이지만...
    같은 문제를 해결했어요.

    님의 코드 중에..

    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>`); // 이부분이에요
    // href="/update?id=${title}" 이렇게 주소를 변경하면 되요.
    // 저도 같은 오타가 있었어요.
    response.writeHead(200);
    response.end(template);
    });
    });
    }

    (egoing 님 코드로는 58번째입니다. : `<a href="/create">create</a> <a href="/update?id=${title}">update</a>` )

    주소 변경후 href="/update?id=${title}" 다 잘 작동합니다. :)
    대화보기
    • 콜라
      20201015 완료
    • Yong Hyun Lee
      완료 201002
    • 박병진
      완료 2020.09.12
    • vampa
      2020.09.10
    • Jenny Song
      29th.JULY.2020 완료
    • 코딩하는렌즈쟁이
      2020-07-28 (화)
      완료
    • 영호팍
      이해 완료!!!
    • Amousk
      좋은 강의 감사합니다.
    • Katherine Roh
      완료 :)
    • 김재익
      완료
    • 김보미
      완료
    • 바다의왕자
      완료
    • 준바이
      감사합니다
    • 심여수
      감사합니다
    • 03.11 완료
    • eddylee123456
      복습
    • eddylee123456
      완료
    • Gritter
      감사합니다.
    • 스티븐잡숴
      완료
    • 임은정
      ㅠㅠㅠ

      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'

      으로 해도 됩니다...

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

      9개월전이니 이미 해결 하셨겠지만.......ㅎㅎㅎ...
      대화보기
      • 강다리
        runn
      • 쑤우
        수강완료. 감사합니다~
      • 굼벵이
        완료
      • YesterdayKite
        완료. 감사합니다!
      • youngjin.lee
        completed
      • 허공
        190510 감사합니다.
      • 이루
        완료
      • 위준우
        완료
      • 자유로움
        완료
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기