[Node.js, 개인프로젝트] CRUD 기능 만들기 - GetList

GetList

app.js

const express = require('express');
const app = express();
const boardRouter = require('./routes/board');
app.use('/board', boardRouter);
module.exports = app;

app.js는 url parsing 할때 가장 먼저 접근하여

해당 route로 해당 미들웨어 Router가 있는 위치로 보내주는 코드가 있는 파일.

 

express 모듈을 가져와 app 객체를 통해 url parsing 해주는 모습이다.

Create 기능은 /board 위치로 접근했을 경우 './routes/board' 위치에 있는 boardRouter로 이동한다.

 

해당 위치에 있는 board.js 코드이다.

---

board.js

var express = require('express');
var router = express.Router();
var board_controllers = require('../controllers/board_controller');

router.post('/write',board_controllers.writeData);
router.get('/write',board_controllers.goWrite);
router.get('/', board_controllers.getlist);
router.get('/:category_name', board_controllers.getlist_cate);
module.exports = router;

express 모듈을 가져와 router 객체를 통해 controller에 등록된 미들웨어로 url parsing을 한번 더 해준다.

localhos:3000/board로 접근했을 때 db에 담긴 값들을 가져오는 기능을 수행하는 미들웨어인 getlist를 수행하게

설계 한다. - 해당 파일은 /board로 접근했을 경우 들어오는 곳이므로 router.get(' / ', board.controllers.getlist)를

수행하면 /board url 파싱 기준으로 동작한다. 

+

또 router.get('/:category_name', board_controllers.getlist_cate); 에서 '/:'는 해당  url로 접근했을 경우 따로

해당 위치의 uri를 category_name라는 이름으로 controller로 보내주는 것이다.

---

board_controller.js

var board_model = require('../models/board_model');
var express = require('express');

module.exports={
    getlist_cate:function(req,res){
        var category_name = req.params.category_name;
        board_model.getList_cate(category_name,(rows)=>{
            console.log("rows:" + JSON.stringify(rows));
            res.render('user/post_user',{title: category_name, rows:rows});
        });
    }, 

    getlist:function(req,res) {
        console.log("hihi");    
        board_model.getList((rows)=>{
            console.log("rows:" + JSON.stringify(rows));
            res.render('user/post_user',{title: 'All', rows:rows});
        });
    }
};

getlist와 getlist_cate에 대한 미들웨어이다. module.exports를 통해 한번에 모듈을 export 해주며 

getlist_cate는 board.js에서 보낸 값인 category_name을 req.params.category_name을 통해 변수로

저장시킨 후, board_model.js 파일에 있는 미들웨어 getList_cate에 인자로 보내준다.

res.render는 해당 템플릿 파일로 이동하며 넘기고 싶은 값들을 함께 이동하고 싶을 때 사용한다.

'user/post_user'은 템플릿 파일의 이름이다. 

---

board.model.js

var mysql = require('mysql');
var express = require('express');
var connection = mysql.createConnection({
    connectionLimit: 5,
    host: 'localhost',
    user: 'root',
    password:'7674',
    database: 'test'
});
 
exports.getList_cate=(category_name,callback)=>{
    connection.query("select p.post_no, c.category_name, p.post_title, u.user_nickname, p.reg_date, p.post_hit, p.post_like, p.post_dislike " 
    +"from post p, category c, users u "
    +"where u.user_no = p.user_no "
    +"and c.category_no = p.category_no "
    +"and category_name = ? and delete_yn = 'n';",category_name,
    (err,rows,fields)=>{
        if(err) throw err;
        callback(rows);
       });
    }


exports.getList = (callback) =>{
    connection.query("select p.post_no, c.category_name, p.post_title, u.user_nickname, p.reg_date, p.post_hit, p.post_like, p.post_dislike " 
    +"from post p, category c, users u "
    +"where u.user_no = p.user_no "
    +"and c.category_no = p.category_no and delete_yn = 'n'; ",
    (err,rows,fields)=>{
        if(err) throw err;
        callback(rows);
       });
    }

controller에서 model에 선언되어 있는 미들웨어에 해당하는 내용이다.

이 부분에선 디비와 직접적으로 접근하는 코드들을 구성하였다. post, user, category table을 join하고

delete_yn이 'n'인 엔티티들을 select 문으로 가져온다. 

exports.함수이름 = (사용할 인자) => {
	connection.query("쿼리문"), 
    사용할 인자,(err(에러 여부),rows(결과),fields) =>{
    에러 처리
    callback(rows); // 결과 값 보내기
    });   
}

그러면 아까 boardcontroller.js에 있는 res.render를 통해 결과값과 함께 해당 템플릿으로 이동한다.

---

post_user.jade

extends ../layout_user

block content            
    .container-fluid        
    .card.shadow.mb-4 
        .card-header.py-3 
            h6.m-0.font-weight-bold.text-primary= title

             a.btn.btn-success.btn-icon-split(href="/board/write" style ="position: relative; left: 1000px;")
                span.icon.text-white-50
                  i.fas.fa-check 
                span.text 작성하기
        .card-body 
            .table-responsive
                table.table.table-bordered#dataTable(
                    width="100%"
                    cellspacing="0"
                    style = "text-align:center"
                )
                    thead
                        tr 
                        th 번호 
                        th 분류 
                        th 제목
                        th 작성자
                        th 날짜
                        th 조회수
                        th 추천
                        th 비추천
                        
                    tbody                         
                        for row in rows 
                            tr
                            td #{row.post_no}
                            td #{row.category_name}
                            td 
                                a(href='/read/#{row.post_no}') #{row.post_title}
                            td #{row.user_nickname}
                            td #{row.reg_date}                                
                            td #{row.post_hit}
                            td #{row.post_like}
                            td #{row.post_dislike}                        
                            
                        
    nav(aria-label="...")
        ul.pagination.justify-content-center        
            li.page-item.disabled 
                a.page-link(href="#" tabindex="-1") Previous
            li.page-item
                a.page-link(href="#") 1
            li.page-item.active 
                a.page-link(href = "#") 2 
                span.sr-only (current)
            li.page-item
                a.page-link(href="#") 3
            li.page-item
                a.page-link(href="#") Next

 

jade 템플릿이다. 서버에서 넘긴 값들을 불러오기 위해선 '#{}' format을 사용한다. 

중괄호 안에 리스트가 담긴 값인 rows에서 for row in rows 구문을 이용하여 각 객체를 row라는 이름으로

뽑아내어 table의 element로 사용하는 용도로 뽑아내는 방식이다. rows가 빌 때까지 계속해서 값들을

뽑아낸다. 

---

브라우저 화면

db에 담긴 값들이 모두 가져와지는 것을 확인할 수 있다.

---

/board/sports는 sports 카테고리인 값들이 불러와지는 모습.