[HTML5Project] MongoDB에서 데이터 가져와서 template 뷰와 바인딩
*알립니다. 아래의 소스는 가상의 테스트 데이터를 활용했습니다.
작성자 본인의 기록용입니다.
[필요 확장 모듈 다운로드 및 적용]
1. 프로젝트의 package.json파일내의 dependencies내에 하단의 패키지를 추가하고 저장
"mongodb": "~2.2.12",
"clog": "~0.1.6"
1-1. package.json 우클릭하여 Ran As - npm install로 설치하여 ejs-locals 설치되는지 확인
2. js폴더 내에 lib폴더를 만들고 jquery-1.11.0.min.js와 jquery.tmpl.min.js 추가
2-1. views폴더 내의 layout폴더 내에 있는 head.ejs파일에 아래의 script 추가
<script src="js/lib/jquery-1.11.0.min.js"></script>
<script src="js/lib/jquery.tmpl.min.js"></script>
[model 생성]
프로젝트내에 model 폴더를 생성하고 DB로 부터 데이터를 읽어오는 js파일('galleryDao.js') 생성하여 아래 코드 작성
var MongoClient = require('mongodb').MongoClient;
var ObjectId = require('mongodb').ObjectID;
var util = require('util');
var path = require('path');
var clog = require('clog');
var fs = require('fs');
//DB 접속
MongoClient.connect('mongodb://localhost:27017/gallery', function(err, galleryDB) {
if(err) {
clog.error(err);
}else{
clog.info('gallery DB 접속.');
db = galleryDB;
db.collection('card', function(err, card){
db.card = card;
});
}
});
// 쿠폰 목록조회 외부로 속성 추가하여 다른 모듈에서 사용
exports.cardList = function(options){
// 검색 조건
var query = {};
var now = new Date();
// 정렬 옵션
var orderBy = {};
// . 등록일 내림차순(최근 카드)
orderBy['regDate'] = -1;
// 출력할 속성 목록
var resultAttr = {};
// 전체 카드 목록을 조회한다.
db.card.find(query,resultAttr).sort(orderBy).toArray(function(err,result){
//clog.debug(result);
options.callback(err,result);
});
};
[index.js]
1. module.exports = router; 위에 아래의 범용 request 추가
//DB 처리가 필요한 모든 요청에 사용
router.all('/request', function(req, res, next) {
var params = {};
if(req.method=='GET'){
params = req.query;
}else if(req.method=='POST'){
params = req.body;
}
var cmd = params.cmd;
delete params.cmd;
//콜백 함수등 부가정보를 DAO에 그대로 넘겨주기위함
var options = {
req: req,
res: res,
params: params,
callback: function(err,result){
if(err){
clog.error(err);
res.json({error: 500, message:"작업 실패."});
}else{
//clog.info(result);
res.json(result);
}
}
};
//cmd에 해당하는 dao에 options을 추가해서 실행함
dao[cmd](options);
});
[template 파일 생성]
views 폴더 내에 template 폴더를 만들고 ejs파일(card.ejs) 만들어 아래 내용 삽입
<div class="itemcard">
<a href=${link}>
<div class=thumbimg>
{{if image.thumbnail.type=='img'}}
<img src=image/${image.thumbnail.file} alt=${image.thumbnail.desc}>
{{/if}}
<video width="302" height="202" autoplay loop='true'>
<source src=image/${image.thumbnail.file} type="video/mp4">
</video>
</div>
<h2>${name}</h2>
</a>
<div class=tags>
<span>${type}</span>
</div>
<p>${desc}</p>
<a href=${relative}>관련 글</a>
<a style='float:right;'>등록일: ${regDate}</a>
</div>
[main.ejs]
<body onload=init() onresize=wrapit()>
<div id="content">
<div id=wrapper>
</div> <!--wrapper-->
<br clear=both>
</div> <!-- End of Body Container-->
</body>
[main.js]
$(function(){
//템플릿 파일을 가져온다.
$.get('template/card.html',function(cardTmpl){
//jquery.tmpl.min.js에 포함된 template
$.template('card',cardTmpl);
getCardList();
});
});
//쿠폰 상세정보를 보여준다.
function getCardList(){
var params = 'cmd=cardList';
$.ajax('/request', {
data:params,
success: function(result){
console.log(result);
/*템플릿 사용안하고 직접 넣기
* var count = $('#wrapper').children().size()-1;
for(var i=0;i<count;i++){
item.find('h2')[i].innerText = result[i].name;
}*/
//템플릿 사용
var detail = $.tmpl('card', result);
$('#wrapper').empty().append(detail);
}
});
}
'Development > WEB' 카테고리의 다른 글
| CSS 기초 (0) | 2017.09.13 |
|---|---|
| HTML5 기초 (0) | 2017.09.07 |
| MongoDB 테스트 데이터 생성 스크립트 (0) | 2017.03.06 |
| ejs-locals 모듈로 head, header, layout, footer 구성하기 (0) | 2017.02.20 |
| mongodb client로 연결, db데이터 (0) | 2017.02.14 |