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

我正在尝试使用Express.js构建一个单页面应用程序。在我的index.html页面上,我有一个基本的表单,在提交时,它将向API发出请求,检索数据,解析它,然后我希望将解析的数据呈现为链接列表。现在,我可以呈现索引页,并且可以从添加到页面的表单对API进行提交调用。我困惑的是如何正确地重定向从API调用获得的数据,然后将其呈现在同一页面上。我以前用Express构建过简单的应用程序,有多个视图,但从来没有一个单一的页面应用程序。对于这些应用程序,我知道对于响应,你可以调用类似res.render(‘要呈现的视图的名称’,data)之类的东西,但在这种情况下不起作用。我试着通过这个网站和Express文档找到一些解决方案,但我没有看到任何不包括使用另一个像Angel这样的框架的解决方案。对于这个应用程序的目的,我不需要包括任何额外的框架,我有点迷茫。

我调用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);
  });
});

解决方案

您必须做的基本事情是:

  • 定义您的后端应用程序必须使用SPA响应的路线
  • 将您的"框架"文件发送到该路由上的响应

示例代码:

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) )

这应该是您的入门指南

相关文章