ExpressでMongooseを使う part3 - 駆け出しのエンジニア日記

農産物の商品管理アプリ作成の続きになります。

今回は、商品の詳細ページを表示できるようにしていきます。

商品一覧からクリックし、細かい内容を確認できるページに遷移する流れです。

早速index.jsにルーティングの追加をしていきましょう。（_の部分）

・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.get('/products/:id', async (req, res) => {
 //id取得
 const { id } = req.params;
 const product = await Product.findById(id);
 res.render('products/show', { product });
})
app.listen(3000, () => {
 console.log('ポート3000で待機');
})

商品一覧のルーティングに似ています。

ただ、今回は「商品名」ではなく「商品に紐づいているID」を取得するようにします。

ルーティングの追加が完了したので、新規でテンプレートを作成します。

・show.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><%= product.name %> </title>
</head>
<body>
 <h1><%= product.name %> </h1>
 <ul>
 <li>価格 : <%= product.price %>円</li>
 <li>カテゴリー : <a href="/products?category=<%= product.category %>">
 <%= product.category %>
 </a>
 </li>
 </ul>
 <a href="/products">商品一覧へ</a>
 <a href="/products/<%= product._id %>/edit">編集</a>
 <form action="/products/<%= product._id %>?_method=DELETE" method="POST">
 <button>削除</button>
 </form>
</body>
</html>