Экспресс-узел работает как сервер с поддержкой pushState, обслуживающий любой статический ресурс без префикса пути

Я создаю одностраничное веб-приложение с Ember.js или позвоночник.js as front end MVC, express.js (узел.js) в качестве серверной части.

сервер / приложение.js код короче 

app.use(bodyParser.json());

app.use(express.static(path.join(__dirname, '..', 'client')));
app.get('*', function(req, res) {
  return res.render('base'); (will sendFile (client/index.html) )
});

Он загрузит папку client/ со всеми публичными активами, структура папок клиента выглядит следующим образом 

- client
   -- index.html ( will be rendered as always )
   -- app (front end mvc code)
   -- assets
      -- images
      -- styles

Когда html5 pushstate включен front end MVC, экспресс-сервер также всегда обслуживает все соответствующие маршруты, которые, в свою очередь, визуализируют индекс.html, как всегда, когда страница обновляется или url-адрес вставляется вручную в браузер.

клиент / индекс.html (пример кода) 

<link rel="stylesheet" href="assets/styles/reset.css">
<link rel="stylesheet" href="assets/styles/base.css">

Вот три различных случая url 

localhost:3000/        (root)
localhost:3000/users  || localhost:3000/#/users (hard url)
localhost:3000/users/1    || localhost:3000/#/users/1  ( dynamic segment)

Когда я определил любой статический ресурс как относительный путь, он работает на сопоставлении пути с корневым url и жестким url на странице обновления, он служит ресурсам как 

GET /assets/styles/reset.css 304 1ms
GET /assets/styles/base.css 304 2ms

Но когда я добрался до localhost:3000/users/1 и обновил страницу, Я получил неправильный url ресурса, поэтому он не смог загрузиться client/index.html поскольку на этом пути нет ресурсов.

GET /users/assets/styles/reset.css 304 2ms
GET /users/assets/styles/base.css 304 6ms

Затем я переключился на абсолютный путь в клиент / индекс.html (пример кода) 

<link rel="stylesheet" href="/assets/styles/reset.css">
<link rel="stylesheet" href="/assets/styles/base.css">

Он хорошо работает даже в динамическом сегменте url localhost:3000/users/1, все ресурсы служат в правильном url-пути. но у меня есть html img tag <img src="assets/images/icons/star.png" alt="star"> в интерфейсном шаблоне mvc, который будет отображаться при загрузке приложения. Когда я загружаю localhost:3000/users/1 на странице refresh, вот что я получаю 

GET /assets/styles/reset.css 304 1ms
GET /assets/styles/base.css 304 2ms
GET /users/assets/images/icons/star.png 304 5ms

Я пытался с абсолютным путем и относительным путь в шаблоне MVC переднего плана (<img src="/assets/images/icons/star.png" alt="star">), он загружается с префиксом users независимо от того, что.

Я нашел решение с помощью tbranyen, но оно не совсем сработало для меня. Мне вообще не нужно настраивать какой-либо кластер, я хочу, чтобы мой экспресс-сервер обслуживал любой ресурс без префикса при сопоставлении любого динамического сегмента. Поэтому я написал это промежуточное программное обеспечение, и оно срабатывает правильно, но все равно загружает статический ресурс с префиксом users/. 

// this route uses the ":user" named parameter
// which will cause the 'user' param callback to be triggered
router.get('/users/:user_id', function(req, res, next) {
  console.log('req.params: ', req.params.user_id );
  //console.log('@TODO: need to handle the params here');
  //next();
  return res.render('base');
});

Задача:

При использовании Экспресс.js как сервер, я хочу, чтобы каждый запрос браузера обрабатывался с ответом client/index.html, даже с динамическим сегментом запроса. В настоящее время всякий раз, когда url-запрос связан с динамическим сегментом запроса /users/:user_id, ответ от express server будет иметь префикс users для всех статических ресурсов.

Например, когда я загружаю url с динамическим сегментом localhost:3000/users/1. если у меня есть resources assets/images/icons/star.png в шаблоне handlebars, экспресс-ответ сервера назад /users/assets/images/icons/star.png, но у меня нет папки users с активами. Что я хочу получить ответ назад /assets/images/icons/star.png.

Я пробовал с абсолютным путем /assets/images/icons/star.png или относительным путем assets/images/icons/star.png в шаблоне руля, он всегда возвращается с префиксом users в ответе.

Спасибо за любую помощь!

1 5
node.js ember.js backbone.js pushstate

1 ответ:

В <head> вашего базового шаблона добавьте это наверх: 

<base href="/">
6