Node.js: 從 MongoDB 取得資料到套版
09 Sep 2015經歷了前面關於 Node.js 基本安裝設定、模板引擎的熟悉，與一些基本的語法和操作，接著來到 MongoDB 的建置和使用，終於要把假資料換掉，使用真實世界的內容展現在畫面上啦。
Model
定義欄位與資料型別
使用 Model 來定義個別 Collection 的欄位與資料型別。例如，一筆商品資料必定含有 ID（並非 DB 中每筆資料的真實 ID）、商品名稱（name）、商品描述（description）、價格（price）、庫存狀態（available）、圖片（images）等。
var mongoose = require('mongoose');
var productsSchema = new mongoose.Schema(
{
id: String,
name: String,
description: String,
images: [String],
price: Number,
available: Boolean,
},
{ collection: 'products' },
);
var Products = mongoose.model('Products', productsSchema);
module.exports = Products;
新增一筆假資料並存回 DB
此時 DB 是沒有任何資料的，因此準備一筆或多筆假資料存進去。完成後放在剛剛預留放假資料的地方。
var product = new Products({
id: '1',
name: '商品名稱',
description: '商品描述',
images: [
'http://dummyimage.com/600x400/000/fff',
'http://dummyimage.com/400x400/000/fff',
'http://dummyimage.com/600x600/000/fff',
],
price: 490,
available: true,
});
product.save(function(err, products) {
if (err) return console.error(err);
});
從 Controller 接 DB 的資料
使用 npm start 執行專案，看到 DB 有資料了。
既然 DB 有資料了，就取出來用吧。
取出整個 collection
取資料。
var express = require('express'),
router = express.Router(),
mongoose = require('mongoose'),
Product = require('../models/product.js'); // 記得要載入 Model
// get products from db
var productList = {};
Product.find(function(err, goods) {
if (err) {
console.error(err);
} else {
productList = goods;
}
});
// render page
router.get('/', function(req, res, next) {
res.render('index', {
products: productList, // 放到回傳給 View 的 Response 裡面，套板用
});
});
module.exports = router;
只取出特定資料
我們經由網址列的參數 id 來決定要取哪一個商品，例如：localhost:3000/product?id=1。
var express = require('express'),
router = express.Router(),
mongoose = require('mongoose');
// get single product from db
var Product = require('../models/product.js');
var productDetail = {};
router.get('/', function(req, res, next) {
Product.findOne({ id: req.param('id') }, function(error, goods) {
if (error) {
return handleError(error);
}
productDetail = goods;
res.render('product', {
product: productDetail,
});
});
});
module.exports = router;
將資料代入 View
View 在這裡使用樣板引擎 Handlebars.js。代入名稱和 Controller 中的 Response 欄位名稱相同。
取出整個 collection
.{.{#each products.}.}
<article class="product">
<div class="imageBlock">
<img class="thumbnail" src=".{.{ images.[0] }.}." alt=".{.{ name }.}." />
</div>
<h3 class="title">.{.{ name }.}.</h3>
<div class="description">.{.{ description }.}.</div>
<div class="price">.{.{ price }.}. NTD</div>
</article>
.{.{/each}.}.
備註：由於部落格會把花括號吃掉，因此在左右加一個點，例如「.{.{ }.}.」。
只取出特定資料 - 單一商品
<div class="productIntro">
<div class="imagePreview">
<img class="thumbnail" src=".{.{ product.images.[0] }.}." alt=".{.{ product.name }.}." />
</div>
<div class="previewArea">
<div class="imageList">
.{.{#each product.images}.}.
<div class="imageItem" data-mediasrc=".{.{ this }.}.">
<img class="thumbnail" src=".{.{ this }.}." alt=".{.{ ../product.name }.}." />
</div>
.{.{/each}.}.
</div>
</div>
<div class="productInfo">
<h2 class="productName">.{.{ product.name }.}.</h2>
<div class="productID">產品編號：.{.{ product._id }.}.</div>
<h3 class="productDescription">.{.{ product.description }.}.</h3>
</div>
<div class="title">會員價：NT$ .{.{ product.price }.}.</div>
</div>
Demo
頁面展示存在 DB 裡面的資料。
取出整個 collection
只取出特定資料 - 單一商品
這篇文章的原始位置在這裡-Node - 從 MongoDB 取得資料到套版
由於部落格搬遷至此，因此在這裡放了一份，以便閱讀；部份文章片段也做了些許修改，以期提供更好的內容。
