【问题标题】:How a fully scalable SPA with a solid backend is built如何构建具有可靠后端的完全可扩展的 SPA
【发布时间】:2013-08-29 19:40:36
【问题描述】:

过去几周我一直在努力使用 Angular、Node、TDD、Heroku、Amazon S3 等。尝试更好地了解如何构建具有可靠后端的完全可扩展的 SPA,与 grunt 合作, bower,我还没有使用 Jasmine 涉足 TDD,尽管我了解如何通过 Karma 进行测试,这应该是我的下一步。

有一点是肯定的:信息量很大


关于使用所有这些技术的问题/理由。

首先,我玩过

阅读几十篇文章等

我发现 NG Boilerplate 的结构最符合逻辑(就我对这些事情的理解而言)。

作为一个演示项目(从非常小的东西演变而来),我想使用以下方法制作一个单页 CRUD 应用程序:

  • NodeJS 作为后端
  • Express 作为网络应用框架
  • NG 样板作为客户端
  • 部署到 Heroku 的应用
  • 用于数据库的 MongoDB
  • 用于动态存储的 Amazon S3

现在我想使用 Angular-Apps 的 (https://github.com/angular-app/angular-app) 服务器作为我的 NGBoilerplate kickstarter 的后端

我想知道怎么做:


长话短说,不用我问很多问题,有人可以详细描述一下这样一个应用程序的工作流程吗?获取会话、登录、访问编辑内容、将快速路由绑定到角度路由(例如 X 路由只能由管理员访问)等。##

我脑子里一片模糊:)。

【问题讨论】:

  • 嗨 Arthur,因为您正在使用 Angular、Node 和 Express。你绝对应该看看 MEAN 堆栈:mean.io。您可以下载一个基本应用程序,其中已经内置了一个基本身份验证,其中包含电子邮件/facebook/github/twitter/google...
  • 谢谢@tdhulster!明天第一时间去看看!还要感谢@Andy G 重命名我的问题,这样更清楚:)
  • 我检查了它,它很复杂,我仍在仔细阅读大量文档,所以我不会复制/粘贴/改编代码:)
  • 我想在这个问题中添加很多信息,这些信息来自我迄今为止发现的合理和好的东西。我应该创建一个答案并开始更新它吗?
  • @ArthurKovacs - 是的 - 请添加答案

标签: javascript node.js angularjs http-authentication


【解决方案1】:

在过去的几个月里,我对这些问题和问题进行了很多尝试,我得出了以下结论:

出于我的目的,我需要一个几乎完全依赖 Angular 的应用程序,没有单独的后端,并且当前的后端应该来自 Angular。

为什么?因为我希望我所有的鸡蛋都放在一个篮子里,所以我不想在很多不同的部分上配置大量的东西。

作为我项目的基础,我最终使用了 ng-boilerplate,作为样板 :),对开发过程、Grunt 任务等进行了一些更改,每个人都可以根据每个特定项目来弄清楚。

嗯,我要在这里讨论的主要问题是,对于真正的后端,用 Angular 制作,我们需要安全路由和安全持久性方法,一个数据库。

对于应用程序,我利用了 ng-boilerplate 的模块化和依赖感知结构,我认为它非常适合 Angular 应用程序。

无论如何,我会从头到尾进行介绍(最终产品,我上面所说的构建环境,这取决于你,但 ng-boilerplate 很棒),我们开始吧。

  1. 在上层我们有实际的 Angular 应用程序,按照我们想要的方式制作
  2. 服务器容器,是一个带有 express 和其他模块的 NodeJS 服务器,用于部分处理不同浏览器和设备上的路由(在我的应用程序中,我制作了由 express 增强的 HTML5 路由,只要有一个类似 .htaccess 的设置它应该重定向到索引的部分 URL,Angular 将读取请求的路径并将您发送到该位置)
  3. 就我而言,所有东西都在 Heroku 上运行,在 Node.JS 应用程序上,如果你愿意,你可以在那里安装其他几个东西。

