글수정-수정할 정보 전송

update 분기문 추가

"/update?id=' '"로 이동하였을 때, 페이지가 보이도록 아래와 같이 분기문 추가 및 수정(fs.redafile을 분기문 마다 로 분리해 주었음)

else if (pathname === '/update') { // 원래 글의 내용을 가져오고
    fs.readFile('data/' + queryData.id, 'utf8', function (err, description) {
      var title = queryData.id;
      fs.readdir('./data', function (error, filelist) {
        var list = templateFiles(filelist);
        var template = templateHTML(title, list,
          `
          <form action="http://localhost:80/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>
          `,
          `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
        );

        //response.end(fs.readFileSync(__dirname + url));
        response.writeHead(200); // 200을 전송하면, 파일을 잘 전송했다고 하는 약속
        response.end(template);
      });
    });
  }

 

• 접속 테스트

 

update에서 제출 완성

제출 버튼 클릭시, '/update_process'로 이동하도록 함. 위에서 localhost만 뺌

<form action="/update_process" method="POST">

 

이제 update를 눌렀을 때 해당 게시물에 대한 내용이 title란과 description란에 있어야하니 그 부분을 완성

• title 태그에 value, textarea에 description 추가

<form action="/update_process" method="POST">
            <p><input type="text" name="title" placeholder="title" value="${title}"></p>
            <p>
              <textarea name="description">${description}</textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>
          `,
          `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`

 

사용자가 title을 수정할 수도 있기에, 사용자가 수정하는 title과 우리가 가지고 있는 파일이름을 구분해서 가져야함.

          <form action="/update_process" method="POST">
            <input type="text" name="id" value="${title}"/>
            <p><input type="text" name="title" placeholder="title" value="${title}"></p>
            <p>
              <textarea name="description">${description}</textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>

input 태그를 하나 추가하여 value가 어떻게 되는 확인

• 추가한 input 태그의 value 확인

새로 추가한 input 태그의 value는 사용자가 수정하는게 아니라, 수정한 내용을 전송할 때 사용하는 값이라서 보여질 필요가 없음.

 

• hidden을 이용한 숨김

          <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">${description}</textarea>
            </p>
            <p>
              <input type="submit">
            </p>
          </form>

새로운 input 란이 사라진 것을 확인

 

• 새로운 값들을 입력하고 네트워크 전송 확인

nodejs 게시물을 title을 NodeJS3를 입력하고, description에 hello node3 js!! 를 입력한 뒤 제출 버튼을 클릭한 모습이다.