ログインページ：クライアントからサーバーへの要求が2回送信されていますか？ Node.jsの、AngularJS、急行フレームワーク

Question

これは、クライアント側のAngularJSコードスニペットです：

<form name="login" ng-submit="login()"> 
    <div class="login" ng-app="loginPage" ng-controller="loginController"> 
     <input type="text" placeholder="username" ng-model="uname" name="userid"><br> 
     <input type="password" placeholder="password" ng-model="pword" name="pswrd"><br> 
     <!--<input type="button" ng-click="login();" onclick="check(this.form)" value="Login"/>--> 
     <button ng-click="login();">Login</button> 
    </div> 
</form> 

<script language="javascript"> 
    var app = angular.module('loginPage', []); 
    app.controller('loginController', function($scope, $http, $window) { 
     console.log("inside controller"); 
     $scope.login = function() { 
      console.log("inside the login function"); 
      console.log($scope.uname); 

      var login_http = $http({ 
       method: 'POST', 
       url: '/login', 
       params: { username: $scope.uname, password: $scope.pword } 
      }).then(
        function (response) { 
         $window.alert('successfull!!'); 
         //alert('successfull ...'); 
        }, function (response) { 
         $window.alert('wrong username/password'); 
         //alert('wrong username/password ... '); 
        } 
      ) 
     } 

これは、サーバー側のNode.jsコードです：私はWebStormで働いています

connection.connect(); 

/* GET home page. */ 
router.get('/', function(req, res, next) { 
    res.sendFile(path.join(__dirname, '../', 'views', 'login.html')); 
}); 
router.post('/login', function(req,res) 
{ 

    console.log("Username:"+req.query.username); 
    console.log("Password:"+req.query.password); 

    var user = req.query.username; 
    var pass = req.query.password 

    connection.query("select * from user where login_name = ?", user, function(err, rows, fields) { 
    if (!err){ 
     if(user==rows[0].login_name && pass==rows[0].pass){ 
      console.log("success"); 
      res.sendStatus(200); 
      //res.sendFile(path.join(__dirname, '../', 'views', 'team_list.html')); 
     } 
    } 
    else{ 
     console.log('Error while performing Query.', err); 
     res.sendStatus(401); 
    } 

localhost：8000を聞いていると言うapp.jsを実行します。ブラウザでlocalhost：8000に行きます。 usernameのテストを入力し、パスワードをテストします（私はすでにSQLデータベースにこれを持っています）。それは "成功！"一方

、私のコンソールwebstormに（私はapp.jsを実行している間に）、これは言う：

Server listening on port 8000 
GET/200 10.853 ms - 5260 
Username:test 
Password:test 
success 
POST /login?password=test&username=test 200 12.559 ms - 2 
GET /?userid=test&pswrd=test 200 10.027 ms - 5260 

そして時には、この言う：

Server listening on port 8000 
GET/304 16.586 ms - - 
Username:test 
Password:test 
success 
POST /login?password=test&username=test 200 12.778 ms - 2 
GET /?userid=test&pswrd=test 304 9.742 ms - - 

が

時々、この氏は述べていますこれは、リクエストが2回送信されていると思います。理想的には、GETではなくPOSTのみを実行するようにコンソールしたいと思うでしょう。これをどのように修正するのですか？私はかなり間違いがangularJSコードにあると確信しています、そして、私はng-submitと何か間違っています。

<div class="login" ng-app="loginPage" ng-controller="loginController"> 
    <!--name="login" ng-submit="login()"--> 

     <input type="text" placeholder="username" ng-model="uname" name="userid"><br> 
     <input type="password" placeholder="password" ng-model="pword" name="pswrd"><br> 
     <input type="submit" ng-click="login()" value="login"/> 
     <!--button ng-click="login();">Login</button--> 
</div> 

し、コンソールでこれを得た：私はdiv要素にフォームを変更しようとした

@MichaelNakayama

Server listening on port 8000 
GET/304 9.312 ms - - 
Username:test 
Password:test 
C:\Users\dagarw\WebstormProjects\GP-01_DEV\node_modules\mysql\lib\protocol\Parser.js: 
78 
     throw err; // Rethrow non-MySQL errors 
     ^

TypeError: Cannot read property 'login_name' of undefined 
    at Query._callback (C:\Users\dagarw\WebstormProjects\GP-01_DEV\routes\index.js:30 
:25) 
    at Query.Sequence.end (C:\Users\dagarw\WebstormProjects\GP-01_DEV\node_modules\my 
sql\lib\protocol\sequences\Sequence.js:85:24) 
    at Query._handleFinalResultPacket (C:\Users\dagarw\WebstormProjects\GP-01_DEV\nod 
e_modules\mysql\lib\protocol\sequences\Query.js:144:8) 
    at Query.EofPacket (C:\Users\dagarw\WebstormProjects\GP-01_DEV\node_modules\mysql 
\lib\protocol\sequences\Query.js:128:8) 
    at Protocol._parsePacket (C:\Users\dagarw\WebstormProjects\GP-01_DEV\node_modules 
\mysql\lib\protocol\Protocol.js:280:23) 
    at Parser.write (C:\Users\dagarw\WebstormProjects\GP-01_DEV\node_modules\mysql\li 
b\protocol\Parser.js:74:12) 
    at Protocol.write (C:\Users\dagarw\WebstormProjects\GP-01_DEV\node_modules\mysql\ 
lib\protocol\Protocol.js:39:16) 
    at Socket.<anonymous> (C:\Users\dagarw\WebstormProjects\GP-01_DEV\node_modules\my 
sql\lib\Connection.js:109:28) 
    at emitOne (events.js:77:13) 
    at Socket.emit (events.js:169:7) 

Answer 1

変更行：

<button ng-click="login();">Login</button>

あなたのHTMLに

<button type="submit">Login</button>

<form name="login" ng-submit="login()">