WEB3 - Express

상세보기 페이지 구현

수업소개

상세보기 페이지를 Express 버전으로 변환해볼 것입니다. 이 과정에서 query string을 사용하지 않는 pretty url(clean url, semantic url..)로 라우트 기능을 구현하는 방법을 살펴보겠습니다. 

 

 

 

강의 1

Clean URL로 Route를 구현하는 방법을 소개해드립니다. 

 

 

 

소스코드

변경사항

main.js 


var express = require('express')
var app = express()
var fs = require('fs');
var template = require('./lib/template.js');

//route, routing
//app.get('/', (req, res) => res.send('Hello World!'))
app.get('/', function(request, response) { 
  fs.readdir('./data', function(error, filelist){
    var title = 'Welcome';
    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>`
    ); 
    response.send(html);
  });
});

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

app.listen(3000, function() {
  console.log('Example app listening on port 3000!')
});

 

 

 

강의2

상세보기 페이지를 완성해봅시다.

 

 

 

소스코드

변경사항

main.js

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

//route, routing
//app.get('/', (req, res) => res.send('Hello World!'))
app.get('/', function(request, response) { 
  fs.readdir('./data', function(error, filelist){
    var title = 'Welcome';
    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>`
    ); 
    response.send(html);
  });
});

app.get('/page/:pageId', function(request, response) { 
  fs.readdir('./data', function(error, 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, {
        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>`
      );
      response.send(html);
    });
  });
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!')
});

 

lib/template.js

module.exports = {
  HTML:function(title, list, body, control){
    return `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      ${list}
      ${control}
      ${body}
    </body>
    </html>
    `;
  },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;
  }
}

 

댓글

댓글 본문
작성자
비밀번호
  1. Specialist
    작업 중인 개인프로젝트에 적용시키니까 사뭇 다르네요. 여기 나온것처럼 하면 되는데 기존에 썼던 쿼리스트링을 계속 쓰려고 하다보니 강의에서 나온 시멘틱 URL이 사뭇 다르게 느껴집니다. 훨씬 좋네요. 강의 들으면서 놓친 부분이 많은거 같아요. 다시 복습하면서 필요한 부분은 정리해야겠어요. 좋은 강의였습니다!!
  2. jo_onc
    아주 편리하네요!
  3. 삼고잉
    잘 읽었습니다.
  4. 연수아빠
    express frame work에 편리한 기능들이 많이 있네요.
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기