如何使用Express.js为单页应用程序正确设置路由？

Question

我正在尝试使用Express.js构建单页应用程序。在index.html页面上，我有一个基本表单，提交后将向API提出请求，检索数据，对其进行解析，然后将解析后的数据呈现为链接列表。现在，我可以呈现索引页面，并且可以从添加到该页面的表单中对该API进行提交调用。我感到困惑的是如何正确重定向从API调用获得的数据，然后将其呈现在同一页面上。我在有多个视图的地方使用Express构建了简单的应用程序，但是从来没有一个页面应用程序。对于这些应用程序，我知道您可以为响应调用诸如res.render（“要渲染的视图名称”，数据）之类的名称，但是在这种情况下不起作用。我试图通过该网站和Express文档找到一些解决方案，但是我没有看到没有包括使用其他框架（如Angular）的任何内容。出于这个应用程序的目的，我不需要包括任何其他框架，我有点迷茫。

我现在调用API的函数看起来像这样。当它被调用时，我被定向到仅显示json的页面

app.use(express.static(path.join(__dirname, '/public')));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.use('/', express.static(path.join(__dirname, 'public')));

app.get('/search', function(req, res) {
  var title = req.query.movieTitle;
  var url = 'http://www.omdbapi.com/?s=' + title;

  request(url, function (err, response, body) {
    var results = JSON.parse(body);
    var movieTitles = results.Search;
    console.log(movieTitles);
    res.send(movieTitles);
  });
});

Answer 1

你必须做的基本事情是：

• 定义后端应用程序必须与水疗中心响应的路线
• 将您的“骨架”文件发送到该路线上的响应

示例代码：

const handler = (req, res) => res.send(path.join(__dirname, "path/to/your/index.html"))

const routes = ["/", "/hello", "/world"]

routes.forEach( route => app.get(route, handler) )

这应该可以帮助你开始