WEB3 - Express

페이지 수정 기능 구현

수업소개

페이지 수정 기능을 Express 버전으로 전환해봅시다.

 

 

강의

 

 

 

소스코드

변경사항

main.js

var express = require('express')
var app = express()
var fs = require('fs');
var path = require('path');
var qs = require('querystring');
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/${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.get('/create', function(request, response){
  fs.readdir('./data', function(error, 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.send(html);
  });
});

app.post('/create_process', 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: `/?id=${title}`});
        response.end();
      })
  });
});

app.get('/update/: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 list = template.list(filelist);
      var html = template.HTML(title, list,
        `
        <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>
        `,
        `<a href="/create">create</a> <a href="/update?id=${title}">update</a>`
      );
      //위의 코드에서 /update?id=${title} 부분은 /update/${title}로 수정 되어야 하는 버그입니다. 
      response.send(html);
    });
  });
});

app.post('/update_process', 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(error){
        fs.writeFile(`data/${title}`, description, 'utf8', function(err){
          response.writeHead(302, {Location: `/?id=${title}`});
          response.end();
        })
      });
  });
});

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

 

댓글

댓글 본문
작성자
비밀번호
  1. 연수아빠
    유익한 강의 감사드립니다.
  2. 상산조자룡이다
    아.. 그렇군요. 확인 감사합니다. 수업 후반부까지 열심히 들어야겠네요.

    Django를 살짝 사용해본 경험이 있는데, Node.js 수업을 들으면서 레고블럭처럼 하나하나 쌓아서 만들어야 하는 것에 충격을 받았었는데, Express를 배우니까 너무 편리하고 깔끔하고 가독성이 좋아서 재밌습니다. 좋은 강의 감사합니다!!
    대화보기
    • egoing
      semantic URL을 말씀하시는거군요. 저는 수업에서 최대한 복잡한 요소를 도입하지 않기 위해서 주의를 기울이고 있어서요. 최소한의 개념들로 수업을 유지하고 있답니다. 라고 말씀 드리고 코드를 자세히 보니까

      update 페이지는 semantic URL로 수정했는데 거기로 가는 링크는 여전히 쿼리스트링이네요. 제가 실수 한 것이네요. 예제 코드에 내용을 추가했습니다. 아마 수업 후반부에서 이 부분을 정정하는 것 같습니다.
      대화보기
      • 상산조자룡이다
        안녕하세요.

        사실 node.js나 express가 처음이라 잘 모르는 입장에서 질문 드려 죄송합니다. 'Update'를 클릭할 경우 이동하는 페이지의 url이 쿼리스트링 형식으로 나타나는 것이 다른 페이지와는 뭔가 달라서 미관상 그 부분도 수정해야 하는지 궁금했습니다!
        대화보기
        • egoing
          안녕하세요. 그런데 어떤 이유로 수정이 필요하다고 생각하시는지요?
          대화보기
          • 상산조자룡이다
            매번 좋은 강의 감사합니다. 덕분에 Node.js부터 꾸준히 학습 중입니다. update 버튼의 a 태그에 보면 쿼리스트링으로 주소가 되어 있는데 그것은 수정할 필요가 없는지요?
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기