从列表项创建路线答案

【问题标题】：Create route from list item从列表项创建路线
【发布时间】：2020-02-15 05:46:06
【问题描述】：

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

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

带有列表项的第一页是什么样的： enter image description here

【问题讨论】：

标签： javascript node.js express ejs

【解决方案1】：

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

const productsParam = req.params.products;

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

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

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

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

【讨论】：