생활코딩

Coding Everybody

코스 전체목록

닫기

페이지 생성 구현

수업소개

페이지 생성 기능을 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?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.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.listen(3000, function() {
  console.log('Example app listening on port 3000!')
});

 

댓글

댓글 본문
  1. 어흥
    230705
  2. Hojun Song
    2023-04-19
  3. 감자
    22.12.22.
  4. 당당
    2022.11.16
  5. enty
    재밌습니다
  6. chio
    20220308
  7. 케굴
    2021-12-31
  8. chimhyangmoo
    21.03.23
  9. jeisyoon
    2021.03.14 페이지 생성 구현 - OK
  10. hanel_
    21.2.12
  11. 김지호
    21 01 06
  12. 생활둘기
    2021 1 4
  13. 콜라
    20201024 완료
  14. Yong Hyun Lee
    완료 201003
  15. 전주호
    완료
  16. ldhan0715
    20-09-14
  17. 뚜루뚜루뚭
    감사합니다
  18. 쑤우
    수강완료. 감사합니다~
  19. 강다리
    완료
  20. 굼벵이
    완료
  21. sunday00
    일반적인 nodejs가 아닌 response의 객체에서 send처럼 express의 코드를 사용하려면
    response.redirect( `/${title}` );
    입니다.
  22. 지미츄
    감사합니다
  23. nmcl
    고맙습니다.
    대화보기
    • leesj020925@naver.com
      오 감사합니다 안그래도 send() 로 했을때는 {location: ...} 자체를 반환해서 보여줘서 다른 방법은 없나 했습니다.
      대화보기
      • response.writeHead(){}
        response.send()

        ---->

        response.redirect(302,'/pages/${title}') 참고하세요
      • jo_onc
        저도 그렇게 생각합니당
        대화보기
        • 연수아빠
          app.post 메소드의 request.on 내부 response.writeHead(302, {Location: `/?id=${title}`});는
          response.writeHead(302, {Location: `/page/${title}` }); 이 맞는 것 같습니다.
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기