Question

我有一个简单的应用程序，它要求客户端输入数据，进行计算并提供答案。服务器执行了几秒钟的计算，因此，客户端一直看到数据输入表单并尝试多次按“发送”按钮。显然，服务器处理所有这些请求。解决这个问题的更好方法是使用一些“等待”页面。但我找不到如何首先渲染“等待”页面以及计算后最终页面的方式。

不幸的是我不能在客户端使用javascripts。

app.post('/answer', function (req, res, next) 
{       
  res.render('pleaseWait.jade');
  someLongFunction();
  next(req, res);
}, function(req, res)
{
  res.render('targetPage.jade');
});

这样的代码不起作用。

如何逐个组织两个页面的渲染？

Answer 1

一个快速而肮脏的解决方案是渲染一个模板，等待计算完成，然后渲染第二个模板并推送它通过相同的响应：

#container {
  display: flex;
}

#container div {
  padding: 10px;
  background: grey;
}

第二个模板将包含一些CSS代码来隐藏＆＃34;请等待＆＃34;消息：

$(window).resize(function() {
  if ($(window).width() > 200) {
    $("#container").css({
      "flex-direction": "row",
      "width": "200px"
    });
  } else {
  $("#container").css({
      "flex-direction": "column",
      "width": "100%"
    });
  }
});

但是，我必须重新尝试这是快速而又脏的，因为每个模板都将呈现为完整的HTML页面（周围有app.post('/answer', (req, res) => { res.render('pleaseWait.jade', (err, html) => { res.write(html + '\n'); setTimeout(() => { // mimick a calculation that takes some time res.render('targetPage.jade', { result : 42 }, (err, html) => { res.end(html + '\n'); }); }, 2000); }); });），并且您基本上是在向浏览器发送单页回复，有两整页。

或者，不是直接渲染// pleaseWait.jade html head body h1.please-wait Please wait for your calculation... // targetPage.jade html head style. .please-wait { display: none } body h1 Done p The result of your calculation is #{ result }，而是可以编写一些JS代码来重定向到最终结果页面：

<html>...</html>

虽然你需要一些传播任何计算结果的方法。

如何为1 req渲染2页（表达js）

1 个答案: