如何使用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

你要做的基本事情是：

• 定義您的后端應用程序必須使用spa響應的路由
• 將“skeleton”文件發送到該路由上的響應

示例代碼：

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

這應該讓你開始