Node.js.35.App 제작-글수정-수정할 정보 전송

목표

update를 눌렀을 때 화면 구성하기

 

필요한 것

1. form 태그
2. read 기능

 

---

update 페이지 생성 코드

}else if(pathname == '/update'){
      fs.readdir('./data', function(err, filelist){
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = queryData.id;
          var list = templateList(filelist);
          var template = templateHTML(title, list,
            //form 부분
            `
            <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);  //200: 파일을 성공적으로 전송하였음
          response.end(template);
        });
      });

결과

폼이 잘 들어왔다 !

 

여기서 폼에서 submit을 했을 때, 사용자가 정보를 어디에 보낼 것인지 고려해야 한다.

create_process -> update_process 로 변경한다.

    }else if(pathname == '/update'){
      fs.readdir('./data', function(err, filelist){
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = queryData.id;
          var list = templateList(filelist);
          var template = templateHTML(title, list,
            //form 부분
            `
            <form action="/update_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);  //200: 파일을 성공적으로 전송하였음
          response.end(template);
        });
      });
    }

 

또한 이전의 데이터를 읽어와 form에 넣어야 한다.

<input>에는 value="${title}을 추가시키고,

<textarea>는 태그 안쪽에 작성될 내용 ${description} 을 추가하면 된다.

    }else if(pathname == '/update'){
      fs.readdir('./data', function(err, filelist){
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = queryData.id;
          var list = templateList(filelist);
          var template = templateHTML(title, list,
            //form 부분
            `
            <form action="/update_process" method="post">
              <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>
            `,
            ``);
          response.writeHead(200);  //200: 파일을 성공적으로 전송하였음
          response.end(template);
        });
      });
    }

결과

 

제출 버튼을 누르게 되면 /update_process로 사용자가 수정한 정보를 전송하는데, 어떤 파일을 수정할 것인지 알아야 한다. 여기서 사용자가 title을 수정하게 되면 이전 파일의 title과 달라진다.

따라서 이전 정보와 새로 입력된 정보를 잘 구별해야 한다.

<input type="hidden" name="id" value=${title}>

이때 hidden을 사용하면 화면에 표시하지 않고도 수정할 파일의 정보를 받아올 수 있다. 이는 name="id"로 title value값을 전송한다. 따라서 update_process에서 수정되지 않은 파일과 수정할 파일의 이름을 받아올 수 있다.

결과

id: 이전값

title: 수정된 값