现在,为了持久性,拥有身份验证和安全性,而不是依赖后端,我正在使用 firebase (https://www.firebase.com/),那里有一些很棒的教程可以帮助你在你的 Angular 中实现真正的持久性APP,登录时有路由,登录时访问数据库中的自定义表/对象等。这是真正的交易。

如果您不想依赖 OAuth 的可能站点来登录(Facebook、github、persona 或 twitter),并且想要自定义电子邮件和地址,您可以直接使用 Firebase 执行此操作,创建帐户并删除它们等。

FIREBASE Angular 后端。

所以,正如他们在网站上所说的,Firebase 是一个强大的 API,可以实时存储和同步数据。

我不知道如何解决这个问题,所以我将从创建一个 Firebase 数据库开始。一旦我们创建它,在后端我们有几个选项,其中之一是安全性。

{
    "rules": {
        ".read": true,
        ".write": "auth != null"
    }
} 

在这里,如果我们阅读https://www.firebase.com/docs/security/security-rules.html 上的文档,我们将了解到我们可以为数据库中的每个“表”添加规则,因此我们可以拥有 3 个受保护的“表”对象和一些不受保护的对象。

我们可以根据用户,根据不同的规则保护表,无论是否登录,我们也有规则的继承等,请阅读那里的文档,真的很不错。

现在,要使这些规则生效,我们需要启用 Firebase 简单登录并从 Facebook、Twitter、Github、Persona、Email&Password 和 Anonymous 中选择所需的登录方式。

对于一个真正的应用程序,我们需要将信息写入数据库,同时作为匿名(用户会话等)和记录(使用上述任一选项)来存储和读取信息。

我,我想走捷径并进行 Facebook 身份验证,阅读那里的文档我制作了一个快速的 Facebook 应用程序,在 Facebook 应用程序的设置中,我将 Firebase 的后端 https://www.dropbox.com/s/xcd4b8tty1nlbm5/Screenshot%202014-01-22%2013.51.26.png

这提供了一个临时链接,用于登录 Facebook 并有权访问如果规则为 auth !=null 否则将被锁定的“表格”。


现在,进入 Angular 后端。

Firebase 提供了一个库供我们放入我们的应用程序,以及一个 SimpleLogin 库,对于 Angular,还有一个名为 AngularFire 的工厂服务。

就我而言,我使用连接到我的数据库的使用方法创建了本地 firebaseService:

angular.module('firebaseService', ['firebase'])
  .service('firebaseService', function ($firebase, $rootScope) {

    //Input data in Firebase
    var URL = "https://glowing-fire-xxxx.firebaseio.com";
    var tellFirebase = function(ID, JSON) {
      users = $firebase(new Firebase(URL + '/' + ID));
      users.details = JSON;
      users.$save('details');
    };

    return {
      addUser: function(ID, JSON) {
        tellFirebase(ID, JSON);
        if ($rootScope.debugStatus === true) {
          console.log('Firebase Service .addUSer Called');
        }
      },
      getUser: function(ID) {
        if ($rootScope.debugStatus === true) {
          console.log('Firebase Service .getUser Called');
        }
      }
    };
  }) 

我们从这里开始读/写,在控制器的页面上我有这个:

值得注意的是,我有一个中间件服务 (storageManagement),我在其中切换 Firebase 和 MongoDB,以避免混淆。

.controller( 'SomeCtrl', function SomeController( $scope, storageManagement, $firebase, $firebaseSimpleLogin ) { 
     /*===========================
     * ==== FIREBASE LOGIN
     * ===========================*/

    var URL = "https://glowing-fire-XXXXX.firebaseio.com";
    var users = new Firebase(URL);

    $scope.auth = $firebaseSimpleLogin(users, function(error, user){});

    if ($scope.auth.user == null) {
      //$scope.auth.$login('facebook');
    }

    console.log($scope.auth);

    //$scope.auth.$logout('facebook');


    $scope.doLogin = function() {
      console.log($scope.facebookemail);
      console.log($scope.facebookpassword);

      $scope.auth.$login('facebook');

      $scope.$on("$firebaseSimpleLogin:login", function(evt, user) {
        storageManagement.runFirebase();
      });

      /* example of logging in while asking access to permissions like email, user_list, friends_list etc.
       * auth.$login('facebook', {
       rememberMe: true,
       scope: 'email,user_likes'
       });*/
    };
    $scope.doLogout = function() {
      $scope.auth.$logout();
    };
});

我正在将 $firebase 服务添加到我的控制器中,并将 $firebaseSimpleLogin 服务添加到控制器中。

这里暴露了两个按钮,登录/注销,从 Facebook 弹出 OAuth 窗口,我认为您不需要通过电子邮件/密码设置进行此操作,为了全面了解,请阅读完整文档在火力基地。

所以,一旦我们登录,我们可以访问规则中描述的表格,如果我们选择电子邮件/密码,实际上即使对于 Facebook 或其他方法,我们也可以为某些 IDENTITIES 分配某些规则,因此您可以有一个 ADMIN 表,您可以在其中保存在页面加载时读取的设置以应用您想要的任何内容。

现在,有了路由,我们可以检查 $scope.auth 的状态,如果我们把它放在 $rootScope 中,并在去路由时检查状态,如果状态检查,我们会到达那个路由并且它填充数据库中的内容,否则,即使有人破解了通往该路线的方法,它也不会看到任何内容,因为没有权限为未经授权/错误的电子邮件用户读取该表。

这大致基于这篇文章,http://www.ng-newsletter.com/posts/back-end-with-firebase.html……我很难改变那个人在那里写的想法,但是,在一整天之后,阅读文档(并设置中间件,请注意)从 Firebase 我想通了,它可以工作。

与数据库的连接像一个大对象一样暴露出来,您可以在其中执行任何您想要的操作。


这不是最完整的解释,但它应该能让你在制作一些很棒的东西的道路上做得很好:D

【讨论】:

  • 你能在 Angular 后端部分更进一步吗?
  • 当然,今晚下班后我会加一个更大的描述。
  • 我改变了主意,现在写下描述。请享用!如果有问题,请纠正我。
  • 解释得更好。如果我做对了,您的客户(角度)通过自动生成的服务直接与 firebase 对话?没有节点后端之类的?将客户端直接绑定到数据库,甚至通过服务,对于可扩展性来说似乎是一个坏点,因为关注点分离和互操作性有点搞砸了?
  • 阅读一点 Firebase 的文档,它是一个绑定,在声明主对象之后,您可以分离并调用您认为合适的交互逻辑。对于互操作性,它是相同的。说实话,我不是后端开发人员,但对我来说似乎足够了。
【解决方案2】:

我遇到的最好的例子是 angular-app。

它非常全面,可满足您的所有需求。它是由“用 AngularJS 掌握 Web 应用程序开发”这本书的作者之一撰写的。

https://github.com/angular-app/angular-app

来自 github 仓库:

AngularJS CRUD 应用程序演示 目的

这个想法是为了演示如何使用 AngularJS 编写一个典型的、非平凡的 CRUD 应用程序。为了在其最有利的环境中展示 AngularJS,我们已经着手编写一个简化的项目管理工具,支持使用 SCRUM 方法的团队。示例应用程序试图展示以下方面的最佳实践:文件夹结构、使用模块、测试、与 REST 后端通信、组织导航、解决安全问题(身份验证/授权)。

我们在邮件列表中使用和支持 AngularJS 的过程中学到了很多东西,并愿意分享我们的经验。

堆栈

持久性存储:MongoLab 上托管的 MongoDB 后端:Node.js 客户端上很棒的 AngularJS 基于 Twitter 引导的 CSS 构建

这是一个完整的项目,其构建系统专注于 AngularJS 应用程序,并与 AngularJS 社区中常用的其他工具紧密集成:

由 Grunt.js 提供支持 使用 Jasmine 语法编写的测试 测试由 Karma Test Runner 执行(与 Grunt.js 构建集成) 构建支持 JS、CSS 和 AngularJS 模板缩小 Twitter 的引导程序,将 LESS 模板处理集成到构建中 Travis-CI 集成

【讨论】:

    猜你喜欢
    • 2011-09-14
    • 2016-10-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-07-06
    • 1970-01-01
    • 2014-09-25
    • 2021-12-04
    相关资源
    最近更新 更多