标签: single-page-application

我有一个使用WebAPI构建的Web服务,它接受JSON请求并相应地响应.核心架构已构建,但没有任何身份验证/授权.

经过大量的谷歌搜索和示范项目,我不知道从哪里开始.我发现了2008年和2009年的大量资料,但没有为WebAPI /单页应用程序提供大量最新的指南/工作流程.我认为工作流程应该如下:

1. 检查用户是否已登录:如何使用javascript完成此操作？我是否将cookie发送到我的webAPI？如果是这样,我是否将该cookie作为参数发送到请求正文中？

2. 让用户登录/注册:这些数据如何加密/解密？当然我不能通过线路发送密码......这是SSL进来的地方吗？

3. 让他们访问他们有权访问的内容:我想我得到了这个 - 我可以在每个请求的基础上在控制器中进行授权.

任何信息都会很棒.

我们正在开始一个新的Angular2 SPA,我正在研究是否使用Angular快速入门教程(https://angular.io/guide/quickstart)或Webpack(https://angular.io/docs/ts)中所述的SystemJS /latest/guide/webpack.html).

在线研究,人们似乎正在从SystemJS转向Webpack.例如,Google的"Angular CLI"项目:http://react-etc.net/entry/angular-2-cli-moves-from-systemjs-to-webpack

Webpack不仅处理模块,还提供了打包应用程序的方法(concat文件,minify/uglify文件,......).新版本还提供"树摇动"(从最终版本中删除死/未使用的模块).

使用SystemJS,我们仍然需要使用gulp(或其他东西)来构建应用程序.

如果您开始使用新的Angular 2应用程序,您会使用哪一个？

我已经通过 Angular 制作了一个单页应用程序，并计划在接下来的几天内将它变成一个渐进式网络应用程序。

我最近意识到 Google AdSense 显然不喜欢 SPA，而且我的申请已被拒绝两次。我的应用程序是一个允许用户创建、管理和共享特定内容的工具，我相信它提供了大量的价值。不久前我在研究 AdSense 时，我绝对认为我有资格，因为我没有意识到“有价值的内容”仅指拥有大量单词。

话虽如此，现在是 2019 年……有没有解决方案可以在不专注于文章等的网络应用上投放 Google 广告？谷歌有大量文章谈论 PWA 对用户的好处，但他们似乎根本不支持 PWA 的广告。我不想制作原生移动应用，因为我认为适用于任何设备的 PWA 更有意义，所以 AdMob 不是一个选择。我看到几篇文章指出 DFP 广告管理系统 (DFP) 可能是一种解决方案，但是当我尝试登录该平台时，它似乎已链接到我的 AdSense 应用程序并且显示待处理或访问被拒绝，具体取决于我目前的 AdSense 申请状态。我没有其他网站可以先获得批准，然后再搭载此应用程序。

我也使用 firebase 作为我的后盾，这就是为什么我也非常热衷于使用 Google 做广告。但很明显，如果我必须走完全不同的方向来通过我的应用产生广告收入，我会的。

任何有关如何让 Google Ads 适用于我的应用程序或其他好的解决方案的见解将不胜感激。

我有一个使用 Angular 制作的简单前端应用程序。所有路由均由 Angular 处理，因此我希望 Spring boot 将所有页面流量转发到，"/"以便 Angular 路由可以处理它们。

stackoverflow 中已经有一些已知的答案。他们是：

• spring-boot-single-page-application-routing-on-any-url
• 配置 spring-boot-for-spa-frontend
• spring-boot-with-redirecting-with-single-page-angular2 弹簧引导与重定向与单页-Angular2

但它们都不再工作了，因为从Spring Framework 5.3 及更高版本开始，它们 AntPathMatcher已被PathPattern. PathPattern与语法兼容，AntPathMatcher但以下内容除外：

仅允许在模式末尾支持多段匹配的“**”。在为给定请求选择最接近的匹配时，这有助于消除大多数歧义原因。

所以这不再起作用：

  // Match everything without a suffix (so not a static resource)
  @RequestMapping(value = "/**/{path:[^.]*}")
  public String redirectAngularRoutes() {
    return "forward:/";
  }

那么从 Spring Framework 5.3 开始，最好的方法是什么？

我们是否指定每个角度路由及其forward如下所示"/"，或者还有其他替代方案？

  @RequestMapping({ "/help/**","/view/**","/admin/**" })
  public String redirectAngularRoutes() {
    return "forward:/";
  }

对于单页面应用程序,当部署到服务器的更新时,有哪些方法可以强制重新加载页面和/或JavaScript文件？

一种显而易见的方法是轮询一些服务器资源以查看当前版本的应用程序是否在浏览器中运行,如果没有则加载更新的资源.

我想知道是否有更普遍接受的方法使用特定的HTTP或DOM功能.

更新

我正在阅读HTML5 Appcache.这似乎更倾向于可以在不需要服务器连接的情况下运行的应用程序.我不认为这可能与从服务器更新SPA的资源(包括页面本身)有关.我对么？

我们已经建立了一个空缺的搜索引擎.出于速度和良好用户体验的原因,我们使用了"单页应用程序"(SPA)的体系结构.我们知道对于SPA架构而言,启用SEO是一项挑战,因此我们进行了大量优化以实现SEO.虽然Google正在为我们的网页编制索引,但我们在Google上的排名非常差,我们正在寻求改善这一点的建议.我们遵循了谷歌的建议,但没有满意.

由于Google僵尸程序不会执行客户端javascript,因此无法直接由Google-bot索引SPA.没有javascript,我们的网站几乎不包含任何内容,因为数据是以json格式异步读取的,并且大多数HTML都是在客户端上呈现的.渲染由称为" knockout " 的框架完成,该框架支持将HTML模板数据绑定到javascript对象.可以使用客户端URL来解决SPA中的不同页面.为了使这些页面可供Google阅读,我们的客户端网址包含一个"#"后跟一个"!".这种'hash-bang'语法触发Google机器人将URL重写为特殊的"服务器端"URL.当我们的服务器访问此特殊URL时,我们会触发一个"无头浏览器"来呈现服务器上的页面.然后将完整的HTML语法(在javascript执行之后)发送到客户端.谷歌机器人可以使用这个所谓的HTML快照来索引页面.为了告诉Google我们的SPA中有哪些页面,我们提供了一个sitemap.xml,其中包含可以访问的不同网址.当我们要求Google显示从我们网站编制索引的网页时,我们会看到Google僵尸程序确实访问了我们的网页并将其编入索引.因此,我们的结论是,从技术上讲,我们的工作做得很好,但这些网页似乎没有足够高的排名可以出现在正常的Google搜索中.我们不确定这是否与我们使用SPA架构的事实有关,但结果是我们的页面无法找到.

我们想知道是否有人在谷歌排名方面有相同的技术经验,如果有人有其他建议可以帮助我们提高SPA的SEO排名(没有完全改变网站到传统的服务器端渲染)技术).

