ExpressでMongooseを使う part2
簡単な農産物の商品管理アプリ作成の続きになります。
農産物の商品が一覧できるような画面を作成していきます。
index.jsにルーティングの追加をしていきます。(_のところ)
const express = require('express');
const app = express();
const path = require('path');
const mongoose = require('mongoose');
const Product = require('./models/product');
{ useNewUrlParser: true, useUnifiedTopology: true })
app.set('view engine', 'ejs');
//商品一覧のルーティング作成
app.get('/products', async (req, res) => {
const products = await Product.find({})
//使用するテンプレートの指定
res.render('products/index', { products });
})
app.listen(3000, () => {
console.log('ポート3000で待機');
})
Productモデルから find({ }) を用いて、全商品を取得するようにします。
そして非同期処理にもなるので、「asnyc/await」もセットで記述しておきます。
(thenよりもコードが綺麗に書けるので)
また、render の第二引数でオブジェクトで「products」という変数を渡すことでテン
プレートでその変数が使えるようになります。
ルーティングの追加ができたので、テンプレート(ejsファイル)を作成していきます。
・index.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品一覧</title>
</head>
<body>
<h1><%= category %>商品一覧</h1>
<ul>
<% for(let product of products) { %>
<li>
<a href="/products/<%= product._id %>">
<%= product.name %>
</a>
</li>
<% } %>
</ul>
</body>
</html>
上記のように記述できれば、
この通り、登録した全商品の一覧が取得できるようになります。
*1:) => {
console.log('MongoDBコネクションOK!!');
})
.catch(err => {
console.log('MongoDBコネクションエラー!!!');
console.log(err);
});
app.set('views', path.join(__dirname, 'views'