Express - 6. 페이지 생성 구현

목표

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

 

---

이전 코드

    // 3. create 버튼을 누른 페이지
    }else if(pathname === '/create') {
      fs.readdir('./data', function(err, filelist){
        var title = 'WEB - create';
        var list = template.list(filelist);
        var html = template.html(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);  //200: 파일을 성공적으로 전송하였음
        response.end(html);
      });
    // 4. create button을 눌러 데이터를 제출한 페이지
    }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}`});  //302: redirection. 수정된 페이지로 이동
          response.end();
        });
      });

Express 코드

//3. Create 버튼 클릭 시 페이지
app.get('/create', function(request, response){
  fs.readdir('./data', function(err, filelist){
    var title = 'WEB - create';
    var list = template.list(filelist);
    var html = template.html(title, list,
      '',
      `
      <form action="/create" 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.send(html);
  });
});

//4. create>제출 버튼 클릭 시 페이지
app.post('/create', function(request, response){
  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: `/page/${title}`});  //302: redirection. 수정된 페이지로 이동
      response.end();
    });
  });
});

여기서 create버튼을 눌렀을 때와, create에서 제출 버튼을 눌렀을 때 이동하는 페이지가 /create로 동일해도 된다.

get일 경우 get('/create' ...)로 이동하고, post인 경우 post('/create' ...)로 자동으로 이동하게 되기 때문이다.

 

아래는 express 글을 생성한 결과이다.

결과