express로 간단한 CRUD 구현

리진아·2023년 7월 2일
0

js 공부하기

목록 보기
10/10
post-thumbnail

express와 mysql을 연동하여 데이터 가공처리를 해볼 것임.


첫 번째 방법은 4가지 메서드를 다 사용하여 데이터 가공처리하기
두 번째 방법은 get메서드를 이용하여 url에서 가공처리하기
마지막 방법은 sp를 이용하여 가공처리하기


먼저 database에 테이블을 만들어 줄 것이다.

create table book (
	id int auto_increment primary key, 
	name varchar(50), 
	author varchar(50) 
);

테이블을 생성하고

insert into book (id,name, author) values (1 ,'1', '1');

임시 데이터를 넣어주었다.


book.js에서 작업할 것이다.
기존에 있던 database연동 및 기초 세팅 코드

const { error } = require('console');
const express = require('express');

const app = express();
//기본 포트번호 설정
const port = 1000;

//미들웨어
app.use(express.json());
app.use(express.urlencoded({extends: true}));

const getConn = async () => {
    return await pool.getConnection(async(conn) => conn) ;
}

//데이터베이스 연동
const mysql = require('mysql2/promise');
const pool = mysql.createPool({
    host : 'localhost',
    port : '3306',
    user : 'root',
    password : 'abcd1234',
    database : 'userdb'
});

//http://localhost:1000/ 접속
app.listen(port, ()=>{
    console.log("페이지 구동 시작");
});

const view = "<a href='/list'> 책 목록 보기 </a>";
const dele = "<a href='/delete'> 삭제하기 </a>"; 
const crea = "<a href='/create'> 생성하기 </a>";
const upda = "<a href='/update'> 수정하기 </a>";
const main = "<a href='/'> 메인화면으로 돌아가기 </a>";

// '/' 요청
app.get('/',(req, res) => {
    // 응답
    console.log("메인 페이지 입장");
    res.send(view + dele+ crea+ upda);
});

터미널에서 시작하면 위처럼 콘솔창에 문자열이 출력됨

'/'url에 접속하면 위처럼 응답 결과가 출력 됨.




1️⃣ http 메서드를 이용하여 작업하기

//조회 메서드
app.get('/list', async(req, res) => {
    const conn = await getConn();
    const query = 'select * from book;';
    let [rows] = await conn.query(query, []);
    const rowsString = JSON.stringify(rows);
    res.send(rowsString + '<br />' + main);
});

//생성 메서드
app.post('/create', async(req, res) => {
    const conn = await getConn();
    const query = 'insert into book (name, author) values (?, ?);';
    const {name, author} = req.body;
    const value = [name, author];
    try {
        await conn.query(query, value); 
        res.send("입력 성공" + view);
      } catch (error) {
        console.error(error);
        res.status(500).json("입력 실패");
      } finally {
        conn.release(); 
      }
});

//삭제 메서드
app.delete('/delete', async(req, res) => {
    const conn = await getConn();
    const query = 'delete from book where id = ? ; ';
    const {id} = req.body;
    try{
        await conn.query(query, [id]);
        res.send("삭제 성공" + view);
    }catch (error) {
        console.error(error);
        res.status(500).json("입력 실패");
      } finally {
        conn.release(); 
      }
});

//수정 메서드
app.put('/update', async(req, res) => {
    const conn = await getConn();
    const query = 'update book set name = ?, author = ? where id= ? ;';
    const {id, name, author} = req.body;
    const value = [name, author, id];
    try {
        await conn.query(query, value); 
        res.send("수정 성공" + view);
      } catch (error) {
        console.error(error);
        res.status(500).json("입력 실패");
      } finally {
        conn.release(); 
      }
});




✔︎ 책 목록보기 화면



✔︎ 생성 메서드에서 postman으로 테스트

다시 목록 페이지에서 name, author가 test인 필드 생성 확인





✔︎ 수정 메서드에서 postman으로 테스트

목록 페이지에서 test가 임시데이터로 변경된 것을 확인





✔︎ 삭제 메서드에서 삭제

목록 페이지에서 데이터가 삭제된 것을 확인






2️⃣ get 메서드만 사용하여 url에서 작업하기

// 조회 메서드 (http의 get메서드와 같다.)
app.get('/list', async(req, res) => {
    const conn = await getConn();
    const query = 'select * from book;';
    let [rows] = await conn.query(query, []);
    const rowsString = JSON.stringify(rows);
    res.send(rowsString + '<br />' + main);
});

app.get('/create', (req, res) => {
    res.send("url에 생성할 책 이름과 작가를 입력해주세요" );
});

