如何使用 express 添加更多页面并在节点中发送值？

Question

我是 node js 的新手，我正在做一个任务来练习使用 express 的 CRUD 操作。我有一个节点的 index.js 文件，我在其中创建了一个服务器，还使用 index.ejs 页面显示 table 和 Json 文件的内容。

这是 index.js 文件：

const express = require('express');
const app = express(); 

app.locals.equiposData = require ('./equipos.json'); //this is the json file i show on the ejs file

app.use('/public', express.static(path.join(__dirname, '/static'))); //this is the folder with my index.ejs file
app.set('view engine', 'ejs');
app.get('/',(req,res)=>{
    res.render('index'); //i render the index.ejs file
});
app.listen('3000');

这是我的 index.ejs 文件：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="public/styles/style.css"> <!-- se pone public en vez de static pq lo cambie en app-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="titulo card-panel cyan accent-1">
            <h1>Tabla de equipos</h1>
            <p>Cantidad de equipos actualmente: 
                <%  var contar =0; 
                    equiposData.forEach(function(item){ 
                        contar+=1
                    });
                %>
                <%= contar %>
            </p>
            <a class="waves-effect waves-light btn-small">Agregar Equipo</a>
        </div>

        <table class="striped centered responsive-table teal lighten-2">
            <thead class="teal accent-1">
              <tr>
                  <th>Nombre Equipo</th>
                  <th>País</th>
                  <th>Fecha Creación</th>
                  <th>Acciones</th>
              </tr>
            </thead>
    
            <tbody>
                <% equiposData.forEach(function(item){ %>
                    <tr>
                        <td> <%= item.name %> </td>
                        <td> <%= item.area.name %> </td>
                        <td> <%= item.founded %> </td>
                        <td> Ver, Editar, Eliminar</td>
                    </tr>
                <% }); %>
            </tbody>
          </table>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

所以基本上 table 显示的是足球队、他们来自的国家、他们创建的年份，它还应该允许我点击“Ver”（显示）、“Editar”等词"（编辑）和"eliminar"（删除）

但我已经阅读了很多关于如何创建新页面的帖子，我有一些想法...但是当我点击 link“Ver”时，我必须访问它行中的项目并将其带到另一页，并显示该特定项目的所有 json 数据。每个 json 对象都有一个 ID，所以我想我可以用它来获取项目，但我只是不知道从哪里开始。我考虑过在我的 index.js 文件中创建一个这样的新页面：

app.get('/ver',(req,res)=>{
    res.render('ver'); //i render the ver.ejs file (the new page i want to add)

});

但我不确定如何将对象的 ID 发送到其他页面，也许使用下一个函数？

Answer 1

如果我理解你的问题，你正试图通过单击“Ver”将变量传递到另一个页面 link。您可以使用名为 Route Params.
的东西因此，通过编辑您的 HTML:

            <tbody>
                <% equiposData.forEach(function(item){ %>
                    <tr>
                        <td> <%= item.name %> </td>
                        <td> <%= item.area.name %> </td>
                        <td> <%= item.founded %> </td>
                        <td> <a href="/ver/<%=item.id%>">Ver</a>, Editar, Eliminar</td>
                    </tr>
                <% }); %>
            </tbody>

在您需要更新 app.get() 方法以接收通过路由传递的参数之后：

app.get('/ver/:id', (req, res) => {
    var id = req.params.id;
    // Do whatever you need here...
    res.render('ver', {value: id} );
});

因此，在“Ver”页面中，您现在可以访问通过 render() 方法传递的 id 值。您可以传递任何其他值、对象等。出于测试目的，您可以在“版本”页面尝试：<%= value %> 看看您得到了什么。

如何使用 express 添加更多页面并在节点中发送值？

How to add more pages and send a value in node using express?

json

ejs

express