28강_Node.js (express, ejs, mysql2, path로 게시판 만들기)

 

---

개요

 

ejs와 node.js, mysql을 사용하여 게시판 페이지를 구현하고자 한다.

index.js에서 서버와 관련된 내용들을 동작시키고, 'page' 폴더에서 ejs파일 생성하여 페이지를 구현한다.

이번 게시판 페이지 구현을 위해 설치받은 모듈은 ' express, ejs, mysql2 '이다.

 

 

---

결과물

 

💻 index.js_서버와 관련된 모든 작업을 수행한다. 

// 사용할 모듈 express ejs mysql2 path

// 모듈 가져오고
const express = require("express");
const mysql2 = require("mysql2");
const path = require("path");

// 서버 인스턴스 만들어서 app에 바인딩
const app = express();

const _mysql = mysql2.createConnection({
    user : "root",
    password : "000000",
    database : "test2",
    // 다중 쿼리문 사용할수 있는 옵션
    multipleStatements : true
})

// express의 views 속성을 설정(파일들의 경로)
// express에서 서버사이드 렌더링을 지원하기위해 view엔진을 사용한다.
// view엔진이 템플릿 파일을 보여주는 역활을 해줌
// 기본값은 views: 'C:\\Users\\TEST\\Desktop\\20230504\\views'로 경로가 지정되어있고
// views: 'C:\\Users\\TEST\\Desktop\\20230504\\page' 우리가 설정할 경로로 바꿀수 있다.
app.set("views",path.join(__dirname,"page"));

// view엔진으로 ejs를 사용할수 있게 설정
app.set("view engine", "ejs");

// express에서 bodyparser를 지원 한다.
// extended : 깊은 객체를 지원할지 안할지 권장 false
app.use(express.urlencoded({extended : false}));

app.get('/',(req,res)=>{
    // render 메서드 view엔진이 문자열을 html로 브라우저에 전달
    // 렌더링 해준다.
    // 첫번째 매개변수가 파일의 이름
    // 두번째 매개변수 전달할 데이터
    res.render("main");
})

app.get("/signup",(req,res)=>{
    res.render("signup");
})

app.get("/login", (req,res)=>{
    res.render("login");
})

app.post('/login',(req,res)=>{
    // 요청에 대한 내용은 req 객체에 들어있다.
    const {user_id, user_pw} = req.body;

    // user_id랑 user_pw를 가지고 데이터를 조회
    const sql = "SELECT * FROM users WHERE user_id = ? AND user_pw = ?"
    _mysql.query(sql,[user_id,user_pw],(err, result)=>{
        if(err){
            // 로그인 실패
            res.render("mypage");
        }else{
            // 로그인 성공
            console.log(result);
            res.render("mypage",{data : result[0]})
        }
    })
});

// 회원가입
app.post('/signup',(req,res)=>{
    const {user_id, user_pw} = req.body;
    const sql = "INSERT INTO users (user_id, user_pw)VALUES(?,?)";

    _mysql.query(sql,[user_id, user_pw],(err)=>{
        // err 에러가 있다면 에러의 내용이 들어오는 객체
        if(err){
            res.render("signUpErr");
        }else{
            // 브라우저 url을 login페이지 url로 변경
            res.redirect("login");
        }
    })
});

// 게시판의 글목록 페이지
app.get('/list', (req,res)=>{
    const sql = "SELECT * FROM products";
    _mysql.query(sql,(err, result)=>{
        res.render("list",{data : result});
    })
    // [{id : 4, name : "sdafas", number : "sadfasd", series : "sadfas"}]
})

// 게시판 등록 페이지
app.get('/insert',(req,res)=>{
    res.render("insert");
})

app.post('/insert', (req,res)=>{
    const {name, number, series} = req.body;
    const sql = "INSERT INTO products (name, number, series)VALUES(?,?,?)";
    
    _mysql.query(sql,[name,number,series],()=>{
        res.redirect("/list");
    })
})

