[NODE 강의] 데이터베이스 조회 및 상세페이지

[클립명]

1. DB조회

2. 상세페이지 작성

3. ES6

 

DB조회

저번 시간까지는 sequelize를 이용하여 데이터베이스에 데이터를 insert 하는 것까지 알아보았다. 이번에는 입력한 데이터를 조회하는 방법에 대해 알아보자.

일단 seuelize에서는 DB를 조회하는 함수 중에서 데이터를 모두 조회하는 findAll을 연습해보자.

 

root/controllers/admin/index.js  (/admin~~   url로 들어오는 요청에 대한 route 설정)

const { Router } = require('express');
const router = Router();
const ctrl = require('./admin.ctrl');

//입력한 데이터를 조회  (ex)http://localhost:3000/admin/products
router.get('/products', ctrl.get_products );

router.get('/products/write', ctrl.get_products_write );

router.post('/products/write', ctrl.post_products_write );

module.exports = router;

root/controllers/admin/admin.ctrl.js (/admin~~ url로 들어오는 요청에 대한 실제 실행되는 함수 정의)

const models = require('../../models');

exports.get_products_write = ( _ , res) => {
    res.render( 'admin/write.html');
}

exports.post_products_write = ( req , res ) => {
    models.Products.create(req.body)
    .then(() =>{
        res.redirect('/admin/products');
    });
}

//데이터 조회
exports.get_products = ( _ , res) => { 
    models.Products.findAll({

    }).then(( products ) => {
        //키/밸류 값이 동일한 경우 key : value 대신 그냥 key 값만 써도 된다.
        //res.render('admin/products.html', { products : products});
        //admin/product.html 템플릿페이지로 products 라는 이름으로 데이터를 조회한 products 객체를 전달
        res.render('admin/products.html', {products});
    })
}

models.Products.findAll() 을 통하여, PRODUCTS 테이블에 저장된 모든 데이터를 조회한다. 특정 칼럼만 조회하고 싶을 때는 아래와 같이 findAll의 매개변수 객체에 attributes 속성을 이용하여 조회할 수 있다.

findAll 자세히 보기

 models.Products.findAll({
    //name, createdAt 칼럼만 조회한다.
 	attributes: ['name', 'createdAt']
 )}.then(.......

 

조회한 값을 출력하는 템플릿 페이지

{% set title = "관리자 리스트" %}
{% extends "layout/base.html" %}
 
{% block content -%}
    <table class="table table-bordered table-hover">
        <tr>
            <th>제목</th>
            <th>작성일</th>
            <th>삭제</th>
        </tr>
        {% for product in products %}
        <tr>
            <td>{{ product.name }}</td>
            <td>
                {{ product.createdAt }}}
            </td>
            <td>
                <a href="#" class="btn btn-danger">삭제</a>
            </td>
        </tr>
        {% endfor %}
    </table>

    <a href="/admin/products/write" class="btn btn-default">작성하기</a>

{% endblock %}

nunjucks의 문법을 이용하여 전달받은 products 객체를 반복문을 돌려서 각 값을 출력하면 된다.

{% for product in products %}    ===> 반복문 실행

{% endfor %}  ===> 반복문 종료

데이터베이스에 저장된 값을 조회하여 화면에 출력한 모습

 

상세페이지

제품 목록 페이지에서 제품명 클릭시 제품의 상세페이지로 이동시켜보자. 여기서는 sequelize의 findByPk 함수가 사용된다.

 

1. 제품명 클릭시 링크 걸기

제품 목록 페이지에서 제품명에 a태그를 이용하여 링크를 건다.

<td>
    <a href="/admin/products/detail/{{product.id}}">
     {{ product.name }}
     </a>
</td>

2. 제품명 클릭시 이동할 router 설정

get방식으로 이동할 router를 설정한다. 파라미터명은 ':id'로 설정

//제품명 클릭시 이동할 router 설정
router.get('/products/detail/:id', ctrl.get_products_detail);

3. 해당 router로 요청이 들어오면 실제로 처리되는 로직

id 라는 파라미터명으로 넘어온 값을 이용하여 데이터베이스에서 데이터를 조회한 후, 제품 상세페이지 템플릿으로 데이터를 전달한다.

exports.get_products_detail = (req,res) => {
    //데이터 1건 조회하기
    models.Products.findByPk(req.params.id).then( (product) =>{
        //admin/detail.html 템플릿으로 데이터 전달
        res.render('admin/detail.html', {product});
    });
}

4. 제품 상세페이지에 데이터를 출력한다.

{% set title = "관리자 : 상세페이지" %}
{% extends "layout/base.html" %}
 
{% block content -%}
    <div class="panel panel-default">
        <div class="panel-heading">
            {{ product.name }}
        </div>
        <div class="panel-body">
            <div style="padding-bottom: 10px">
                작성일 : {{  product.createdAt }}
            </div>

            {{ product.description }}

        </div>
    </div>

    <a href="/admin/products" class="btn btn-default">목록으로</a>
    <a href="/admin/products/edit/{{ product.id }}" class="btn btn-primary">수정</a>



{% endblock %}