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

Posted

技术标签:

【中文标题】如何通过使用 node.js 和 express 的 onclick 将数据从一个页面传递到另一个页面?【英文标题】:How to pass data from one page to another by onclick with node.js and express? 【发布时间】:2021-04-22 07:20:57 【问题描述】:

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', (request, 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`
  


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

对不起我的英语,我试图解释我能做什么

【问题讨论】:

让我看看我是否理解,您有一个项目,您尝试将其保存在特定列表中,但它却保存在所有列表中? @EduardoFelipe 是的,它可以节省所有这些 你的 api/backend 的路由是什么?只是 /api 还是其他的? @EduardoFelipe Just /api 【参考方案1】:

我知道最终目标是将项目存储在特定列表中,然后能够从选定列表中检索项目。

在我看来,有些信息缺失,但我会尝试假设其中一些

后端

数据库

从后端寻找解决问题,我们可以看到实现 最终目标,您需要在数据库中至少有两个实体:

    列表 项目

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

并且项目实体应该包含一个列引用(FK)到列表实体作为“list_id”

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

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

路线

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

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

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

    /api/list

在这个路由中当你发送 POST 请求时,它应该能够创建一个新的列表。 如果你发送一个 GET 请求,它应该能够给你所有的列表

    /api/list/:list_id

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

    /api/项目

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

    /api/item/:item_id/:list_id

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

    /api/item/:list_id

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

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

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

要在 2 上获取特定列表的 GET 请求,传递 list_id 应该可以解决

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

为了让您的生活更轻松,并从 SO 上帮助您的人那里,我推荐您 READ THIS,帮助您了解如何提出更好的问题

【讨论】:

以上是关于如何通过使用 node.js 和 express 的 onclick 将数据从一个页面传递到另一个页面?的主要内容,如果未能解决你的问题,请参考以下文章

node.js 和 express:如何等待 udp 响应

如何在 node.js + Express 中同时支持 json 和 jsonp 响应?

如何使用 express 框架通过 node.js 获取远程客户端的本地 IP 地址?

使用 Node.js 和 Express 发布时如何访问请求正文?

如何使用 Express 和 Node.js 从表单发送参数

如何使用 node.js/express 中止请求?