//생성 메서드
app.get('/create/:name/:author', async (req, res) => {
    const conn = await getConn();
    const query = 'insert into book (name, author ) values (?, ?);';
    const name = req.params.name;
    const author = req.params.author;
    const value = [name, author];
    try{
        await conn.query(query, value);
        res.send("입력 성공" + '<br />' + view);
    }catch{
        console.error(error);
        res.status(500).json("입력 실패");
    }finally{
        conn.release();
    }
});

app.get('/delete', (req,res) => {
    res.send("삭제할 책 id를 url에 입력해주세요");
})

//삭제 메서드
app.get('/delete/:id', async(req,res) => {
    const conn = await getConn();
    const query = 'delete from book where id= ? ; ';
    const id = req.params.id;
    try{
        await conn.query(query, id);
        res.send("삭제 성공" + '<br />' + view);
    }catch{
        console.error(error);
        res.status(500).json("삭제 실패");
    }finally{
        conn.release();
    }
})

app.get('/update', (req, res) => {
    res.send("수정할 id와 name, author을 url에 차례대로 기입해주세요");
})

//수정 메서드
app.get('/update/:id/:name/:author', async (req, res) => {
    const id = req.params.id;
    const name = req.params.name;
    const author = req.params.author;
    const conn = await getConn();
    const query = 'update book set name = ?, author = ? where id= ? ;';
    const value = [name, author, id];
    try{
        await conn.query(query,value);
        res.send("수정 성공" + '<br />' + view)
    }catch{
        console.error(error);
        res.status(500).json("수정실패");
    }finally{
        conn.release();
    }
})



✔︎ 책 목록보기 화면



✔︎ 삭제하기 화면

삭제 후 목록화면 (id가 8인 필드가 삭제)





✔︎ 생성하기 화면

생성한 후 목록화면 (name, author이 test인 필드 생성)





✔︎ 수정하기 화면

name, author이 test에서 임시데이터로 수정된 후 목록화면




3️⃣ SP를 이용하여 작업하기

sp를 호출하여 데이터 가공처리하기

먼저 Mysql에서 프로시저를 생성해야 함.

DELIMITER //

CREATE PROCEDURE `process`(IN qureyname VARCHAR(50), IN uid int ,IN name VARCHAR(50), IN author VARCHAR(50))
BEGIN
  IF qureyname = 'select' THEN
    IF uid IS NULL OR name IS NULL OR author is null THEN
		select * from book;
    END IF;
    
  ELSEIF qureyname = 'insert' THEN
    IF uid IS NULL AND name IS NOT NULL AND author is not null THEN
		insert into book (name, author) values (name, author);
    END IF;
    
  elseif qureyname = 'delete' then
	if uid is not null and name is null and author is null then
		delete from book where id = uid ;
    end if;
    
  elseif qureyname = 'update' then
	if uid is not null and name is not null and author is not null then
		update book set name = name, author = author where id = uid ;
   END IF;
  END IF;
END //

DELIMITER ;

Call process( , , ,) 으로 프로시저 호출

select

insert

update

delete



//조회 메서드
app.get('/list', async(req, res) => {
    const conn = await getConn();
    const query = 'call process("select", null,null,null); ';
    let [rows] = await conn.query(query, []);
    const rowsString = JSON.stringify(rows);
    res.send(rowsString + '<br />' + main);
});

//생성 메서드
app.post('/create', async(req, res) => {
    const conn = await getConn();
    const query = 'call process("insert", null, ?, ?); ';
    const {name, author} = req.body;
    const value = [name, author];
    try {
        await conn.query(query, value); 
        res.send("입력 성공" + view);
      } catch (error) {
        console.error(error);
        res.status(500).json("입력 실패");
      } finally {
        conn.release(); 
      }
});

//삭제 메서드
app.delete('/delete', async(req, res) => {
    const conn = await getConn();
    const query = 'call process("delete", ?, null, null); ';
    const {id} = req.body;
    try{
        await conn.query(query, [id]);
        res.send("삭제 성공" + view);
    }catch (error) {
        console.error(error);
        res.status(500).json("입력 실패");
      } finally {
        conn.release(); 
      }
});

//수정 메서드
app.put('/update', async(req, res) => {
    const conn = await getConn();
    const query = 'call process("update", ?, ?, ?);';
    const {id, name, author} = req.body;
    const value = [id, name, author];
    try {
        await conn.query(query, value); 
        res.send("수정 성공" + view);
      } catch (error) {
        console.error(error);
        res.status(500).json("입력 실패");
      } finally {
        conn.release(); 
      }
});



✔︎ 책 목록보기 화면



✔︎ 생성하기




✔︎ 수정하기




✔︎ 삭제하기


profile
안녕?

0개의 댓글