Передача и использование динамических данных

Добавление идентификатора продукта в путь

Мы добавим идентификатор в конец URL-адреса с идентификатором продукта.

представления/product-list.ejs

<a href="/products/<%= product.id %>" class="btn">Details</a>

Во-первых, мы должны назначить ID в модели.

модели/product.js

module.exports = class Product {
    constructor(title, imageUrl, description, price) {
        this.title = title;
        this.imageUrl = imageUrl;
        this.description = description;
        this.price = price;
    }
save() {
    this.id = Math.random().toString();
    getProductsFromFile(products => {
        products.push(this);
        fs.writeFile(p, JSON.stringify(products), err => { 
            console.log(err);
        });
    });
}

Извлечение динамических параметров

Извлеките все данные, которые нам нужны для продукта, из контроллера.

routes/shop.js

router.get('/products/:productId');

Двоеточие перед productId указывает, что productId является переменной.

✔️ Заметки

  • Если вы хотите установить более конкретные маршрутизаторы, порядок имеет значение! Он должен стоять перед динамическими параметрами, потому что в случае
router.get('/products/delete');

он будет считать удаление значением параметра productId. Итак, сначала следует обработать его, а затем перейти к динамическим параметрам.

Затем мы можем получить доступ к productId, используя приведенный ниже синтаксис:

контроллеры/shop.js

exports.getProduct = (req, res, next) => {
    const prodId = req.params.productId;
    Product.findById(prodId, product => {
        res.render('shop/product-detail', {
            product: product,
            pageTitle: product.title,
            path: '/products'
        });
    });
}

views/shop/product-detail.ejs

<%- include('../includes/head.ejs') %>
    </head>
    <body>
        <%- include('../includes/navigation.ejs') %>
        <main class="centered">
            <h1><%= product.title %></h1>
            <hr>
            <div>
                <img src="<%= product.imageUrl %>" alt="<%= product.title %>">
            </div>
            <h2><%= product.price %></h2>
            <p><%= product.description %></p>
            <form action="/cart" method="POST">
                <button class="btn" type="submit">Add to Cart</button>
            </form>
       </main>
<%- include('../includes/end.ejs') %>

Передача данных с помощью POST-запроса

Мы можем поместить данные либо в параметры URL, либо в тело запроса, но мы будем использовать тело запроса.

includes/add-to-cart.ejs

<form action="/cart" method="POST">
    <button class="btn" type="submit">Add to Cart</button>
    <input type="hidden" name="productId" value="<%= product.id %>">
</form>

Затем мы можем повторно использовать приведенный выше код для любого места, которое мы хотим включить. Переменный продукт в файле include/add-to-cart не может получить доступ к продукту в другом файле, поэтому мы передаем продукт в качестве параметра.

views/shop/product-detail.ejs, product-list.ejs, index.ejs

<%- include('../includes/add-to-cart.ejs', {product: product}) %>