从列表项创建路由

Question

我创建了一个水果列表，我希望能够点击列表中的一个水果并打开一个带有水果描述的新路线。 我不确定如何设置到这个“productDescription.ejs”文件的路径。

应用程序.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.ejs：

<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.ejs（当一个项目被点击时我想显示什么）：

<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>

带有列表项的第一页是什么样子：在此处输入图像描述

Answer 1

你可以把它放在你的代码中，它应该可以工作

const productsParam = req.params.products;

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

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

另一种更标准的方法是使用数组的索引作为 id。 并使用它从数组中获取值

注意：为了使其更传统，您可以从第二个路由器产品中删除 s（更改所有出现的次数）。 使其成为产品。