Javascript 如何使用两种不同的路径渲染把手文件？

我正在从一个新闻网站上抓取文章。我已经成功地抓取了文章，数据也成功地到达了前端。（It控制台。日志正确）。我的问题是，我无法使用按钮将数据呈现到页面上-数据仅在我刷新时填充页面

我知道这个问题与Handlebar有关，因为如果我尝试使用jQuery呈现页面，它就会工作

我相信这和我的路线有关。我通过/articles路由将数据发送到页面，但正如您所看到的，我没有专门使用res.render或res.redirect。我想这就是它不起作用的原因？然而，我不知道如何修复它。我在路线和回拨上有点动摇。我是新的编码，但我向你保证，我已经研究和尝试了许多修复，但都没有用。任何帮助或指导都将不胜感激。多谢各位

app.get("/", function(req, res) {
  db.Article
  .find({})
  .then(function(dbArticle) {
  // res.render("index");
  res.render("index", { articles : dbArticle });
});
});

app.get("/scrape", function(req, res) {
  axios.get("https://www.nytimes.com/section/technology?
  action=click&pgtype=Homepage&region=TopBar&module=HPMini
Nav&contentCollection=Tech&WT.nav=page")
  .then(function(response) {

  var $ = cheerio.load(response.data);

  $("a.story-link").each(function(i, element) {
    var results = {};
    results.link = $(this).attr("href");
    // console.log("This is my link " + results.link)
    results.blurb = $(this).children().find(".summary").text();
    // console.log("This is my blurb " + results.blurb)
    results.headline = $(this).children().find(".headline").text();
    // console.log("This is my headline " + results.headline)

  db.Article
    .create(results)
    .then(function(dbArticle) {
      res.json(dbArticle);  
      // res.end();

      // console.log("YES", dbArticle);
    })
    .catch(function(err) {
    res.json(err);
  })
  })
})
})

app.get("/articles", function(req, res) {
  db.Article
    .find({})
    .then(function(dbArticle) {
      res.json(dbArticle);
      // console.log(dbArticle, "scraped")
    })
    .catch(function(err) {
      res.json(err);
    });
});`

---

在某个地方，你有一个概念上的脱节。我不确定具体在哪里，所以我将尝试介绍一些基本知识，希望在这一过程中填补相关空白

假设您的Express服务器运行在

localhost:3000

。不管它是在

localhost

上运行，如果代码运行在地球另一端的计算机上，那么一切都可以正常工作。关键是浏览器看不到你的代码，它对HTML、CSS、JavaScript等有一些固有的知识，但对你的应用程序一无所知

当您键入URL

http://localhost:3000/

在浏览器地址栏中，它发出一个HTTP

GET

请求，请求运行在

localhost:3000

的服务器上的路径

/

。请求只是“通过线路”发送的字节序列（当我说“线路”时，想想网络电缆，即使实际上没有涉及物理网络电缆）。使用浏览器的开发工具查看网络部分并跟踪此特定请求。单击它并查看请求的详细信息

浏览器完全不知道服务器中发生了什么。请记住，就浏览器而言，此服务器是“世界的一半”

当此请求到达您的服务器时，它将发送到您在

app.get注册的路由（“/”，…

。调用

res.render

将运行Handlebar模板并生成一个HTML标记字符串。然后将该字符串转换为字节，并将这些字节作为响应正文“通过线路”发送回。响应也有一些标题来描述正文中的内容，但最终只发送了大量字节序列

此响应返回到浏览器。它不知道它是如何生成的。就浏览器而言，它可以很容易地从静态文件中提供。它不在乎。它接受此HTML标记（即一大块文本）并对其进行解析以创建DOM树。这是一个合适的数据结构，重要的是要了解它的独特性（尽管密切相关）到相应的标记。关于术语的简要说明，标记中我们称之为

标记

的内容成为DOM中的

元素

节点。然后浏览器获取DOM节点树，并使用它们生成页面的图像，这实际上是在浏览器视口中显示给用户的图像

为什么我一直在说“通过线路发送字节”？不是所有的东西都是字节吗？是的，也不是。如果你有一个像数组或对象这样的数据结构，你不能只通过线路发送。它可能是用计算机内存中的字节表示的，但要作为HTTP请求/响应的一部分发送，它需要转换为nto是一种将其表示为线性字节序列的格式，一个接一个。此过程通常称为序列化。HTML标记字符串是HTML DOM节点的序列化表示，就像JSON通常用作序列化JavaScript数据结构（如对象和数组）的方法一样

因此，回到我们的

/

请求，如果您查看浏览器开发工具的网络部分，您将能够看到请求和响应。它以一种很好的格式显示请求和响应，因此您不必自己尝试读取原始字节序列。为了重申关键点，浏览器只知道HTTP响应告诉它什么，它不知道您使用了把手来创建HTML标记

当然，标记可能包含其他资源（如图像、CSS、JavaScript等）的URL。当浏览器将标记解析为DOM节点时，它会遇到这些其他URL，并在需要时为每个URL发出单独的HTTP请求。每个请求的行为方式与原始的

/再次，浏览器不知道服务器如何生成响应：它可能返回静态文件的内容，也可能动态生成整个响应

因此，现在我们来讨论更新页面以响应用户交互的主题

也许最容易理解的交互是单击链接，即像
这样的锚定标记。这只会更新浏览器地址栏中的URL，并丢弃上一页

HTML表单与之类似，但它可以执行其他各种技巧，例如
POST
请求。表单是使用
元素构建的（也许更准确地说，我应该说
表单
元素，没有
，但我认为
更容易理解，只要我们清楚标记中的标记和DOM元素之间的区别）。在本说明中，它们与锚定链接非常相似。浏览器URL将更新，并在其所在位置加载新页面。（我不在这里介绍，但有一些方法可以提交表单，以便