来自ExpressJS中angularjs控制器的未识别对象发布

时间:2018-08-03 18:12:34

标签: javascript angularjs express

我有用于管理员重定向到仪表板的登录页面项目。它使用expressjs作为服务器端,并使用angularjs作为客户端。

此客户端登录页面使用angularjs

//this is the angular controller that use for get the data from login form
    (function () {
        'usestrict';
    "the initialize angular module"
        angular.module("myAdmin",[]).controller('loginCtrl', function($scope, $http){
            $scope.login = function() {
                var userEmail = $scope.user.email;
                var userPassword = $scope.user.password;

                $http.post('/admin/',{useremail:userEmail, userpassword:userPassword});   
            }   
        })
    })();

这是登录页面html

<!DOCTYPE html>
<html lang="en" >
  <head>
    <title>Awi Admin</title>
    <meta charset="utf-8">
    <meta name="description" content="Aplikasi AWI Realtime Lelang Menggunakan Framework ExpressJS dan Realtime Database Firebase">
    <meta name="author" content="Muhammad Abubakar Siddiq - MAS Abbe">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel='stylesheet' href='/stylesheets/login.css'/>
    <link rel="stylesheet" type="text/css" href="/stylesheets/font-awesome.min.css">>
  </head>
  <body ng-app="myAdmin">
    <div class="container">
      <div class="profile">
          <button class="profile__avatar" id="btn_avatar">
            <img src="/images/avatar.png" alt="Avatar" />
          </button>
        <div class="profile__form">
          <div class="profile__fields">
          <h3 class="text-center">Welcome Admin Lelang</h3>
            <form name="login-form" role="form" ng-controller="loginCtrl" novalidate>
              <div class="fields">
                <input type="text" class="input" placeholder="Username" ng-model="user.email" required/>
                <span style="color:red" ng-show="login-form.email.$dirty && login-form.user.$invalid">
                  <span ng-show="login-form.email.$error.required">Username is required.</span>
                </span>
              </div>
              <div class="fields">
                <input type="password" class="input" required-pattern=.*\S.* placeholder="password" ng-model="user.password"/>
                <span style="color:red" ng-show="login-form.password.$dirty && login-form.user.$invalid">
                  <span ng-show="login-form.password.$error.required">Password is required.</span>
                </span>
              </div>
              <div class="alert alert-warning" ng-show="login-form.email.$error.email">
                <em class="fa fa-lg fa-warning">&nbsp;</em>Peringatan, username atau password salah
              </div>
              <div class="profile__footer">
                <center>
                  <button class="btn" id="btn-submit" ng-click="login()">LOG IN</button>
                </center>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <script>
      document.getElementById('btn_avatar').addEventListener('click', 
        function () {
          [].map.call(document.querySelectorAll('.profile'),
          function(el) {
            el.classList.toggle('profile--open');
          });
        }
      );
    </script>
    <script type="text/javascript" src = "/javascripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src = "/javascripts/bootstraps/bootstrap.min.js"></script>    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-resource.min.js"></script>
    <script type="text/javascript" src = "/javascripts/login.js"></script>//==> this is the function for login that call the angular controller
  </body>
</html>

和此index.js作为服务器端expressjs

    const functions = require('firebase-functions');
    const admin     = require('firebase-admin');
    const express   = require('express');
    const engines   = require('consolidate');
    const path      = require('path');
    const session   = require('express-session');
    const bodyParser = require('body-parser');

    const app       = express();

    const firebaseApp   = admin.initializeApp(
        functions.config().admin
    );

    const HTTP_SERVER_ERROR = 500;

    app.engine('hbs', engines.handlebars);
    app.set('views', './views');
    app.set('view engine', 'hbs');

    app.use(bodyParser.json()); // for parsing application/json
    app.use(bodyParser.urlencoded({ extended: true })); // for parsing

    app.get('/admin/', (req, res)=>{
        res.set('Cache-Control', 'public, max-age=300, s-maxage=600');
        res.render('index')
    });
//this is the functions post for server side express
    app.post('/admin/', (req, res)=>{
        console.log('post login'+req.body.userEmail, req.body.userPassword);
        admin.auth().signInWithEmailAndPassword(req.body.userEmail, req.body.userPassword)
        .then(function (user) {
            res.render('/admin/home');
            console.log("success login admin".user.uid);
        })
        .catch(function(err){
            res.send("fail");
            console.log("Error while executing firebase.auth() ",err);
        });
    });
exports.app = functions.https.onRequest(app);

这是我在github project中的项目

这个项目的我的问题是从角度控制器的post函数到expressjs post渲染的数据被检测为未识别。 谁能告诉我原因是什么?以及如何解决这个问题。 这个功能是不可以运行firebase auth()函数的。

2 个答案:

答案 0 :(得分:1)

尝试方式,

Model

答案 1 :(得分:0)

这是角度控制器

(function () {
    'usestrict';
"the initialize angular module"
    angular.module("myAdmin",[]).controller('loginCtrl', function($scope, $http){
        $scope.login = function() {
            var userEmail = $scope.user.email;
            var userPassword = $scope.user.password;
            var myObject = {useremail:userEmail, userpassword:userPassword}

            $http({
                method: 'POST',
                url   : '/admin/',
                data  : JSON.stringify(myObject)
            });   
        }   
    })
})();

这是expressjs函数

   app.post('/admin/', (req, res)=>{
        console.log("####Success");
        console.log('post login '+req.body.useremail, req.body.userpassword);
        admin.auth().signInWithEmailAndPassword(req.body.useremail, req.body.userpassword)
        .then(function (user) {
            res.render('/admin/home');
            console.log("success login admin".user.uid);
        })
        .catch(function(err){
            res.send("fail");
            console.log("Error while executing firebase.auth() ",err);
        });
    });

咨询远程桌面后,最终确定