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

Question

I realize that this may be a fairly simple question but bear with me. I am really new to node/express.

My directory structure looks like:

auth
    index.html
pub
    index.html
    login.html

the idea here is that the resources in pub are publicly available but the resources in auth are only available after a user is authenticated.

However, at this point, I am just trying to get these pages to come back properly from the server. Ideally, my routing engine would be able to serve these pages up based on some parameter. So:

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

I tried something like this:

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");
});

However, the problem I quickly found was that these pages are requesting resources relative to their own position in the directory structure and all requests were being returned the default index.html. So, for example if I type site.com in the browser index.html loads. Here is part of index.html:

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

naturally then, the browser makes another request for /js/jquery.min.js which the router can't find so it responds with index.html again.

How do I design a routing engine that is smart enough to find the correct view based on the url and then understand that it needs to serve all requests from that page relative to that pages position in the directory structure? Or is there another standard way of handling this kind of problem?

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 (depending on routes and included templates etc.)

Thanks in advance.

Answer 1

Those are a lot of questions but I think I can at least get you pointed in the right direction :)

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

To do this with express, you can use express.static to designate a public directory whose assets get made available to web requests. For example, if you had a directory sturcture like this:

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

In express, you would do this:

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

in order to expose those files as static assets, relative to the public dir, eg 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

I think part of your confusion here is knowing the difference between client side routing and server side routing in an AngularJS/node.js app.

AngularJS is a framework for building single page apps (SPA). What this means is your browser requests one HTML file at the start (eg an index.html served from the route '/' on your server) to get things started, which loads some bootstraping javascript. From then on, client side javascript and AJAX calls will handle all of the rest to facilitate rendering additional HTML, user interaction, and navigation to other parts of your app. The URL in the browser will change, but you'll notice that no further page reloads will take place as you navigate. This is the client side routing that you can use AngularJS to build. If you've looked at the AngularJS tutorial , step 7 goes over how this works.

Your server side routes are typically not involved in this page navigation. Instead, your server should provide an API for the AngularJS client side will mae AJAX calls to for creating, reading, updating, deleting (CRUD) application data. For login for example, you could have a server side /api/login route that doesn't return an HTML page, but rather accepts a username and password via a POST request, establishes some session state, and then returns the result to be dealt with on the client side.

In addition to the AngularJS tutorials, I would invite you to take a look at mean.js for an end to end example of what a node.js + angularJS app looks like.