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?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. 강다리
    완료
  2. 굼벵이
    완료
  3. sunday00
    일반적인 nodejs가 아닌 response의 객체에서 send처럼 express의 코드를 사용하려면
    response.redirect( `/${title}` );
    입니다.
  4. 지미츄
    감사합니다
  5. 고맙습니다.
    대화보기
    • 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 자세히 보기