MMA*_*MMA 5 node.js express backbone.js pushstate ember.js
我正在构建一个单页Web应用程序,其中Ember.js或Backbone.js作为前端MVC,express.js(node.js)作为后端服务器.
server/app.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
-- index.html ( will be rendered as always )
-- app (front end mvc code)
-- assets
-- images
-- styles
当前端MVC启用html5 pushstate时,快速服务器也始终为所有匹配的路由提供服务,当刷新页面或在浏览器中手动插入url时,它依次呈现index.html.
client/index.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
然后我切换到client/index.html中的绝对路径 (示例代码)
<link rel="stylesheet" href="/assets/styles/reset.css">
<link rel="stylesheet" href="/assets/styles/base.css">
它甚至在动态段url中运行良好localhost:3000/users/1,所有资源都在正确的url路径中提供.但我在前端mvc模板中有一个html img标签<img src="assets/images/icons/star.png" alt="star">,它将在应用程序启动时呈现.当我加载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 5ms
我尝试使用前端mvc template(<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');
});
问题:
当使用Express.js作为服务器时,我希望每个浏览器请求都将通过响应进行处理client/index.html,即使使用动态查询段也是如此.目前,每当url查询涉及动态查询段时/users/:user_id,来自快速服务器的响应将前缀users为所有静态资源.
例如,当我使用动态段加载网址时localhost:3000/users/1.如果我有assets/images/icons/star.png把手模板中的资源,快递服务器响应/users/assets/images/icons/star.png,但我没有users资产的文件夹.我想要回复什么/assets/images/icons/star.png.
我尝试使用手柄模板中的绝对路径/assets/images/icons/star.png或相对路径assets/images/icons/star.png,它总是users在响应中返回前缀.
谢谢你的帮助!
| 归档时间： |
|
| 查看次数： |
1191 次 |
| 最近记录： |