Express - 5.2. 상세페이지 구현 2

목표

리스트 목록 페이지를 Express을 이용해 semantic url 방식으로 작성하기

 

---

request.params

app.get('/page/:pageId', function(request, response){
  console.log(request.params);
}

{ pageId: 'CSS' }

따라서 request.params.pageId를 이용하여 클릭된 제목을 인지한다.

 

이전 코드

  // 2. id값을 선택한 page
      } else {
        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 sanitizedTitle = sanitizeHtml(title);
            var sanitizedDescription = sanitizeHtml(description);
            var list = template.list(filelist);
            var html = template.html(title, list,
              `<a href="/create">create</a>
              <a href="/update?id=${sanitizedTitle}">update</a>
              <form action="delete_process" method="post" onsubmit="blarblar">
                <input type="hidden" name="id" value="${sanitizedTitle}">
                <input type="submit" value="delete">
              </form>
              `,
              `<h2>${sanitizedTitle}</h2>${sanitizedDescription}`);
            response.writeHead(200);  //200: 파일을 성공적으로 전송하였음
            response.end(html);
          });
        });
      }

Express 코드

app.get('/page/: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 sanitizedTitle = sanitizeHtml(title);
      var sanitizedDescription = sanitizeHtml(description);
      var list = template.list(filelist);
      var html = template.html(title, list,
        `<a href="/create">create</a>
        <a href="/update?id=${sanitizedTitle}">update</a>
        <form action="delete_process" method="post" onsubmit="blarblar">
          <input type="hidden" name="id" value="${sanitizedTitle}">
          <input type="submit" value="delete">
        </form>
        `,
        `<h2>${sanitizedTitle}</h2>${sanitizedDescription}`);
      response.send(html);
    });
  });
});

결과

 

하지만 링크를 글 목록을 클릭했을 때 query string방식으로 동작하여 링크로 들어가게 된다.

우리는 query string 방식이 아닌 url path parameter방식인 semantic url 방식으로 구현할 것이기 때문에 수정해야 한다. 이는 template.js에 있는 list: function을 수정하면 된다.

list = list + `<li><a href="/page/${filelist[i]}">${filelist[i]}</a></li>`;

그러면 이제 링크를 클릭해도 원하는 url로 가게 된다.