node.js에 db연동

지난번 포스팅에 이어 이번에는 Mariadb에 데이터를 저장하고 node.js에 db에 저장된 데이터를 출력해주겠습니다.

먼저 저는 docker에 maraidb를 설치하여 아래와 같은 테이블을 만들었습니다.

 

 

node에 mysql설치

이전에 수행했던 폴더에서 터미널을 열어 npm install mysql --save 를 입력해줍니다.

 

그리고 설치가 완료되었으면 database라는 폴더를 하나 만들어줍니다. 다음 그 안에 connect폴더를 하나 만들어주고

또 그 안에 mariadb.js라는 파일을 하나 만들어줍니다. 

 

다음으로 Mariadb랑 연결을 해주겠습니다. 

mariadb.js에 아래의 코드를 입력해줍니다. 여기서는 어떤 db에 접속할건지 정보를 입력해줍니다. 

const mariadb = require('mysql');

const conn = mariadb.createConnection(
    {
        host : 'localhost',
        port:3306,
        user:'root',
        password:'root',
        database:'Tennis'
    }
);

module.exports = conn;

 

그리고 실제 mariadb랑 연결하기위해 index.js에 들어와서 아래의 코드를 추가해줍니다.

const maraidb = require('./database/connect/mariadb');
maraidb.connect();

 

마지막으로 db에 있는 데이터를 출력하기위해 requestHandler.js에 가서

다음의 코드를 추가해줍니다.

maria.query('실행할 쿼리', function(err,rows){ 실행할함수} );를 해주는데 여기서 rows에는 해당 쿼리의 결과값이 반환됩니다. 저는 "SELECT * FROM product"라고 쿼리를 작성해주고 실행해보겠습니다. 

const maraidb = require('./database/connect/mariadb');

//이전에 작성했던 main function에 코드추가

function main(response){
   console.log('main');
   //추가된부분 
   maraidb.query("SELECT * FROM product", function(err,rows){
    console.log(rows);
   });
   //여기까지 
   response.writeHead(200, { 'Content-Type': 'text/html' });
   response.write('Main Page');
   response.end();
}

메인페이지를 들어가보면 아래처럼  터미널에 db의 데이터가 잘 출력되는 것을 볼 수 있습니다. 

 

 

실전

node html파일 연동

이전에 만들었던 html 페이지를 위의 db의 데이터를 이용해 출력해보겠습니다. 

먼저 이전에 만들었던 html페이지입니다. 위의 node의 파일들과 html파일들을 하나의 폴더로 합쳐주겠습니다. 

아래의 테니스 아이템들은 임의적으로 설정했었는데 db의 데이터를 이용해보겠습니다. 

 

먼저 node.js에서 메인페이지로 들어가면 위의 페이지가 나오게 하고싶습니다. 

화면을 바꾸기 위해서는 모듈이 필요합니다. ' fs '라는 모듈이 바로 그 모듈입니다. file sink의 약자입니다. 

이 모듈을 가지고 우리가 만든 html파일을 가져올 수 있습니다. 

가져오는 방법은 requestHandler.js로 가서 아래의 코드를 기존의 코드에 맨위에 추가로 작성해줍니다.

//추가한코드
const fs = require('fs');
const main_view = fs.readFileSync('./main.html', 'utf-8');
//여기까지
const maraidb = require('./database/connect/mariadb');

function main(response){
   console.log('main');
   maraidb.query("SELECT * FROM product", function(err,rows){
    console.log(rows);
   });

   response.writeHead(200, { 'Content-Type': 'text/html' });
   //write()안의 'Main Page'를 방금 위의 만든 main_view로수정
   response.write(main_view);
   response.end();
}

let handle = {}; // key : value로 이루어진 변수
handle['/'] = main; // '/'로 가면 main()함수실행

exports.handle = handle;

 

node index.js를 커멘드에 입력해서 실행해보면 아래와 같이 나타납니다.

 

 

이미지가 제대로 보이지 않는데 이유는 아래처럼 url로 인식하고 있어서 그렀습니다. 

 

 

해결방법은 main url 즉 '/'가 들어오면 main함수를 실행했듯이 해당 img url이 들어오면 해당 이미지를 출력하는 함수를 만들어 주면 됩니다. requestHandler.js의 아래에 다음과 같이 코드를 추가해줍니다.

handle[url]=실행할 함수;의 형식으로 각 이미지마다 실행할 함수를 만들어줍니다.

추가로 css도 적용해주겠습니다. 

