Express 3. 상세보기 페이지 구현

https://expressjs.com/en/guide/routing.html

Express routing

const express = require('express');
const app = express();
const fs = require('fs');
const template = require('./lib/template.js');
const path = require('path');
const sanitizeHtml = require('sanitize-html');

app.get('/', (req, res) => {
    fs.readdir('./data', (err, filelist) => {
        var title = 'Welcome home!';
        var description = 'Hello, Node.js';
        var list = template.list(filelist);
        var html = template.HTML(title, list,
          `<h2>${title}</h2>${description}`,
          `<a href="/create">create</a>`
        );
        res.send(html); 
      });
});

app.get('/page/:pageId', (req, res) => {
    fs.readdir('./data', (err, filelist) => {
        var filteredId = path.parse(req.params.pageId).base;
        fs.readFile(`data/${filteredId}`, 'utf8', (err, description) => {
            var title = req.params.pageId;
            var sanitizedTitle = sanitizeHtml(title);
            var sanitizedDescription = sanitizeHtml(description, {
                allowedTags:['h1']
            });
            var list = template.list(filelist);
            var html = template.HTML(sanitizedTitle, list,
                `<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
                ` <a href="/create">create</a>
                <a href="/update?id=${sanitizedTitle}">update</a>
                <form action="delete_process" method="post">
                    <input type="hidden" name="id" value="${sanitizedTitle}">
                    <input type="submit" value="delete">
                </form>`
            );
            res.send(html);
        });
    });
});

app.listen(3000, () => console.log('Example app listening on port 3000!'));

 

톺아보기

1. path 모듈

const path = require('path');
const sanitizeHtml = require('sanitize-html');

path 모듈은 파일과 Directory 경로 작업을 위한 Utility를 제공한다.

saninize-html 모듈 설명은 생략

 

2. url을 path방식으로 처리하기

app.get('/page/:pageId', (req, res) => {
    fs.readdir('./data', (err, filelist) => {
        var filteredId = path.parse(req.params.pageId).base;
        fs.readFile(`data/${filteredId}`, 'utf8', (err, description) => {
            var title = req.params.pageId;
            var sanitizedTitle = sanitizeHtml(title);
            var sanitizedDescription = sanitizeHtml(description, {
                allowedTags:['h1']
            });
            var list = template.list(filelist);
            var html = template.HTML(sanitizedTitle, list,
                `<h2>${sanitizedTitle}</h2>${sanitizedDescription}`,
                ` <a href="/create">create</a>
                <a href="/update?id=${sanitizedTitle}">update</a>
                <form action="delete_process" method="post">
                    <input type="hidden" name="id" value="${sanitizedTitle}">
                    <input type="submit" value="delete">
                </form>`
            );
            res.send(html);
        });
    });
});

Express 공식홈페이지에서 Route Parameter에 따르면 다음과 같이 처리한다.

Route path : /users/:userId/books/:bookId

   => 라우트 패스를 이렇게 지정하고

Request URL: http://localhost:3000/users/34/books/8989

   => 사용자가이렇게 접속하면

req.params: { "userId": "34", "bookId": "8989" }

   => req.params 객체에 이런식으로 저장된다. 

 

그것에 대한 구현은 다음과 같다.

app.get('/users/:userId/books/:bookId', function (req, res) {
  res.send(req.params)
})

 

즉, 본인의 다음 코드에서

app.get('/page/:pageId', (req, res) => {

사용자가 /page/어떤값 으로 들어왔을 때 어떤값에 pageId라는 이름을 붙인 것이고 req.params 객체의 pageId key값에 어떤 값이 저장되는 것이다.

 

또한 다음을 위해서 url이 쿼리스트링 방식으로 나오는 것을 바꾸고 패스방식으로 출력하기 위해서 template.js 코드에서 list 부분을 다음과 같이 수정해야한다.

list : function(filelist) {
    var list = '<ul>';
    var i = 0;
    while (i < filelist.length) {
        list = list + `<li><a href="/page/${filelist[i]}">${filelist[i]}</a></li>`;
        i = i + 1;
    }
    list = list + '</ul>';
    return list;
}

/page/HTML로 접속하면 req.params객체의 pageId 항목에 HTML이 저장된다.