向前端 expressjs 发送数据答案

【问题标题】：Send data to frontend expressjs向前端 expressjs 发送数据
【发布时间】：2017-11-10 21:31:41
【问题描述】：

我正在使用 Nodejs、expressjs、sqlite3。

我已经设法从数据库中获取我的数据并使用 expressjs 进行路由，这都在一个名为 server.js 的 js 文件中

现在我想发送/使用我在前端提取的数据。

我尝试拥有一个全局变量并在其他 js 文件中使用该全局变量，但没有奏效。经过一番研究，我大部分时间都看到 AJAX。我需要使用 AJAX 将数据从后端发送到前端吗？

这个想法是根据用户选择的产品更新前端。我在服务器 js 中获取产品数据，我不知道如何将其发送到前端以根据数据库上的数据填写表格并更改产品名称。

另外，我应该继续看看在全局变量中保存/使用我的数据是否有效？谢谢。

【问题讨论】：

标签： javascript ajax express frontend backend

【解决方案1】：

AJAX 是一种从后端请求数据而不触发整个页面重新加载的好方法。但是，它增加了一层复杂性，听起来您并不需要。由于您使用的是 express，因此您可以访问可以为您处理此问题的开箱即用的 templating engine。

快速响应对象有一个render 方法，您可以在其中指定要使用的模板以及要发送到模板的数据。给你一些伪代码：

// server.js
app.get('someroute',(req,res,next)=>{
    //get data from DB, returns promise
    return db.getData().then((data)=>{
        return res.render('myTableTemplate',data);
    });
});

在模板文件中，您将使用 JSON 数据适当地填充表。

如果您使用的是客户端 JS 库（react、vue、angular 等），您可以跳过 res.render(...) 而直接跳过 res.json(data)

【讨论】：

我正在使用 html 作为我的视图。如何选择要与我的数据映射的元素/属性？另外，如何更改视图以显示该特定项目的详细信息？例如。单击表格中的元素时，转到不同的视图并根据该特定项目的数据修改元素/属性值（在我的情况下是产品）。
这是我所拥有的：app.render("/productDetail.html",rows, function(err, html) { console.log(rows); res.sendFile(path.join(__dirname+ '/projectDetail.html')); });假设我想将产品名称映射到 rows.productName。我该怎么做才能在主页中选择该产品时看到正确的产品名称。 //document.getElementById('pname') = rows.productName;例如
将数据映射到表的语法高度依赖于您使用的模板引擎。这应该在您的路线之前定义。像app.set('engine','ejs') 这样的东西。您不在渲染函数回调中执行 res.sendFile 。 Render 将根据数据创建 html 并发送给客户端。
@asker 如果答案对您有帮助，请将其中一个回复标记为您问题的答案。谢谢。

【解决方案2】：

您应该创建 RESTful API 来做您想做的事。这意味着您必须使用 AJAX，并且不能使用全局变量。

【讨论】：

感谢您的回答。有没有办法使用 AJAX 重定向页面？例如。单击表格中的元素时，转到不同的视图并根据该特定项目的数据修改元素/属性值（在我的情况下是产品）。
是的，假设您的网站www.yoursite.com 有一个页面/products，您可以从此页面重定向到一个页面/product/id_product，其中id_product 可能是您使用的主键在 sqlite3 产品表中。

【解决方案3】：

使用 WebSocket

WebSocket 可能是要走的路：https://socket.io/

您只需要从后端发出有效负载

【讨论】：