如何将nodejs后端连接到前端？答案

【问题标题】：How to connect nodejs backend to a frontend?如何将nodejs后端连接到前端？
【发布时间】：2021-09-14 23:08:39
【问题描述】：

我有问题。我用 nodeJs 创建了一个简单的 CRUD 应用程序。该应用程序使用 mysql 数据库，并且可以执行创建、插入、删除和读取操作。比如一个读操作：

app.get('/run',(req,res) => {
    conn.query('SELECT * FROM run', (err,rows,fields) =>{
        if(!err)
        res.send(rows)
        else
        console.log(err)
    })
})

如您所见，我使用了 express。我是第一次使用nodeJs，所以我很不熟练。我希望当应用程序在“/homepage”路由中加入时，会呈现 homepage.html。我已经成功地做到了。但是，当我呈现 HTML 页面时，例如，我希望在单击事件到提交按钮进入页面时，会打开一个警报。然后我想将用户重定向到另一个 HTML 页面（所以我想将用户从主页重定向到我定义的另一个路由）。

app.get('/prova', function (req, res) {
    res.sendFile(path.join(__dirname, "homepage.html"));
  });

说实话，返回的 HTML 页面是“静态的”，它似乎没有看到我在 HTML 文件中定义的点击事件。换句话说，我不明白如何将 Node JS 后端连接到 JavaScript 前端。这是我第一次使用这种语言，很多概念我都不清楚。你能帮我吗？非常感谢！

【问题讨论】：

Node.js服务器类似于其他web服务器，使用AJAX或者提交表单来运行服务器端代码。
我建议 axios 发送 Ajax

标签： javascript jquery node.js express web-applications

【解决方案1】：

您可以使用 ejs、pug、jade、handlebars 等模板引擎使您的网页动态化。为此，您需要在主 app.js（或 server.js）文件中指定要使用的模板引擎，如下所示：

// setting template engine
app.set('view engine', 'pug'); // in this case pug
app.set('views', path.join(__dirname, 'views')); // this is the folder where you keep html for rendering

// static folder
app.use(express.static(path.join(__dirname, 'public'))); // this folder will be available for client side, for e.g. css, js, images are stored

然后

app.get('/prova', function (req, res) {
  res.sendFile(path.join(__dirname, "homepage.html"));
});

改成

app.get('/prova', function (req, res) {
  res.send(data).render('main_page');
});

main_page 类似于 html 文件（在我的例子中为 main_page.pug），它将动态呈现数据。要在客户端使用数据，请查看文档pug-documentation

【讨论】：