NODE.JS:게시판만들기(생성:create, 수정:Modify, 삭제:delete)

1. mysql 접속먼저 연결하기

// mysql 모듈 사용
const mysql = require('mysql');
// 연결할 DB 정보입력
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'admin123',
  database: 'practice',
  port: '3306',
});
// 데이터베이스 연결
connection.connect();

connection.query('SELECT * FROM practiceTable',(error,results, fields)=>{
    if(error) throw error;
    console.log(results);
});

connection.end();

이 코드를 실행하면 데이터베이스에 있는 테이블 조회가 밑에처럼 콘솔창에 뜸

 

 

 

2.조회모듈을 이용해 조회내용을 html 화면에 띄우기

* ejs모듈이란

-웹페이지를 동적으로 처리하는 템플릿 엔진 모듈로써, 특정형식의 문자열을 html형식으로 변환해준다.

-ejs를 연동해서 서버에서 넘어온 데이터를 사용할 수 있다.

- <% %>형태의 태그를 이용해서 html 중간중간 필요한 로직 및 데이터를 추가할 수 있으며, for,if문을 통해 서버 데이터를 바로 html로 만들 수 있다는 게 가장 큰 장점

 

 

 

1.데이터 생성하기(CTEATE)

 

\

현재 node.js로 mysql 연동시켜서 데이터베이스 자료들을 html화면에 띄우게 하고 있는데

예제로 들고온 코드들을 복붙해서 vscode에다 가져다 쓰는데 예상과 다른 결과가 나오는 겁니다.

​

​

​

이렇게 이쁘게 떠야되는 html파일이...

​

​

​

이렇게 와장창 깨져버림

우리의 갓벽신 챗gpt4.0님의 답변또한 코드에 문제가 없다고 하는데..도대체 문제가 뭘까하고, 제가 직접 하나하나 다시 코드를 작성해보았습니다.

왠걸..? 복붙했을때랑 다르게, 틀린거하나없이 썼는데 결과가 다르지 않습니까?! 왤까하고 많은시도끝에 알아낸게

​

띄어쓰기하면 공백이 아니라 "문자열"로 인식해버려서

내가 윈도우창에 있던 코드들 복붙해서 맥에다가 붙이니까 문자열로 인식해 태그들이 인식을 제대로 못했던거에요.

(그래서 데이터베이스 할때 양옆 공백 없애줄라고 trim();하는거래요 아하)

태그사이들에 있던 공백들 지웠다가 다시 일일히 띄어주기까 이쁘게 html이 뜨네요

​

이런 허무한 오류로 다시는 오후시간 다써가면서 씨름안하게 됐으면 좋겠네요.

​

스트레스로 대머리 될거같은 47기 하리보였습니다.

(그래도 오류원인 찾아서 너무 행복합니다! 발뻗고 잘수있을거같아요)

 

 

2.데이터 수정하기(MODIFY)

const mysql = require('mysql');
const express = require('express');
const fs = require('fs');
const ejs = require('ejs');
const bodyParser = require('body=parser');

const connection = mysql.createConnection({
    host:'localhost',
    user:'root',
    password:'admin123',
    database:'book_table1',
    port:'3306'
});

const app = express();
app.use(bodyParser.urlencoded({
    extended:false,
}));

app.listen(5504, ()=>{
    console.log('server is running. http://127.0.0.1:5504');
    connection.connect();
});

app.get('/',(request,response)=>{
    fs.readFile('bookList.html'), 'utf-8',(error,data)=>{
        connection.query('SELECT * FROM BOOKS', (error,results, fields)=>{
            if(error) throw error;
                response.send(ejs.render(data,{
                    data:results
                }));
        });
    };
});

//데이터 추가
app.get('/create', (request,response)=>{
    fs.readFile('insertNewBook.html','utf-8',(error,data)=>{
        if(error) throw error;
        response.send(data);
    });
});

app.post('/create',(request, response)=>{
    const body=request.body;
    connection.query('INSERT INTO practiceTable (genre, name write, releasedata) VALUES(?,?,?,?)', [body.genre, body.name, body.writer, body.releasedate],()=>{
        response.redirect('/');
    });
});

//데이터 수정
app.get('/modify:id',(request,response)=>{
    fs.readFile('modify.html','utf-8',(error, data)=>{
        connection.query('SELECT * FROM practiceTable WHERE number=?', [request.params.id],(error,results)=>{
            if(error) throw error;
            console.log(request.params.id);
            response.send(ejs.render(data,{
                data:results[0],
            }));
        });
    });
});

app.post('/modify/:id',(request, response)=>{
    const body = request.body;
    connection.query('UPDATE practiceTable set genre=?, name=?,writer = ? WHERE number = ?', [
        body.genre, body.name, body.writer, request.params.id], (error,results) => {
            if(error) throw error;
            //조회페이지로 이동
            response.redirect('/');
        });
});

결과

 

 

 

3.데이터 삭제하기(DELETE)

//데이터 삭제
app.get('/delete/:id',(request, response)=>{
    connection.query('DELETE FROM practiceTable WHERE number=?',[request.params.id], ()=>{
        response.redirect('/');
    });
});

이 부분만 추가 해주면 된다.