( Node.js) mysql 모듈 이용하여 글 목록 조회, 상세조회, 생성, 수정, 삭제 기능(CRUD) 구현

1. 목록 조회

모듈 가져오기

var mysql = require('mysql');

 

DB접속 정보 정의

var db = mysql.createConnection({
  host:'localhost',
  user:'jinsugyeong',
  'password':'0000',
  database:'opentutorials'
});
db.connect();

 

기존에 파일 읽어오는 부분 수정

 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);
});

select * from topic 시 위에부분 생략 된 쿼리result 모습

 

 

메서드(template) 매개변수 이름 변경

//filelist >>> toipics
list: function(topics) {
  var list = '<ul>';
  var i = 0;
  while(i < topics.length) {
    list += `<li><a href="/?id=${topics[i].id}">${topics[i].title}</a></li>`;
    i++;
  }
  list += '</ul>';
  return list;
}

 

 

결과

 

 

 

2. 상세조회 

기존에 파일 읽어오는 부분 수정

• `SELECT * FROM topic WHERE id = ?`, [queryData.id], < nodejs 도 쿼리파람 물음표로 넣네.. .물론 여긴 보안때문이지만...
• 목록

else {                             //쿼리 스트링 있을 때 실행 (홈 X)
  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 sanitizedTitle = sanitizeHtml(title);
      var list = template.list(topics);
      var html = template.HTML(title, list, 
                `<h2>${title}</h2>${description}`,
                `<a href="/create">create</a>`,
                `<a href="/create">create</a>
                <a href="/update?id=${title}">update</a>
                <form action="/delete_process" method="POST">
                  <input type="hidden" name="id" value="${title}" />
                  <input type="submit" value="delete" />
                </form>`);
      response.writeHead(200);
      response.end(html);
    });
  });
}

 

 

결과

 

3.생성

화면 구현

• 생성 페이지에 글 목록 출력 

else if(pathname === '/create') {   //create일 때 실행
db.query(`SELECT * FROM topic`, function(error, topics) {
  var title = 'Create';
  var list = template.list(topics);
  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>
    `, 
    `<a href="/create"></a>`
  );
  response.writeHead(200);
  response.end(html);
});


}

 

 

 

기능 구현

else if(pathname === '/create_process') {  //create_process일 때 실행
    var body = '';

    request.on('data', function(data) {
      body = body + data;
    });
    request.on('end', function(data) {
      var post = qs.parse(body);
      db.query(`
        INSERT INTO topic
        (
          title
          ,description
          ,create
          ,author_id
        )
        VALUES(
           ?
          ,?
          ,NOW()
          ,?
        )`,
        [post.title, post.description, 3],
        function(error, result) {
          if(error) {
            throw error;
          }
          response.writeHead(302, {Location: `/?id=${result.insertId}`});
          response.end();
        }
      );
    });



  }

 

 

결과

 

 

 

4. 수정

화면 구현

else if(pathname === '/update') {    //update일 때 실행
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 t = topic[0];
    var list = template.list(topics);
    var html = template.HTML(t.title, list, 
              `<form action="/update_process" method="POST">
                <input type="hidden" name="id" value="${t.id}" />
                <p><input type="text" name="title" placeholder="title" value="${t.title}" /></p>
                <p>
                  <textarea name="description" placeholder="description">${t.description}</textarea>
                </p>
                <p><input type="submit" /></p>
              </form>
            `, `<a href="/create">create</a> <a href="/update?id=${t.id}">update</a>`);
    response.writeHead(200);
    response.end(html);
  });
});


}

 

 

기능구현

else if(pathname === '/update_process') {    //update_process일 때 실행
var body = '';
request.on('data', function(data) {
  body = body + data;
});

request.on('end', function(data) {
  var post = qs.parse(body);
  db.query('UPDATE topic SET title=?, description=?, author_id=3 WHERE id=?',
    [post.title, post.description, post.id], function(error, result) {
      response.writeHead(302, {Location: `/?id=${post.id}`});
      response.end();
    }
  );
});


}

 

 

오류 찾기

UPDATE topic SET title=?, description=?, author_id=? WHERE id=?'
[post.title, post.description, post.id],

• 파라미터가 4개인데 계속 3개만 넣어주고 있었ㄴ에 ㅕ히하하하하ㅏ하하하하하ㅏ하
• 현재 author 테이블은 안건들이고 있어서, 저자분이 작성자는 임의의 1번으로 코드 박아놓고 하자구~ 책에 써두셧네!! 

 

 

 

 

 

5. 삭제

else if(pathname === '/delete_process') {    //delete_process일 때 실행
var body = '';
request.on('data', function(data) {
  body = body + data;
});
request.on('end', function(data) {
  var post = qs.parse(body);
  db.query('DELETE FROM topic WHERE id=?',[post.id], function(error, result) {
      if(error) throw error;
      response.writeHead(302, {Location: `/`});
      response.end();
    }
  );
});


}

내가 title1 사라지게 해볼게

얍

 

7시네.... 이제 회사가야함...