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. jo_onc
    와우! 감사합니다!
    대화보기
    • raiN.Shower
      _process 과정에서 리다이랙션 코드

      response.writeHead(302,{Location : `/page/${title}`});
      response.end();

      를 간단히

      response.redirect(302, `/page/${title}`);

      로 대체 가능하네요
    • 상구미
      Update Process 부분에서 ?id 로 된 부분을 /page/${title} 로 수정하면 Update 제출을 눌렀을때 수정된 페이지로 이동되네요.

      fs.rename(`data/${id}`, `data/${title}`, function (error) {
      fs.writeFile(`data/${title}`, description, 'utf8', function (err) {
      response.writeHead(302, {
      Location: `/page/${title}`
      });
      response.end();
      })
      });
    • 연수아빠
      유익한 강의 감사드립니다.
    • 상산조자룡이다
      아.. 그렇군요. 확인 감사합니다. 수업 후반부까지 열심히 들어야겠네요.

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

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

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