Articles of 单页面应用程序

Webpack – 如何在基础HTML中要求结果文件(最佳实践)

我刚开始使用Webpack进行SPA,我有一个问题。 我如何在我的HTML中需要结果包/文件? 我应该使用标签还是有更好的做法呢?

在SPA(单页面应用程序)中使用node.js + express.js在服务器端dynamic生成内容的SEO

我的客户端代码是一个单独的页面应用程序(写在knockout.js)与自己的路由系统,所以当谷歌爬虫机器人将尝试访问链接(这与后端请求新的页面无关,但只是客户端的一部分它会要求服务器(node.js + express.js)服务页面(例如'mywebsite / about'),当然服务器将返回404,因为它不知道客户端路由系统。 这是我目前的服务器代码: router.get('*', function(req, res, next) { res.sendFile(path.resolve('../dist/index.html')); }); 我的想法是定义与客户端相同的路由结构,并在search参数中传递客户端路由系统的路由: router.get('/about', function(req, res, next) { res.sendFile(path.resolve('../dist/index.html?tab=about')); }); 然后在客户端,我可以在JavaScript中捕捉并select正确的路线。 在这里当然我有另一个问题 – 据我所知,谷歌机器人不运行JavaScript ..但在这里,我可以使用prerender.io中间件,我猜。 1)这是一个正确的方式去与单页面应用程序生成的内容和search引擎优化? 2)如何从express.js传递search参数?

如何在加载时configurationSPA?

我们正在使用Webpack,React,Node.JS,但我认为这个问题是更通用的具体技术。 在构build开发模式或生产模式时(例如使用DefinePlugin),我可以使用Webpack来configurationSPA。 如何在不同的部署环境下(例如,分段与生产)在生产模式下configurationSPA(在构build时configuration)? 例如,这些不同的部署将与不同的后端服务器API进行通信。 不知何故,SPA必须从服务器获取一些本地上下文,因为它正在被浏览器取得。 或者,也许我们必须在SPA可以安全地获取的每个服务器上有一个自定义的configuration文件? 我们在服务器上使用NodeJS,这个SPA最终将作为一个同构的应用程序运行,这样可以提供帮助。 我们正在将这些应用程序部署在Docker镜像中,并且很容易在部署时configuration其环境。 感谢您的任何build议。

具有socket.io的单页应用程序中特定于部分的侦听器

我正在构build一个具有一些实时function的应用程序(通知,实时评论,…,当然还有经典的聊天室)。 它的结构是一个单一的页面应用程序。 我使用page.js来处理路由,require.js,现在还有一个简单的自定义mvc框架。 后端与节点和socket.io实时支持。 事情是,我有不同的部分,如家,post,聊天。 每个部分都是基于路由dynamic呈现的。 现在,我应该如何为每个部分绑定特定的套接字事件? 我不想听那些与当前观看部分无关的事件。 我应该每次创build一个新的连接用户更改该部分,目标不同的命名空间? 或者我应该删除套接字中的所有事件侦听器,并附加一组新的事件? 我不知道什么是最好的方法,或者如果socket.io是最好的select。 谢谢。

使用Node Express和Passport捕获锚链接/路由

许多JavaScript框架利用锚标签在SPA内build立路由。 是否有可能捕获锚路由保存在我的会话存储进行身份validation? 例如,利用快递和护照,我有: routes.js //node stuff above app.get('/', auth.savePath, pages.index); auth.js exports.savePath = function (req, res, next) { if (!req.isAuthenticated()) { req.session.returnPath = req.originalUrl return res.redirect('/login') } next() } req.originalUrl不捕获锚path,只有应用程序path和查询stringvariables – 任何想法? 我没有看到任何可以让我捕获这些信息的快速文档。

如何在没有Cookie的情况下在SPA中使用第三方authentication服务?

在我的Web应用程序中,恰好是一个SPA(单页应用程序),我有OpenID和OAuth2.0客户端用于使用第三方服务进行用户validation。 即Google(OpenID),Yahoo(OpenID),Windows Live(OAuth2)和Facebook(OAuth2)。 现在,我已经设置了一个令牌端点,用于交换不记名令牌的用户凭证。 这里的目标是通过在SPA的所有请求中设置的授权标头replaceCookie。 为此,我使用OAuth2.0客户端密码身份validation策略和“密码”grant_type根据凭据(oauth2orize + passport-oauth2-client-password)对用户进行身份validation。 我想知道 : 如何使用第三方服务validation的用户继续使用令牌承载validation方法? OAuth2.0规范中有什么处理这种情况? 这种实现的常见做法是什么?

