expressJS路由器規划-如何設置有效的路由器

Question

我意識到這可能是一個非常簡單的問題，但請耐心等待。 我真的是節點/表達的新手。

我的目錄結構如下：

auth
    index.html
pub
    index.html
    login.html

這里的想法是pub中的資源是公開可用的，但是auth中的資源僅在對用戶進行身份驗證之后才可用。

但是，在這一點上，我只是想讓這些頁面從服務器正確返回。 理想情況下，我的路由引擎將能夠基於某些參數來提供這些頁面。 所以：

site.com -> pub/index.html
site.com/login/ -> pub/login.html
site.com/dashboard/ -> auth/index.html

我嘗試過這樣的事情：

router.get('/dashboard/', function(req, res, next) {
    res.sendFile(__dirname + "/src/auth/index.html");
});

router.get('/login/', function(req, res, next) {
    res.sendFile(__dirname + "/src/pub/login.html");
});
router.get('*', function(req, res, next) {
    res.sendFile(__dirname + "/src/pub/index.html");
});

但是，我很快發現的問題是這些頁面正在請求相對於其在目錄結構中的位置的資源，並且所有請求都被返回為默認的index.html。 因此，例如，如果我在瀏覽器中鍵入site.com index.html加載。 這是index.html的一部分：

<script src="js/jquery.min.js"></script>

然后，瀏覽器自然會向路由器找不到/js/jquery.min.js的另一個請求，因此它將再次使用index.html進行響應。

如何設計一個足夠聰明的路由引擎，以便根據url找到正確的視圖，然后理解它需要服務於該頁面相對於目錄結構中該頁面位置的所有請求？ 還是有另一種處理此類問題的標准方法？

使事情變得復雜的是，auth / index.html是一個有角度的頁面。 因此，一旦加載，它將請求相對於其在目錄結構中位置的各種html頁面（取決於路由和所包含的模板等）。

提前致謝。

Answer 1

這些問題很多，但我想至少可以使您指出正確的方向:)

但是，在這一點上，我只是想讓這些頁面從服務器正確返回。

為此，可以使用express.static來指定一個公共目錄，該目錄的資產可用於Web請求。 例如，如果您有這樣的目錄結構：

public/
  templates/
    index.html
  stylesheets/
  js/
    jquery.min.js

明確地說，您可以這樣做：

app.use(express.static(__dirname + '/public'));

為了將這些文件作為相對於公共目錄的靜態資產公開，例如http://yourserver.com/templates/index.html

使事情變得復雜的是，auth / index.html是一個有角度的頁面。 因此，一旦加載，它將請求各種與其位置在目錄結構中相關的html頁面

我認為您對此感到困惑的一部分是知道AngularJS / node.js應用程序中客戶端路由和服務器端路由之間的區別。

AngularJS是用於構建單頁應用程序（SPA）的框架。 這意味着您的瀏覽器在開始時請求一個HTML文件（例如，從服務器上的路由“ /”提供的index.html）開始操作，從而加載了一些引導Javascript。 從那時起，客戶端的javascript和AJAX調用將處理所有其余部分，以幫助呈現其他HTML，用戶交互以及導航到應用程序其他部分的方式。 瀏覽器中的URL將會更改，但是您會注意到在瀏覽時不會再進行頁面重新加載。 這是可以使用AngularJS構建的客戶端路由。 如果您已經看過AngularJS教程 ，則第7步將介紹它的工作原理。

您的服務器端路由通常不參與此頁面導航。 相反，您的服務器應該為AngularJS客戶端提供API，以便AAAX調用以創建，讀取，更新，刪除（CRUD）應用程序數據。 例如，對於登錄，您可能有一個服務器端/api/login路由，該路由不返回HTML頁面，而是通過POST請求接受用戶名和密碼，建立一些會話狀態，然后返回要處理的結果在客戶端。

除了AngularJS教程之外，我還邀請您看一下mean.js ，作為node.js + angularJS應用程序外觀的端到端示例。