Express节点作为启用pushState的服务器提供任何没有任何路径前缀的静态资源 [英] Express node worked as pushState enabled server serve any static resource without any path prefix

问题描述

我正在使用Ember.js或Backbone.js作为前端MVC，express.js（node.js）作为后端服务器构建单页Web应用程序。

服务器/ app.js 代码简介

  app.use（bodyParser.json（））; 
 
 app.use（express.static（path.join（__ dirname，'..'，'client'）））; 
 app.get（'*'，function（req，res）{
 return res.render（'base'）;（将sendFile（client / index.html））
}） ; 
  

它将加载具有所有公共资产的客户端/ 文件夹，客户端文件夹结构如下

   - 客户端
  -  index.html（将一如既往地呈现）
  - 应用程序（前端mvc代码）
  - 资产
  - 图像
  - 样式
  

当前端MVC启用html5 pushstate 时，快速服务器始终服务于所有匹配的路由，这反过来会像以往一样呈现index.html

客户/ index.html （示例代码）

 < link rel =stylesheethref =assets / styles / reset.css> 
< link rel =stylesheethref =assets / styles / base.css> 
  

这里有三种不同的URL案例

  localhost：3000 /（root）
 localhost：3000 / users || localhost：3000 /＃/ users（hard url）
 localhost：3000 / users / 1 || localhost：3000 /＃/ users / 1（动态段）
  

当我将任何静态资源定义为相对路径，它可以在页面刷新时使用root url和hard url匹配路径，它将资源作为

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

但是当我得到 localhost：3000 / users / 1 并刷新页面时，我收到错误的资源网址，因此加载客户端/ index.html ，因为该路径中没有资源。

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

然后我转到
客户端/ index.html （示例代码）中的绝对路径

 < link rel =stylesheethref =/ assets / styles / reset.css> 
< link rel =stylesheethref =/ assets / styles / base.css> 
  

即使在动态段url localhost：3000 / users / 1 ，所有资源都以正确的URL路径提供。但我有一个html img 标签< img src =assets / images / icons / star.pngalt =star> 在前端mvc模板，将在应用程序启动时呈现。当我在页面刷新时加载 localhost：3000 / users / 1 ，这里是我获得的

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

我尝试使用前端mvc模板的绝对路径和相对路径（< img src =/ assets / images / icons / star.pngalt =star> ），加载用户前缀无论什么。

我发现了 tbranyen 的解决方案，但这对我来说并不好用。我根本不需要设置任何集群，我想要的是，当任何动态段匹配时，我的express服务器可以提供没有任何前缀的任何资源。所以我写了这个中间件，它正常启动，但是仍然使用 users / 前缀加载静态资源。

  //此路由使用名为参数
 //的：user，这将导致用户参数回调被触发
 router.get（'/ users /：user_id'，function（req，res，next）{
 console.log（'req.params：'，req.params.user_id） ; 
 //console.log('@TODO：需要处理这里的参数）; 
 // next（）; 
 return res.render（'base'）; 
}）; 
  

问题：

使用Express时。 js作为服务器，我希望每个浏览器的请求将被处理与响应 client / index.html ，即使是动态查询段。目前，每当url查询涉及动态查询段 / users /：user_id 时，来自express服务器的响应将以用户前缀到所有的静态资源。

例如，当我加载动态段 localhost：3000 / users / 1 的网址时。如果我在手柄模板中有资源 assets / images / icons / star.png ，则将服务器响应快回 / users / assets / images / icons / star.png ，但我没有用户文件夹与资产。我想要回复 /assets/images/icons/star.png 。

我尝试使用绝对路径 /assets/images/icons/star.png 或相对路径 assets / images / icons / star.png 模板，它始终以用户前缀返回。

感谢任何帮助！

解决方案

在您的基本模板的< head> 中，将其添加到顶部：

 < base href =/> 
  

I am building a single page web application with Ember.js or Backbone.js as front end MVC, express.js(node.js) as back end server.

server/app.js code in short

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

It will load up the client/ folder with all the public assets, client folder structure looks like this

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

When html5 pushstate is enabled by front end MVC, express server is always serving all the matching route as well, which in turn render index.html as always when page is refreshed or url is being manually inserted in the browser.

client/index.html (sample code)

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

Here are three different URLs cases

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

When I defined any static resource as relative path, it works on matching path with root url and hard url on page refresh, it serves resources as

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

But when I got to localhost:3000/users/1 and refresh the page, I got the wrong resource url, so it failed on loading client/index.html since there are no resources in that path.

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

Then I switched to absolute path in client/index.html (sample code)

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

it works well even in the dynamic segment url localhost:3000/users/1, all resource serve in the correct url path. but I have an html img tag <img src="assets/images/icons/star.png" alt="star"> in front end mvc template which will be rendered when application boots up. When I load up localhost:3000/users/1 on page refresh, here is what I get

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

I tried with absolute path and relative path in front end mvc template (<img src="/assets/images/icons/star.png" alt="star">), it loads with users prefix no matter what.

I found a solution by tbranyen, but it did not quite work for me. I do not need to setup any cluster at all, what I want is my express server to serve any resource without any prefix when any dynamic segment is being matched. So I wrote this middleware, and it fires correct but still loads the static resource with users/ prefix.

// 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');
});

Problem:

When using Express.js as a server, I want every browser request will be handled with response client/index.html, even with dynamic query segment. Currently, whenever url query involves with dynamic query segment /users/:user_id, the response from express server will prefix with users to all the static resources.

For example, when I load the url with dynamic segment localhost:3000/users/1. if i have a resources assets/images/icons/star.png in handlebars template, express server response back /users/assets/images/icons/star.png, but I do not have users folder with the assets. What I want response back /assets/images/icons/star.png.

I tried with absolute path /assets/images/icons/star.png or relative path assets/images/icons/star.png in the handlebars template, it always return with users prefix in the response.

Thanks for any help!

解决方案

In the <head> of your base template, add this toward the top:

<base href="/">

这篇关于Express节点作为启用pushState的服务器提供任何没有任何路径前缀的静态资源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！