Передача и использование динамических данных
Добавление идентификатора продукта в путь
Мы добавим идентификатор в конец 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}) %>