駆け出しのエンジニア日記

プログラミング言語勉強中の奮闘日記

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');
mongoose.connect('mongodb://localhost:27017/farmStand',
{ useNewUrlParser: true, useUnifiedTopology: true })
.then*1;
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 charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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'