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

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

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

来源

2016-08-17 Andy Pohl

你可以添加角部分吗？ –

对不起，如果我不清楚我的解释，但我实际上不使用角度，并试图建立这个应用程序，而不使用任何额外的框架，如Angular –

你需要实现这个至少使用JavaScript的AJAX应用程序使用JavaScript如果你不想使用angular或者jQuery或者React.AJAX就是单页面的应用 –

你必须做的基本的东西是一个页面：

定义其后端的应用程序有回应路线与温泉
发送您的“骨架”文件，在该路线的响应

示例代码：

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

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

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

这应该让你开始

来源

2016-08-17 06:36:02 Lazyexpert

谢谢，我会试试看看它是否可行。一旦我给它一个镜头，我会更新。欢呼 –

我试图实现这一点，我不断收到'处理程序'错误“意外的标识符”。我知道你使用的代码是ES6语法，如果我有类似非ES6 JS混合的东西，它应该没有什么区别，对吧？ –

您可能应该将“使用严格”行添加到文件的顶部或启动应用程序，并使用命令“node --use_stritct myapp.js” – Lazyexpert

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

回答

相关问题