如何使用page.js和Apache路由/提供静态文件？
[英]How can I route to / serve static files with page.js and Apache?
问题描述
I have a router set up with page.js that routes an index page (at '/' ), project pages (at '/projects/<projectId>/' ), and static (image) files. 
我有一个路由器设置了page.js路由索引页（在'/' ），项目页面（在'/projects/<projectId>/' ）和静态（图像）文件。 It looks, basically, like this: 它基本上看起来像这样：
JavaScript JavaScript的
init: function () {
page.base('/');
// IndexPage
page('', function (context, next) {
displayIndexPage();
});
// ProjectPage
page('projects/:project', function (context, next) {
displayProjectPage();
});
// image files
page(/^.+\.(jpg|png|gif|bmp)$/, function (context, next) {
window.location = '/' + context.path;
});
// Exit the middleware
page();
}
In my /projects/ folder, I have an .htaccess file with the following: 在我的/projects/文件夹中，我有一个.htaccess文件，其中包含以下内容：
bash 庆典
Options +FollowSymLinks
RewriteEngine On
# html5 pushstate (history) support
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !index
RewriteRule ^.*$ ../index.html [QSA,L,NE]
The routing is generally working correctly. 路由通常正常工作。 When I navigate to a static image file, .htaccess drops me outside of my single-page app, and the static file appears on screen. 当我导航到静态图像文件时， .htaccess将我从单页应用程序中删除，静态文件出现在屏幕上。 However, when I navigate back in my browser, I don't re-enter my app; 但是，当我在浏览器中导航时，我不会重新进入我的应用程序; URL changes, but there is no navigation, the image file remains on screen. URL更改，但没有导航，图像文件仍保留在屏幕上。 No amount of popping or pushing state from there gets me back into my app. 从那里没有任何弹出或推动状态让我回到我的应用程序。
I'm not totally sure I'm asking the right question here; 我不完全确定我在这里问正确的问题; not sure this is about serving static files as much as it is about routing a single-page app...I would be satisfied with any answer that allows page.js to pick back up on a popState . 不确定这是关于提供静态文件和路由单页应用程序...我会满意任何允许page.js在popState上选择备份的popState 。
EDIT: I'm exempting files from my RewriteRule because I need to serve them in the pages rendered by my app. 编辑：我正在豁免我的RewriteRule文件，因为我需要在我的应用程序呈现的页面中提供它们。 However, when a visitor clicks on an image in a rendered page, I'd like the browser to simply display that image, with no markup. 但是，当访问者点击渲染页面中的图像时，我希望浏览器只显示该图像，没有标记。
2 个解决方案
解决方案1
0 2015-03-20 05:24:17
What is your expectation when the image links are clicked? 单击图像链接时您的期望是什么？
When routing for images, instead of changing the location, try doing something else with image. 在为图像进行路由时，请尝试使用图像执行其他操作，而不是更改位置。 Load it via AJAX and append it to some element or so as per your expectation. 通过AJAX加载它并根据您的期望将其附加到某个元素或左右。
// image files
page(/^.+\.(jpg|png|gif|bmp)$/, function (context, next) {
// Culprit
// window.location = '/' + context.path;
showImage('/' + context.path);
});
Edit 编辑
Use a non page.js link for images to allow browser to directly handle it. 对图像使用非page.js链接以允许浏览器直接处理它。 Example . 例子 。
The jsfiddle link does not work well because of server side routing, but if you copy back to your server it will work. 由于服务器端路由，jsfiddle链接无法正常工作，但如果您复制回服务器，它将起作用。
解决方案2
0 2015-03-22 19:26:51
If I understand what you want the end result to be, it can be done with a simple overlay containing your image that covers the entire window. 如果我理解您想要的最终结果，可以使用包含覆盖整个窗口的图像的简单叠加来完成。 Then catch the popstate event and remove the overlay. 然后捕获popstate事件并删除叠加层。 JQuery not required, only for brevity. JQuery不是必需的，只是为了简洁起见。
jsfiddle Note: your browser URL will not change, because the fiddle is inside an iframe. jsfiddle注意：您的浏览器URL不会更改，因为小提琴在iframe中。
Edit: Stackoverflow sets the origin to null, so check jsfiddle for the working example. 编辑：Stackoverflow将原点设置为null，因此请检查jsfiddle以获取工作示例。
var url = 'http://indianapublicmedia.org/stateimpact/files/2013/01/apple-image-300x300.jpg'; $('.image').click(function () { $('body').append('<div id="overlay"><img src="' + url + '"></div>').appendTo('body'); history.pushState(null, null, 'http://stackoverflow.com/imageURL'); }); window.onpopstate = function(){ $('#overlay').remove(); };
#overlay { top: 0; left: 0; width: 100%; height: 100%; z-index: 100; position: fixed; background: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body>Some content here <img src="http://indianapublicmedia.org/stateimpact/files/2013/01/apple-image-300x300.jpg" class='image'> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.