好吧,所以我一直在谷歌上搜索这个问题一段时间了,但我似乎无法找到一个好的单页面应用程序路由器所需要的东西.我想要的是:

1. 一个jscript路由器库
2. 不做hashtags/hashbangs的路由器
3. 使用example.com作为我的网站,处理类似于:
   • http://example.com/
   • http://example.com/article/
   • http://example.com/article/1/
   • http://example.com/article/2/
   • http://example.com/user/
   • http://example.com/user/1/
   • http://example.com/user/2/
   • 等等
4. 如果禁用了javascript,服务器将返回一个有效的静态html页面(也有助于搜索索引),具有类似的内部链接,服务器可以自行处理< - 这部分我可以自己做
5. 如果启用了javascript,服务器将返回相同的静态页面,但路由器脚本现在会阻止链接被点击,并使用例如匿名函数(如大多数路由器库的情况)处理请求本身,我可以填写通过javascript动态JSON数据的DOM.
6. 它正确处理历史.
7. 很小(当我已经拥有自己以前选择的框架时,我不想加载一个广泛的框架)

那里有一个像这样存在的图书馆吗？我看着crossroads.js,看起来很棒,但它确实做了hashbangs/hashtags /哈希.我查看了Backbone.js,但它具有众多功能和6.5Kb大小,不太热衷.这个家伙当场得到了它,但他的图书馆似乎没有得到很好的支持.我对这个快速尝试感到非常惊讶,但它似乎并没有包括跨浏览器,或者得到很好的支持.还有数百个,但我不知道应该选哪一个？有没有其他人为单页应用程序提供这个相当简单的功能？

