Создать маршрут из пункта списка - PullRequest
Новая
       5

Создать маршрут из пункта списка

0 голосов
/ 15 февраля 2020

Я создаю список фруктов и хочу, чтобы можно было щелкнуть фрукт в списке и открыть новый маршрут с описанием фруктов. Я не уверен, как настроить маршрут к этому файлу 'productDescription.e js'.

app. js: 

const express = require('express'),
    mongoose = require('mongoose'),
    logger = require('morgan'),
    bodyParser = require('body-parser');

let app = express();

app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(bodyParser.urlencoded({ extended: true}));

var products = [
    {
        name: 'Apple',
        description: 'Apple, (Malus domestica), fruit of the domesticated tree Malus domestica (family Rosaceae), one of the most widely cultivated tree fruits. The apple is a pome (fleshy) fruit, in which the ripened ovary and surrounding tissue both become fleshy and edible.'
    },
    {
        name: 'Apricots',
        description: 'An apricot is a fruit, or the tree that bears the fruit, of several species in the genus Prunus (stone fruits).'
    },
    {
        name: 'Avocado',
        description: 'Avocado, Persea americana, is an evergreen tree in the family Lauraceae which grown for its nutritious fruit.'
    },
    {
        name: 'Banana',
        description: 'A banana is a curved, yellow fruit with a thick skin and soft sweet flesh.'
    }
]

///////////ROUTES
//Home Page with list of products
app.get('/', function (req, res) {
    res.render('productList', {products:products});
});

//Page with the item description
app.get('/:products', function (req, res) {
    //THIS IS WHERE I NEED HELP
});

//LocalHost:3000 Port
app.listen(3000);

productList.e js: 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Fruits</title>
</head>
<body>
  <ul class="list-group list-group-flush">
    <% products.forEach((prod) => { %>
      <li class="list-group-item"><a href=<%= products.name%>> <%= prod.name %> </a></li>
    <% }) %>
  </ul>
</body>
</html>

productDescription.e js (что я хочу показать при нажатии на элемент): 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <title>Fruits</title>
</head>
<body>
    <h1><%= products.name %></h1>
    <p><%= products.description %></p>
</body>
</html>

Как выглядит первая страница с элементами списка: введите описание изображения здесь

1 Ответ

0 голосов
/ 15 февраля 2020

Вы можете поместить это в свой код, и он должен работать 

const productsParam = req.params.products;

const product = products.find(pro => pro.name === productsParam)

res.render('productDescription', {products:product});

Еще один способ сделать это, и более стандартным является использование индекса массива в качестве идентификатора. и используйте его, чтобы получить значение из массива

Примечание: чтобы сделать его более обычным, вы можете удалить s из продуктов второго маршрутизатора (изменить все вхождения). сделайте это продуктом вместо этого.

...