expression通配符规则

我正在使用Node和Express托pipe单页应用程序。 我使用客户端的静态中间件。 我正在使用pathurl来浏览应用,例如domain.com/profile/134。 我正在使用history.pushState在客户端内部更改页面,这工作正常。 我所缺less的是服务器上的通配符规则,当用户直接访问我的页面到非根的path时,捕获所有可能的path。 如果我试图直接访问domain.com/profile/134,我得到这个:“不能GET / profile / 134”。 我试图在server.js的末尾插入一个通配符,但是每次访问页面根目录的时候都会碰到它。 这是我的相关代码: var express = require('express'); var app = express(); app.use(express.static(__dirname + '/../client')); app.get('/*', function(req, res) { console.log('wildcard'); }); 这是正确的GET通配符规则来实现我所需要的,我怎样才能服务这个处理程序内的静态客户端? 之后只要保存了初始path,我的客户端就会find正确的页面。 我基本上希望这个通配符规则的行为与静态规则相同,但保留初始path。

多个SPA与node.js和AngularJS

为大型企业项目提供多个AngularJS SPA和单个node.js应用程序是否有意义? 即家庭,login和用户是快速路线和儿童/部分将被路由在AngularJS SPA。 这样我就可以将静态内容(js,css ..)分解为更小的包/文件,控制公共内容(对后端内容进行身份validation),更均匀的服务器负载等。 /家 /关于 /联系 /产品 /login /login /寄存器 /重设密码 /用户 /列出所有 /细节 /创build 。 。 。

如何使用Express.js正确设置单页应用程序的路线?

我正在尝试使用Express.js构build单页面应用程序。 在我的index.html页面上,我有一个基本的表单,它在提交后会向API发出请求,检索数据,parsing数据,然后将分析的数据呈现为链接列表。 现在我能够呈现索引页面,并且可以从我添加到页面的表单中对API进行提交调用。 我感到困惑的是如何正确地redirect我从API调用获得的数据,然后将其呈现在同一页面上。 我之前已经使用Express构build了简单的应用程序,在那里有多个视图,但从来没有一个页面的应用程序 对于这些应用程序,我知道对于响应,你可以调用像res.render('视图渲染的名称',数据),但在这种情况下不起作用。 我试图通过这个网站和通过快速文档find一些解决scheme,但我还没有看到任何东西,也没有包括使用像Angular的另一个框架。 对于这个应用程序的目的,我不需要包含任何额外的框架,我有点失落。 我现在调用API的函数看起来像这样。 当它被调用时,我被引导到一个只显示了json的页面 app.use(express.static(path.join(__dirname, '/public'))); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); app.use('/', express.static(path.join(__dirname, 'public'))); app.get('/search', function(req, res) { var title = req.query.movieTitle; var url = 'http://www.omdbapi.com/?s=' + title; request(url, function (err, response, body) { var results = JSON.parse(body); var movieTitles = results.Search; console.log(movieTitles); res.send(movieTitles); }); });

如何用Express后台构build多个布局的Angular JS

我的网站有3个主要部分,着陆页,pipe理面板和用户仪表板 我的文件结构分为2个文件夹 / client => angular frontend / server => express api后端 我正在使用一个快速后端api 通常在angular度上,应用程序的客户端中有一个index.html文件,我们将其用于所有路由 但是,如果我想要把它分成模块,一个index.html布局的不同部分,如登陆,pipe理和仪表板。 因为每个模块都有自己的asssets,资源..是包括单个html页面中的所有资源的好办法? 我怎样才能克服这个问题? 我可以使用多个SPA并将它们连接在一起,同时保持它们使用相同的API 对于这个问题的任何想法或者你如何处理这个在你的项目中,你如何实现pipe理面板等 我的目标是有这样的客户端文件夹/客户端/pipe理… index.html /登陆… index.html /仪表板… index.html 提前致谢