mysql - 使用 MySQL 数据库构建 Angular 登录系统

Question

我发现了很多关于使用外部 API 等的 Angular 身份验证系统的教程。我只想让用户登录到我的用户数据库，就像在 php 中一样。我将如何去做这件事？所有的 Controller /服务和指令目前都在一个文件中，因为我还不知道如何将它们分开。

对于一个允许用户发布项目并且可以为这些项目雇用此类和其他用户组的网站，您建议使用什么框架？我正在寻找像 Angular 这样感觉不错的东西。有什么建议吗？

这是我目前所拥有的:

登录.html:

<div ng-controller="loginCtrl">
    <h3 style="text-align:center;">{{moduleTitle}}</h3>
    <form class="form-signin" name="loginForm" role="form">
        <label for="inputEmail" class="sr-only">Email</label>
        <input type="text" id="inputEmail" class="form-control" placeholder="Email address" ng-model="data.email">
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" ng-model="data.password">
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button type="submit" class="btn btn-lg btn-primary btn-block" ng-click="login()" data-ng-disabled="loginForm.$invalid">Login</button>
    </form>
</div>

应用程序.js:

var app = angular.module('myApp', [
    'ngRoute'
]);

app.config(['$routeProvider', 
    function($routeProvider) {
        $routeProvider.
        when('/', {
            templateUrl: 'views/login.html',
            controller: 'loginCtrl',
            title: 'Login'
        }).
        when('/signup', {
            templateUrl: 'views/signup.html',
            controller: 'signupCtrl',
            title: 'SignUp'
        }).
        when('/dashboard', {
            templateUrl: 'views/dashboard.html',
            controller: 'dashCtrl',
            title: 'Dashboard'
        }).
        otherwise({ redirectTo: '/404', templateUrl:'views/404.html' })
}]);

app.controller('loginCtrl', function($scope, AuthService, $route, $rootScope) {
    $scope.data = {};

    $rootScope.pageTitle = $route.current.title;
    $scope.moduleTitle = "Login to Firelance";

    $scope.login = function() {
        AuthService.loginUser(
            $scope.data.email, 
            $scope.data.password
        ).success(function(data) {
            alert('Success');
        }).error(function(data) {
            var alertPopup = alert(
                'Please check your credentials!'
            );
        });
    }
})

app.service('AuthService', function($q) {
    return {
        loginUser: function(name, pw) {
            var deferred = $q.defer();
            var promise = deferred.promise;

            if (name == 'savisaar2' && pw == 'naf44nss') {
                deferred.resolve('Welcome ' + name + '!');
            } else {
                deferred.reject('Wrong credentials.');
            }
            promise.success = function(fn) {
                promise.then(fn);
                return promise;
            }
            promise.error = function(fn) {
                promise.then(null, fn);
                return promise;
            }
            return promise;
        }
    }
})

Answer 1

由于您在这里使用 AngularJS 作为前端框架，您将不得不使用某种形式的 API 而不是直接访问您的数据库。我实际上不知道浏览器中有任何 JavaScript MySQL DBAL，最重要的是，如果有/曾经有一个，您必须以纯文本形式存储您的数据库凭据，并将它们作为一部分发送给使用您的应用程序的每个人应用程序(不是一个好主意!)。最重要的是，您的数据库必须对外部访问开放(这也不是一个好主意!)。

Controller 操纵 View 。您在作用域上分配方法和属性，它们在 View 中可用。然后，您可以在 View 中使用这些方法和属性并对其进行操作。

指令是可重用的 block 。您可以在其中放入特定的逻辑位，让它们与服务交互，并且它们的工作方式与上述 View 和 Controller 类似。

服务是真正的业务逻辑应该去的地方，你应该在你的 Controller /指令中调用服务来做事情。例如，您可能有一个服务是 API 客户端，另一个服务使用该 API 客户端来处理该 API 的某个区域，或者可能有一个服务来处理数据以显示在图表中，等等。这个想法是，服务也是可重用的、可测试的和可模拟的。如果将逻辑放入 Controller 中，它就不容易重用。