如何使用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正確設置單頁應用程序的路線？

回答

相關問題