我现在在iOS上,但问题也适用于Android.我正在看Xcode中的内存图,我的应用程序崩溃大约240MB,我相信iOS正在杀死它,因为它占用了太多的内存.

我可以通过在应用程序中的页面之间导航来始终使其崩溃.(这是一个SPA,客户端HTML呈现.)如果我停止导航一分钟,内存将下降到140MB.

这是OSX Chrome中的同一页面:

在这种情况下,在停止导航后,内存不会自行减少.相反,图表末尾的悬崖是我点击垃圾收集按钮(从170MB降至60MB).

如何阻止我的应用崩溃？

1. 有没有相当于我可以在Cordova内部调用的垃圾收集按钮？
2. 我可以让iOS为我的应用程序提供特殊的大内存容量吗？
3. 如果用户在一分钟内在页面之间导航X次,我可以设置一个超时屏幕,告诉他们在垃圾收集进入XD时他们不能在下一分钟使用该应用程序
4. 有什么方法可以降低斜率上的内存使用量,因为JS正在渲染HTML？

此外,这里是带有HTML节点的Chrome图表 - 按比例增长,但节点在垃圾收集后保持在同一级别.

关于从Grails(REST-API,AngularJS,MongoDB,Tomcat,Spock,几个插件的部分)到Node.js + Angular.js的迁移,我有几个(软件)架构问题.我可能要解释Grails项目拳头的结构,所以我们在这里:

有一个主要的Grails应用程序(旁边的几个其他应用程序),它建立在几个插件上.这些插件中的每一个都能够自行执行 - 这意味着它有自己的UI,单独的模板,服务,控制器,路由,测试等.它也托管在不同的存储库中.这是由Grails插件机制完成的.其好处是减少了测试工作量,减少了编译时间,模块化,单一职责等等.

但是,编译和测试的时间太贵了.此外,我不喜欢API提供部分模板/视图的事实.我想让后端API"只是作为后端API"和前端"只是作为前端".因此,每个AngularJS应用程序/插件都将提供自己的视图,路由,服务等.但它们也可能依赖于其他插件.

所以我想要实现的目标如下:

• 一个主要的AngularJS应用程序,包括几个插件(一个插件可以是类似报表生成器,留言簿或任何东西,说到应用程序的单个独立部分,具有特定路径,或只是页面的一小部分) ).
• 每个插件必须是一个独立的AngularJS应用程序(可能在开发期间通过grunt等执行).因此,UI开发人员不需要启动整个后端应用程序,因此我们可以仅使用JavaScript运行功能测试
• 仅通过REST进行通信,前端必须从API检索所有数据
• 每个插件必须可以单独测试
• 插件可能需要其他插件才能工作
• 主要的index.html(和app.js？)可能由Nginx服务器提供,该服务器与后端的其余部分(API)分离

虽然我脑子里有一张特定的图片,但我正在努力设置这个架构.

在Grails中,插件机制以某种方式将插件依赖设置(如URL映射,依赖关系等)合并到包含/注入它们的主应用程序中 - 这也是我想用AngularJS实现的.所以:

• AngularJS是否有某种相同的机制？
• 如何将每个插件的路由提供/合并到主应用程序中？
• 如何声明应用程序和插件依赖项？
• 哪些工具可能对构建过程有用？
• 如何建立插件资源(css/less文件,视图,服务等)的延迟检索？
• 阻止应用程序在启动时提供插件的所有资源(我想在启动时需要路由)

因为这不仅仅是一个怎么做这个或那个问题,如果我错过了重要的部分,或者某些部分不够清楚,我会原谅自己.请问我,我将深入回答每个问题.

我正在使用React.js,我的问题很简单:如果我使用React,我的应用程序必须是单页应用程序吗？

如果不是,那么如何控制它们之外的组件？通过FLUX？还有其他标准方法吗？

如果是,那么是否有任何库在React的客户端执行权限/访问验证？

非常感谢!