将函数从后端节点传递到前端角度

时间:2017-06-21 12:11:06

标签: javascript angularjs node.js api post

简介

我需要验证电子邮件地址是否在API中,如果是这样,允许用户输入某个部分,如果他们不是用户则不能。

我已经构建了后端节点代码来验证这一点。

我在我的后端(node, express)中构建了3个函数。

第一个

从前端表单(Angular)帖子获取数据,然后使用promise使值可用于第三个函数。

第二个

此函数验证并获取我的API密钥,并使用promise使第3个函数可以使用此函数。

第三次

此功能使用来自第一个(电子邮件地址)的数据和来自第二个的API密钥并发布到API端点,如果API上存在电子邮件,则通过,如果没有失败。

过程

用户在前端Angular上输入一封电子邮件,点击login然后将此电子邮件传递给三个后端函数,然后在第三个函数中传递或失败。

如果通过,我希望将$scope.EmailTrue= true;传递给我的Angular控制器,以便我可以在我的前端ng-hideng-show按钮。

我在考虑可能是一个简单的帖子到我的前端,但我是角度和节点的新手,所以我不知道是否有不同的方式这样做。

节点后端(3个功能)

//---------------------------------- Grab the packages we need and set variables ---------------------------------------
//----------------------------------------------------------------------------------------------------------------------
var express = require('express');
var request = require('request');
var nodePardot = require('node-pardot');
var bodyParser = require('body-parser');
var rp = require('request-promise');
var app = express();
var port = process.env.PORT || 8080;

// Credential's for pardot API
var password = 'password';
var userkey = 'userkey';
var emailAdmin = 'admin@admin.com';

// Start the server
app.listen(port);
app.use(bodyParser.json()); // support json encoded bodies
app.use(bodyParser.urlencoded({extended: true})); // support encoded bodies
console.log('Test server started! At http://localhost:' + port); // Confirms server start

//---------------------------------- Function to get front end form posted data LOGIN form ----------------------------------------
//----------------------------------------------------------------------------------------------------------------------
var firstFunction = function () {
    return new Promise (function (resolve) {
        setTimeout(function () {
            app.post('/back-end/test', function (req, res) {
                console.log(req.body);
                var login = req.body.LoginEmail;
                res.send(login);
                resolve({
                    data_login_email: login
                });
            });
            console.error("First done");
        }, 2000);
    });
};

//---------------------------------- Function to get API key from Pardot (AUTHENTICATION) ------------------------------
//----------------------------------------------------------------------------------------------------------------------
var secondFunction = function () {
    return new Promise (function (resolve) {
        setTimeout(function () {
            nodePardot.PardotAPI({
                userKey: userkey,
                email: emailAdmin,
                password: password,
                DEBUG: false
            }, function (err, client) {
                if (err) {
                    // Authentication failed
                    console.error("Authentication Failed", err);
                } else {
                    // Authentication successful
                    var api_key = client.apiKey;
                    console.log("Authentication successful !", api_key);
                    resolve({data_api: api_key});
                }
            });
            console.error("Second done");
        }, 2000);
    });
};

//---------------------------------- Function to post data to Pardot ---------------------------------------------------
// ---------------------------------------------------------------------------------------------------------------------

function thirdFunction(result) {
    return new Promise (function () {
        setTimeout(function () {
            var headers = {
                'User-Agent': 'Super Agent/0.0.1',
                'Content-Type': 'application/x-www-form-urlencoded'
            };
// Configure the request
            var api = result[1].data_api;
            var login_email = result[0].data_login_email;
            var options = {
                url: 'https://pi.pardot.com/api/prospect/version/4/do/read',
                method: 'POST',
                headers: headers,
                form: {
                    'email': login_email,
                    'user_key': userkey,
                    'api_key': api
                },
                json: true // Automatically stringifies the body to JSON
            };

// Start the request
            rp(options)
                .then(function (parsedBody) {
                    console.error("pass");
                    // $scope.FormLogin = true;
                })
                .catch(function (err) {
                    console.error("fail");
                });
            console.error("Third done");
        }, 3000);
    }
    );
}

// sequence of functions
Promise.all([firstFunction(), secondFunction()])
    .then(thirdFunction);

角度控制器

FirstModule.controller('LoginController', function TestController($scope, $http) {
    $scope.LoginForm = function () {
        var data = {
            LoginEmail: $scope.formData.LoginEmail
        };

    $http({
        url: 'http://localhost:8080/back-end/test',
        method: "POST",
        data: data,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function (data) {
        $scope.formData = data; // assign  $scope.persons here as promise is resolved here
    }).error(function (data, status) {
        $scope.formData = status;
    });

}
});

角度视图

<form class="col-sm-8 col-sm-offset-2">
    <div>
        <div class="form-group">
            <label>Email*</label>
            <input type="email" class="form-control col-sm-12" name="LoginEmail" placeholder="Enter valid E-mail">
        </div>

        <button class=""
                ng-submit="LoginForm()">
            Login<span class=""></span>
        </button>
    </div>
</form>

1 个答案:

答案 0 :(得分:0)

在Angular中,您可以使用$http服务发出http请求,然后处理响应。

你可以这样做:

$http.post('/login', {
    email: 'user@email.com',
    password: 'pwd'
}).then(response => {
    // use http status code
    if (response.status === 403) {
        alert('forbidden')'
    } else {
        // do something
    }
})