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. 송바래
    흐어ㅠㅠ 20분 넘게 찾아보고 해결 안되서 댓글 찾아보니까 해결됐네요!!!

    정말 감사합니다 ㅠㅠ 흑흑
    대화보기
    • 완료
    • 케굴
      2021-12-26
    • 초딩 개발자
      2021/12/13
    • 일억개
      떠먹여줄때가 좋다
    • 21.10.11
    • 졸작완성하자
      211008 완료
    • labis98
      20210727 completed!!
    • 2021.07.18
    • Jeong Il Haan
      20210421
    • byoonn
      완료
    • 21.02.27
    • chimhyangmoo
      21.02.24
    • jeisyoon
      2021.02.11 App - 글수정 - 수정할 정보 전송 완료
    • 마아앙
      2021.02.09
    • 뭄수
      완료
    • ohhigo
      21/1/24 ★★★★★
    • Noah
      2021.01.06 완료!
    • 손민철
      20/12/31 완료
    • 생활둘기
      2020 12 26
    • kkn1125
      20.12.22 완료~!
    • 옹옹
      2021124
    • 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
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기