如何使用node.js和express通过onclick将数据从一个页面传递到另一个页面？

问题描述

app.js

const database = new Datastore('database.db');
database.loadDatabase();

app.get('/api',(request,response) => {
    database.find({},(err,data)=> {
        if(err){
            response.end();
            return;
        }
        response.json(data)
    });
});

app.post('/api',response) => {
    const data = request.body;
    database.insert(data);
    response.json(data);
});

page1.js

function TableRow() {
    let items = '1'
    let domore = '2'
    let cells = document.querySelectorAll('#recieve-info td');
    cells.forEach(cell => cell.onclick = async function () {
        let prevcell = cell.prevIoUsElementSibling;
        if (prevcell) {
            let data = {items,domore}
            let options = {
                method: 'POST',headers: {
                    'Content-Type': 'application/json'
                },body:JSON.stringify(data)
            };

            const response = await fetch('/api',options);
            const json = await response.json();
            console.log(json);
    }
    });
}

我试图通过 onclick 将数据从一个页面传递到另一个页面，就像我点击第一个“Save1”一样，我只想在第一个页面中保存数据。但是现在所有三个数据都保存了

page2.js

async function ParaG() {
  const response = await fetch('/api');
  const data = await response.json();
  console.log(data);

  for(item of data){
    const para = document.querySelector('.Second-Para');
    para.textContent += `${item.items},${item.domore}`
  }

}

我为每个按钮创建了一个弹出模式，比如当我点击第一个按钮时，我希望拥有已保存在该按钮中的数据。

对不起我的英语，我试图解释我能做到的

解决方法

嗯，我明白最终目标是将项目存储在特定列表中，然后能够从选定列表中检索项目。

在我看来，缺少一些信息，但我会尝试假设其中一些

后端

数据库

从后端来看问题的解决，可以看出实现最终目标，您需要在数据库上至少有两个实体：

列表
项目

例如包含以主键和唯一键作为 ID 的列。

并且 Item 实体应该包含一个列引用 (FK) 到 List 实体为“list_id”

因为没有关于实体的信息，我假设你的数据库有它

因此我不知道它们之间的关系，所以我假设是一个简单的一对多（一个包含各种 itens 的列表和一个列表中的一个项目）

路线

现在要将这个数据库与您的前端链接起来，您需要一些路由。

正如您所写的，只有一个名为 /api，这不是一个好习惯，但是您可以通过将参数添加到路由中作为 /api/:item_id/:list_id 来使用它，然后检索项目，然后添加 list_id进入它。

更好的方法是为每个实体设置不同的路由，例如：

/api/list

在此路由中，当您发送 POST 请求时，它应该能够创建一个新列表。如果您发送 GET 请求，它应该能够为您提供所有列表

/api/list/:list_id

在此路由中，当您发送 POST 请求时，它应该能够通过在数据库中查找 id 来显示您的特定列表，您在 url 参数中收到的 id 为 list_id

/api/item

在此路由中，当您发送 POST 请求时，它应该能够创建一个新项目。如果你发送一个 GET 请求，它应该能够给你所有的 itens

/api/item/:item_id/:list_id

在此路由中，当您发送 POST 请求时，它应该能够创建一个新的 item-list 关系，您可以通过 params 上的 id 获取 item，然后将 list_id 添加到其中。

/api/item/:list_id

在此路由中，当您发送 GET 请求时，它应该从应用程序数据库中检索所有与 params 上的列 list_id 具有相同值的项目

前端前端可以基于路由构建，每当我们需要创建列表或项目时，我们可以向路由 1 或 2 发送 POST 请求，以及，当需要接收 itens 和列表时，我们向它们发送 GET也是

现在，当我们想向列表中添加一个项目时，向 4 发送一个 POST 请求，在参数上传递项目 id 和列表 id 应该可以解决问题。

要在 2 上通过 GET 请求获取特定列表，传递 list_id 应该可以解决此问题

最后，要从特定列表中获取所有项目，请在 5 上请求 GET，传递您希望该项目应该解决的列表的 id。

为了让您的生活更轻松，并且从在 SO 上帮助过您的人那里，我建议您READ THIS，帮助您找出如何提出更好的问题

fetch fetch fetch javascript nedb