everyday com-eat
작성일
2024. 2. 21. 17:44
작성자
갱수터
728x90

1. DB 연결 

  • 새로운 js파일 만들어서 db연결 코드 옮겨주기
var mysql = require('mysql');
var db = mysql.createConnection({
    host:'localhost',
    user:'jinsugyeong',
    'password':'0000',
    database:'opentutorials'
});
db.connect();
module.exports = db;

 

 

  • 필요없는 코드 삭제하고, db 변수에 새로만든 파일의 경로 적어주기
var http = require('http');
var url = require('url');
var qs = require('querystring');
var template = require('./lib/template.js');
var db = require('./lib/db');

...생략...

 

 

 

 

2. 글 목록 조회

  • 원 코드에서 모듈로 사용한 db와 template를 새로 만드는 파일에서도 사용할 수 있게 모듈추가해주기
  • 원 코드 쿼리문에 사용한 함수 매개변수 갯수에 맞게 export 매개변수 넣어주기
var db = require('./db');
var template = require('./template.js');
exports.home = function(request, response) {
    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);
    });
}

 

  • export(s).함수명 으로 main 파일에서 호출 잘 해주기
if(pathname === '/') {                //루트일 때 실행(오류X)
    if(queryData.id === undefined) {    //쿼리 스트링 없을 때 실행 (홈 O)         
      topic.home(request, response);
    }
    ...(생략)...

 

 

 

 

3. 글 상세 조회

  • 원 코드에서 쓰였던 url모듈과 추가해주기
  • 함수 안에 request로 받은 주소와 쿼리스트링 데이터로 변수 2개 만들기
...(생략)...
var url = require('url');
var qs = require('querystring');	//모듈추가

/**
 * 글 상세 조회
 * @param {*} request 
 * @param {*} response 
 */
exports.page = function(request, response) {
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    db.query(`SELECT * FROM topic`, function(error, topics) {
        if(error){
          throw error;
        }
        db.query(`SELECT * FROM topic AS t LEFT JOIN author AS a ON t.author_id = a.id WHERE t.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}
                    <p>by ${topic[0].name}</p>`,
                    `<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);
        });
      });
}

 

 

  • 아까처럼 원래 코드있던 곳에 추가한 page 함수 추가해주기
  • url 모듈은 그대로 둬야함!
...(생략)...

  if(pathname === '/') {                //루트일 때 실행(오류X)
    if(queryData.id === undefined) {    //쿼리 스트링 없을 때 실행 (홈 O)         
      topic.home(request, response);
    }else {                             //쿼리 스트링 있을 때 실행 (홈 X)
      topic.page(request, response);
    }

...(생략)...

 

 

 

 

4. 글 생성 

  • 글 생성 화면과 생성 처리 2가지 경우를 따로 분리해줘야 한다.
//main.js 파일
...(생략)

  } else if(pathname === '/create') {           //create일 때 실행
    topic.create(request, response);
  } else if(pathname === '/create_process') {  //create_process일 때 실행
    topic.create_process(request, response);
    
    ...(생략)...
/**
 * 글 생성 처리
 * @param {*} request 
 * @param {*} response 
 */
exports.create_process = function(request, response) {
  var body = '';
    request.on('data', function(data) {
      //조각조각 나눠서 데이터를 수신할 때마다 호출되는 콜백 함수
      //데이터를 처리하는 기능을 정의
      body = body + data;
    });
    request.on('end', function(data) {
      //더이상 수신할 정보가 없으면 호출되는 콜백 함수
      //데이터 처리를 마무리하는 기능을 정의
      var post = qs.parse(body);
      console.log(post);
      db.query(`INSERT INTO topic(title, description, created, author_id) VALUES(?, ?, NOW(), ?)`,
        [post.title, post.description, post.author], function(error, result) {
          if(error) {
            throw error;
          }
          response.writeHead(302, {Location: `/?id=${result.insertId}`});
          response.end();
        }
      );
    });
}

/**
 * 글 생성 화면
 * @param {*} request 
 * @param {*} response 
 */
exports.create = function(request, response) {
  db.query(`SELECT * FROM topic`, function(error, topics) {
    db.query('SELECT * FROM author', function(error2, authors) {
      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>
            ${template.authorSelect(authors)}
          <p><input type="submit"></p>
          </form>
        `, 
        `<a href="/create">create</a>`
      );
      response.writeHead(200);
      response.end(html);
    });
  });
}


..(생략)...

 

 

이렇게.,.. 모든 else if들을 반복해줍니다....

그러면

 

이렇게 싹 정리 너무 깔금하죠