...
function redRacket(response){
    fs.readFile('./img/redRacket.png',function(err,data){
        response.writeHead(200, { 'Content-Type': 'text/html' });
        response.write(data);
        response.end();
    });
}
function blueRacket(response){
    fs.readFile('./img/blueRacket.png',function(err,data){
        response.writeHead(200, { 'Content-Type': 'text/html' });
        response.write(data);
        response.end();
    });
}
function blackRacket(response){
    fs.readFile('./img/blackRacket.png',function(err,data){
        response.writeHead(200, { 'Content-Type': 'text/html' });
        response.write(data);
        response.end();
    });
}
function maincss(response){
    fs.readFile('./main.css',function(err,data){
        response.writeHead(200,{'Content-Type':'text/css'});
        response.write(data);
        response.end();
    })
}

...

handle['/main.css'] = maincss;
/* image directory */
handle['/img/redRacket.png'] = redRacket;
handle['/img/blueRacket.png']= blueRacket;
handle['/img/blackRacket.png'] = blackRacket;

exports.handle = handle;

 

실행화면 

정상적으로 css와 이미지가 잘 출력됩니다. 

 

 

html이동

이번에는 위의 이미지 위에 order list 라는 링크를 클릭하면 해당 링크에 맞는 html파일을 보여주도록 하겠습니다.

현재 위의 링크를 클릭하면 order 링크로 이동하기 때문에 해당 url에맞는 handle과 함수를 생성해줍니다.

function order(response){
    response.writeHead(200, {'Content-Type':'text/html'});
    response.write('order page');
    response.end();
}
handle['/order']=order;

 

접속해보면 잘 나옵니다.

db로 데이터 INSERT

이제 메인에서 테니스 아이템의 order를 클릭하면 해당 아이템의 데이터를 order 페이지에 전달하도록 해보겠습니다. 

 

order페이지에서 해당 데이터를 보여주기 위해서는 메인페이지에서 아이템밑의 order라는 버튼을 클릭할때 해당 데이터를 orderlist라는 테이블에 삽입하고 orderpage에서 그 해당데이터를 조회하여 보여주면됩니다.

1. 해당 아이템 order버튼클릭시 해당 아이템 정보를 orderlist 테이블에 INSERT(삽입)
2. 주문 페이지 들어갈때 orderlist테이블의 데이터 조회해서 출력

먼저 데이터를 삽입해보겠습니다. 

requesthandler에서 order페이지에 대한 handle과 함수를 만들어줍니다.

함수에서 해당 페이지를 접속할때 INSERT 할 수 있는 qeury도 작성해줍니다. 

function order(response, productId){
    response.writeHead(200, {'Content-Type':'text/html'});

    maraidb.query("INSERT INTO orderlist VALUES("+productId+",'"+new Date().toLocaleDateString()+"');", function(err,rows){
        console.log(rows);
       })
    response.write('order page');
    response.end();
}

...
handle['/order']=order;
...

 

이제 어떤 productId를 받는지를 구분해야하는데 그러기 위해서는 계속 전달 -> 전달 해줘야합니다.

router.js로 이동해 핸들러를 호출할때 productId를 보내줍니다.

 

 

그리고 server.js로 이동해 route를 호출할때 productId를 넘겨줍니다.

queryData변수도 추가로 만들어줍니다. 

 

그리고 main html파일로가서 버튼의 onClick이벤트에 아래의 속성을 입력해줍니다. 

 

첫번째 아이템을 클릭했을때입니다. 해당 url로 잘 이동하고 

터미널에서 확인해보면 데이터베이스에 값을 잘 넣었다는 결과(rows)가 잘 나오는걸 확인할 수 있습니다. 

 

 

넣은 데이터를 가지고 orderlist라는 페이지에서 데이터를 출력해보겠습니다.

현재 orderlist페이지의 모습입니다. 

html 코드입니다. table을 사용하였고 아래처럼 작성했습니다. 

 

requesthandler로 돌아와서 orderlist.html로 url이 접속할때 실행될 handle을 작성해줍니다.

그리고 그에 맞는 함수를 작성해주는데 select쿼리를 사용하고 map함수를 이용해 

해당데이터를 출력해줍니다. map이 끝난뒤 table을 닫는 태그 </table>을 사용합니다. 

...
const orderlist_view = fs.readFileSync('./orderlist.html', 'utf-8');

...

function orderlist(response)
{
    response.writeHead(200, {'Content-Type':'text/html'});
    maraidb.query("SELECT * FROM orderlist", function(err,rows){
        console.log(rows);
        response.write(orderlist_view);
        rows.map(item=>{
            response.write("<tr>"
                           +"<td>"+item.product_id+"</td>"
                           +"<td>"+item.order_date+"</td>"
                           +"</tr>");
                        });
        response.write("</table>");
        response.end();
    })
}

...
handle['/orderlist.html'] = orderlist;

 

Red Racket과 Blue Racket을 order를 해주고 list에서 확인해보겠습니다.

 

결과가 잘 출력됩니다.

데이터베이스에서도 확인해보겠습니다.