javascript - expressJS 路由器规划 - 如何设置有效的路由器

Question

我意识到这可能是一个相当简单的问题，但请耐心等待。我对 Node/express 真的很陌生。

我的目录结构如下:

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 找到正确的 View ，然后了解它需要为来自该页面(相对于目录结构中的页面位置)的所有请求提供服务？或者是否有另一种标准方法来处理此类问题？

让事情变得复杂的是，auth/index.html 是一个 Angular 页面。因此，一旦加载，它将请求相对于其在目录结构中的位置的各种 html 页面(取决于路由和包含的模板等)

提前致谢。

Answer 1

这些问题很多，但我想我至少可以为您指明正确的方向:)

However, at this point, I am just trying to get these pages to come back properly from the server.

要使用 Express 执行此操作，您可以使用 express.static 指定一个公共(public)目录，其资源可供 Web 请求使用。例如，如果您有这样的目录结构:

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

在 Express 中，您可以这样做:

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

为了将这些文件公开为静态 Assets ，相对于公共(public)目录，例如http://yourserver.com/templates/index.html

To complicate matters, the auth/index.html is an angular page. So, once it loads it will be requesting all kinds of html pages relative to its position in the directory structure

我认为您的困惑部分在于了解 AngularJS/node.js 应用程序中客户端路由和服务器端路由之间的区别。

AngularJS 是一个用于构建单页应用程序 (SPA) 的框架。这意味着您的浏览器在开始时请求一个 HTML 文件(例如，从服务器上的路由“/”提供的 index.html)来开始工作，这会加载一些引导 javascript。从那时起，客户端 javascript 和 AJAX 调用将处理其余所有工作，以方便呈现其他 HTML、用户交互以及导航到应用程序的其他部分。浏览器中的 URL 将会更改，但您会注意到在导航时不会再重新加载页面。这是您可以使用 AngularJS 构建的客户端路由。如果您看过 AngularJS tutorial , step 7回顾一下它是如何工作的。

您的服务器端路由通常不参与此页面导航。相反，您的服务器应该为 AngularJS 客户端提供一个 API，以便 AJAX 调用来创建、读取、更新、删除 (CRUD) 应用程序数据。例如，对于登录，您可以有一个服务器端 /api/login 路由，它不返回 HTML 页面，而是通过 POST 请求接受用户名和密码，建立一些 session 状态，然后返回要在客户端处理的结果。

除了 AngularJS 教程之外，我还邀请您看一下 mean.js查看 Node.js + AngularJS 应用程序的端到端示例。