Node.js - MySQL

MySQL로 상세보기 구현

수업소개

MySQL을 이용해서 글 상세보기 기능을 구현하는 방법을 살펴보겠습니다. 

 

 

 

강의

 

 

 

소스코드

main.js (변경사항)

var http = require('http');
var fs = require('fs');
var url = require('url');
var qs = require('querystring');
var template = require('./lib/template.js');
var path = require('path');
var sanitizeHtml = require('sanitize-html');
var mysql = require('mysql');
var db = mysql.createConnection({
  host:'localhost',
  user:'root',
  password:'111111',
  database:'opentutorials'
});
db.connect();


var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    var pathname = url.parse(_url, true).pathname;
    if(pathname === '/'){
      if(queryData.id === undefined){
        db.query(`SELECT * FROM topic`, function(error,topics){
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          var list = template.list(topics);
          var html = template.HTML(title, list,
            `<h2>${title}</h2>${description}`,
            `<a href="/create">create</a>`
          );
          response.writeHead(200);
          response.end(html);
        });
      } else {
        db.query(`SELECT * FROM topic`, function(error,topics){
         if(error){
           throw error;
         }
         db.query(`SELECT * FROM topic WHERE id=?`,[queryData.id], function(error2, topic){
           if(error2){
             throw error2;
           }
          var title = topic[0].title;
          var description = topic[0].description;
          var list = template.list(topics);
          var html = template.HTML(title, list,
            `<h2>${title}</h2>${description}`,
            ` <a href="/create">create</a>
                <a href="/update?id=${queryData.id}">update</a>
                <form action="delete_process" method="post">
                  <input type="hidden" name="id" value="${queryData.id}">
                  <input type="submit" value="delete">
                </form>`
          );
          response.writeHead(200);
          response.end(html);
         })
      });
      }
    } else if(pathname === '/create'){
      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.writeHead(200);
        response.end(html);
      });
    } else if(pathname === '/create_process'){
      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();
          })
      });
    } else if(pathname === '/update'){
      fs.readdir('./data', function(error, filelist){
        var filteredId = path.parse(queryData.id).base;
        fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){
          var title = queryData.id;
          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>`
          );
          response.writeHead(200);
          response.end(html);
        });
      });
    } else if(pathname === '/update_process'){
      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();
            })
          });
      });
    } else if(pathname === '/delete_process'){
      var body = '';
      request.on('data', function(data){
          body = body + data;
      });
      request.on('end', function(){
          var post = qs.parse(body);
          var id = post.id;
          var filteredId = path.parse(id).base;
          fs.unlink(`data/${filteredId}`, function(error){
            response.writeHead(302, {Location: `/`});
            response.end();
          })
      });
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

 

댓글

댓글 본문
작성자
비밀번호
  1. 감사합니다.
  2. 아.... 감사합니다! 덕분에 궁금했던점이 풀렸습니다
    대화보기
    • 박찬울
      [ RowDataPacket {
      id: 1,
      title: 'MySQL',
      description: 'MySQL is...',
      created: 2018-01-01T03:10:11.000Z,
      author_id: 1 } ]

      위는 console.log(topic)의 결과입니다. 여기서 [] (대괄호)를 주목해주세요, [] 안에 RowDataPacket{...생략...}이 들어있습니다. 즉 [] 안의 RowDataPacket{} 은 첫 번째 객체입니다. 따라서 topic[0] 으로 RowDataPacket{...} 을호출할 수 있는 것입니다. topic[0].title 은 topic 객체의 0번째 인덱스 RowDataPacket{}의 title을 가져오게 되는 것입니다.

      만약 다음과 같은 SQL 으로 처리한다면 topic 의 결과는 아래와 같습니다.

      SQL :
      SELECT * FROM topic WHERE id = 1 OR id = 3;


      결과 :
      [ RowDataPacket {
      id: 1,
      title: 'MySQL',
      description: 'MySQL is...',
      created: 2018-01-01T03:10:11.000Z,
      author_id: 1 },
      RowDataPacket {
      id: 3,
      title: 'SQL Server',
      description: 'SQL Server is ...',
      created: 2018-01-20T02:01:10.000Z,
      author_id: 2 } ]

      만약 topic 의 두 번째 객체의 "SQL Server is ..."이라는 description 를 가져오고 싶다면 어떻게 해야 할까요?
      topic[1].description
      이라고 하면 될 것입니다. 이해가 되셨으면 좋겠습니다.
      대화보기
      • 갑자기 궁금해서 그런데요...
        db.query(`SELECT * FROM topic`, function(error,topics){
        if(error){
        throw error;
        }
        db.query(`SELECT * FROM topic WHERE id=?`,[queryData.id], function(error2, topic){
        if(error2){
        throw error2;
        }
        var title = topic[0].title;
        var description = topic[0].description;

        저기를 0으로 넣는건 topic에 id 값중 0이 없기 때문에 그냥 0으로 입력하면
        db.query(`SELECT * FROM topic WHERE id=?`,[queryData.id], function(error2, topic){ 여기서
        정해진 id값을 알아서 가져오는건가요?
      • 3344
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기