Express - 7. 페이지 수정 구현

목표

update페이지를 Express을 이용해 semantic url 방식으로 작성하기

 

---

이전 코드

 // 5. update 버튼을 누른 페이지
    }else if(pathname == '/update'){
      fs.readdir('./data', function(err, filelist){
        var filteredId = path.parse(queryData.id).base;
        fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
          var title = queryData.id;
          var list = template.list(filelist);
          var html = template.html(title, list,
            //form 부분
            `
            <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>
            `,
            ``);
          response.writeHead(200);  //200: 파일을 성공적으로 전송하였음
          response.end(html);
        });
      });
    //6. update 페이지에서 제출 버튼을 누른 페이지
    }else if(pathname === '/update_process'){
      var body = '';
      request.on('data', function(data){
        body = body + data;
      });
      request.on('end', function(){
        // title, description 뿐 아니라 name="id"값도 받아야 한다.
        var post = qs.parse(body);
        var id = post.id;
        var title = post.title;
        var description = post.description;
        fs.rename(`data/${id}`, `data/${title}`, function(err){
          fs.writeFile(`data/${title}`, description, 'utf8',
          function(err) {
            response.writeHead(302, {Location: `/?id=${title}`}); //302: redirection. 수정된 페이지로 이동
            response.end();
          });
        });
      });

 

Express 코드

//5. update 버튼 클릭 시 페이지
app.get('/update/:pageId', function(request, response){
  fs.readdir('./data', function(err, filelist){
    var filteredId = path.parse(request.params.pageId).base;
    fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
      var title = request.params.pageId;
      var list = template.list(filelist);
      var html = template.html(title, list,
        //form 부분
        `
        <form action="/update" 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>
        `,
        ``);
      response.send(html);
    });
  });
});

//6. update>제출 버튼 클릭 시 페이지
app.post('/update', function(request, response){
  var body = '';
  request.on('data', function(data){
    body = body + data;
  });
  request.on('end', function(){
    var post = qs.parse(body);
    var id = post.id;
    var title = post.title;
    var description = post.description;
    fs.rename(`data/${id}`, `data/${title}`, function(err){
      fs.writeFile(`data/${title}`, description, 'utf8',
      function(err) {
        response.writeHead(302, {Location: `/page/${title}`}); //302: redirection. 수정된 페이지로 이동
        response.end();
      });
    });
  });
})