// 삭제
app.get("/delete/:id",(req,res)=>{
    // /delete/1 == req.params = {id : 1}
    // req.params.id == 1 이값을 가지고 데이터베이스에 원하는 글 조회를 해서 보여줄수 있겠죠?

    const sql = "DELETE FROM products WHERE id = ?; SET @CNT = 0; UPDATE products SET products.id = @CNT:=@CNT+1; ALTER TABLE products AUTO_INCREMENT = 0;";

    // DELETE FROM products WHERE id = ? : 값을 제거하라는 명령어인 쿼리문
    // 테이블 products의 행에서 ? 에 값을 넣어줄거고
    // 우리가 넘겨준 id값을 가지고있는 행을 찾아서 제거시킨다.

    // SET @CNT = 0 구문으로 카운트 0으로 초기화

    // UPDATE products.id = @CNT:@CNT+1 : products 테이블의 행의 아이디를 다시 갱신 시켜줌

    // ALTER TABLE products AUTO_INCREMENT = 0; : AUTO_INCREMENT 속성을 자동으로 1씩 증가시키는 속성을 0으로 변경

    _mysql.query(sql,[req.params.id],()=>{
        res.redirect("/list");
    })
})

// 수정하는 페이지
app.get('/edit/:id', (req,res)=>{
    const sql = "SELECT * FROM products WHERE id = ?"
    const id = req.params.id;
    _mysql.query(sql,[id],(err, result)=>{
        res.render("edit",{data : result[0]})
    })
})

// 수정 요청
app.post('/edit/:id', (req,res)=>{
    const {name, number, series} = req.body;
    const sql = "UPDATE products SET name = ?, number=?, series=? WHERE id=?";
    const id = req.params.id;
    _mysql.query(sql,[name, number, series, id ],()=>{
        res.redirect("/list");
    })
})

// PORT를 지정 해야하니까
const PORT = 8080;

app.listen(PORT,()=>{
    console.log("서버 잘 열림");
})

 

 ejs 페이지들은 비슷한 형식으로 동작하기 때문에 app.post로 서버에 데이터를 보내주고, app.get으로 서버에서 데이터를 받는 코드를 한가지씩 소개하고자 한다.

 

💻 signup.ejs_form태그를 이용하여 post 요청을 보내, input으로 입력한 데이터를 서버측에 보내준다.

• input의 name 속성에 입력한 값이 서버로 넘어가며 키값이 된다.

<body>
    <h2>회원 가입</h2>
    <form action="/signup" method="post">
        <label for="">아이디</label>
        <input type="text" name="user_id">
        <label for="">비밀번호</label>
        <input type="text" name="user_pw">
        <button>회원가입 신청</button>
    </form>
</body>

 

 

💻 list.ejs_index.js에서 app.get으로 '/list'링크에 서버값을 보내줘 해당 값을 반복문으로 돌면서 그려준다.

• data 배열로 받은 값을 forEach문으로 돌리면서 각 인덱스마다 원하는 값을 뽑아 렌더해준다.

<body>
    <h2>리스트 페이지</h2>
    <a href="/insert">추가 페이지로 이동</a>
    <table>
        <tr>
            <th>삭제</th>
            <th>수정</th>
            <th>아이디</th>
            <th>이름</th>
            <th>전화번호</th>
            <th>시리즈</th>
        </tr>
        <% if(data){ %>

            <% data.forEach((el,index) => {  %>
                <tr>
                    <td><a href="/delete/<%= el.id %>">삭제</a></td>
                    <td><a href="/edit/<%= el.id %>">수정</a></td>
                    <td><%= el.id %></td>
                    <td><%= el.name %></td>
                    <td><%= el.number %></td>
                    <td><%= el.series %></td>
                </tr>
            <% }); %>

        <% }else{ %>

        <% } %>
    </table>
</body>
<!-- 데이터 베이스로 요청해서 data 객체로 전달 해주면 
    우리가 데이터베이스에 등록해놓은 지금은
    4	sdafas	sadfasd	sadfas
    6	sdfasd	wegwe	wefwe
    이렇게 데이터베이스에 값이 있다고 가정할때
    data = [{id : 4, name : sdafas, number : sadfasd, series : sadfas},
     {id : 6, name : sdfasd, number : wegwe, series : wefwe}]
-->