当前位置: 首页 > 面试题库 >

使用Node.js Express服务器使用Backbone.js pushState路由吗?

养昊天
2023-03-14
问题内容

pushState Backbone.js的0.5版更新引入了对该功能的支持。

从主干文档:

请注意,使用真实URL要求您的Web服务器能够正确呈现这些页面,因此也需要进行后端更改。例如,如果您的路由为/ documents /
100,并且浏览器直接访问该URL,则您的Web服务器必须能够提供该页面。为了获得完整的搜索引擎可爬网性,最好让服务器为页面生成完整的HTML
…但是,如果是Web应用程序,则只需呈现与根URL相同的内容,然后用Backbone填充其余内容视图和JavaScript可以正常工作。

这似乎是一个琐碎的问题,但是我想知道是否有人可以通过一些特定的(最好是express)node.js服务器代码来帮助我。我应该如何处理这些路线?我有点困惑。

这是我的应用程序路由器模块的相关摘录:

var Router = Backbone.Router.extend({
    routes: {
        '': 'index',
        'about': 'about'
    },
    index: function() {
        indexView.render();
    },
    about: function() {
        aboutView.render();
    }
});

var initialize = function() {
    var router = new Router;
    Backbone.history.start({ pushState: true });
}

return {
    initialize: initialize
};

在这里,我只有一条顶级路线和一个关于页面的路线。因此,我应该如何设置一个节点服务器,使我可以导航到:

domain.com
domain.com/about
domain.com/#/about // <- for browsers that don't support pushState

问题答案:

说明

首先,您需要知道domain.com/#/about它将调用服务器的“
/”路由,因为它不读取#片段。您的服务器将呈现Backbone.js应用程序的基础,而Backbone将触发“关于”路线。

因此,您需要在Express JS中声明两条路由:

  • /
  • /关于

app.get('/', function(req, res) {
    // Trigger the routes 'domain.com' and 'domain.com/#/about'
    // Here render the base of your application
});

app.get('/about', function (req, res) {
    // Trigger the route 'domain.com/about'
    // Here use templates to generate the right view and render
});

我建议您通过Derick Bailey与Backbone.js实现SEO兼容性的3个链接:

  • HTML5 PushState的SEO和可访问性,第1部分:PushState简介: http **://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/**
  • HTML5 PushState的SEO和可访问性,第2部分:Backbone.js的渐进增强: http **://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive** -加强与骨干js /
  • 使用HTML5 PushState进行SEO和可访问性,第3部分:视频: http **://lostechies.com/derickbailey/2011/10/06/seo-and-accessibility-with-html5-pushstate-part-3-the-video/**


 类似资料:
  • 问题内容: 我一直在思考,我对客户端和服务器之间的路由感到困惑。假设我在将请求发送回Web浏览器之前使用ReactJS进行服务器端渲染,并使用react- router作为客户端路由在页面之间切换而不刷新为SPA。 我想到的是: 路线如何解释?例如,从首页()到帖子页面()的请求 路由在服务器端还是客户端去哪里? 它如何知道如何处理? 问题答案: 注意,此答案涵盖了React Router版本0.

  • 我想到的是: 路线是如何解释的?例如,从主页()到帖子页()的请求 路由在服务器端还是客户端? 它如何知道它是如何处理的?

  • 我有一个相当简单的Spring CloudNetflix设置。我们使用Zuul作为反向代理,Eureka用于服务发现和注册。我们有我们正在慢慢窒息的遗留服务。我们有许多简单的服务,其endpoint配置如下: 因此,现在当每个服务都在eureka注册并随后向Zuul添加路由时,zuul终结点如下所示: 我想阻止Zuul将前缀从eureka服务的路由URI中剥离,以便我的Zuulendpoint如下

  • 问题内容: 尝试添加pdf文件生成时,我看到奇怪的行为。 在if语句上,以下代码将引发:both \ routes.js 错误:只能在方法调用中调用Meteor.userId。在发布函数中使用this.userId。在[对象Object] .Router处的Object.Meteor.user(packages / accounts-base / accounts_server.js:24:1)处

  • 我在谷歌Appengine服务器上遇到了一个问题,没有找到任何解决方案,也许有人能帮我。 我用他自己的路由器开发了一个聚合物应用程序,所以所有的路由都是在客户端完成的。刷新页面时,请求由服务器处理,由于没有路由匹配,因此无法正常工作。 为了解决它我已经在web.xml文件中设置了我想要始终服务于index.html文件Whitout照顾url,请参阅下面的代码: 这在本地环境中可以正常工作,但当我

  • 我想从API中读取要显示的产品。然后,当我按下其中一个显示的产品时,它应该使用url中的产品ID和要在页面上查看的产品详细信息将我路由到一个组件,以获取有关该产品的详细信息。我在这里读取了API中的数据,并详细显示了产品。 我想通过产品ID添加一个路由链接。如何将详细信息作为其他组件的道具发送?