2016-10-14 15 views
0

私は初心者です。私はフロントエンドからmysqlデータベースにデータを挿入できません。 私は挿入時に問題に直面しています。 controller.jsまたはindex.htmlまたはserver.jsにあるかどうかにかかわらず、コーディングエラーをトレースできません。 これを解決するのを手伝ってください。nodejsを使用してmysqlデータベースにデータを挿入するangularjs

私server.jsコード

var express = require("express"); 
var app = express(); 
var bodyParser = require('body-parser'); 
var mysql  = require('mysql'); 
var connection = mysql.createConnection({ 
    host  : 'localhost', 
    user  : 'root', 
    password : '', 
    database : 'bookitnow' 
}); 

connection.connect(function(err) { 
    if (!err) 
    console.log('Database is connected'); 
    else 
    console.log('DB connection error.'); 
}); 

app.use(express.static(__dirname + '/public')); 

app.get('/index.html', function(req, res){ 
    res.sendFile(__dirname + '/public' + 'index.html'); 
}); 


app.post('/index.html', function(req, res, next) { 
    var data = req.body; 
    console.log('request received:', data); 

    connection.query('INSERT INTO register SET ?', data, function(err,res){ 
     if(err) throw err; 
     console.log('record inserted'); 
    }); 

app.listen(5500); 

console.log('Hi from server.js'); 

私controller.jsコード

var app = angular.module('bookitnow',[]); 
     app.controller('myCtrl', function($scope,$http){ 
     $scope.submit = function() { 

      var data = { 
        fName : $scope.fname, 
        lName : $scope.lname, 
        email : $scope.email, 
        phone : $scope.phone, 
        password: $scope.pswd, 
        confirm : $scope.confirm 
       } 
      }; 

      $http.post('/index.html', &scope.data) 
      .success(function (data, status, headers, config) { 
        $scope.result = data; 
        console.log("inserted successfully") 
       }) 
       .error(function(data, status, header, config){ 
        $scope.result = "Data: " + status; 


       }); 

      $scope.add.push(data); 
      $scope.addNewUser = { 
        fname:"", 
        lname:"", 
        email:"", 
        phone:"", 
        password:"", 
        confirm:"" 
     }; 
}); 

私のindex.htmlコード

<html ng-app="bookitnow"> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="./css/style.css"> 

    <title> Registration Page </title> 
</head> 
<body> 
<div class="container" ng-app="bookitnow" ng-controller="myCtrl"> 
    <h1>Register</h1> 
    <form method="post"> 
    <div class="form-group"> 
     <input type="text" class="form-control" id="firstName" ng-model="fname" placeholder="First Name" required> 
    </div> 
    <div class="form-group"> 
     <input type="text" class="form-control" id="lastName" ng-model="lname" placeholder="Last Name" required> 
    </div> 
    <div class="form-group"> 
     <input type="email" class="form-control" id="email" ng-model="email" placeholder="Email Address" required> 
    </div> 
    <div class="form-group"> 
     <input type="text" class="form-control" id="phone" ng-model="phone" placeholder="Phone" required> 
    </div> 
    <div class="form-group"> 
     <input type="password" class="form-control" id="pswd" ng-model="pswd" placeholder="Password" required> 
    </div> 
    <div class="form-group"> 
     <input type="password" class="form-control" id="confirm" ng-model="confirm" placeholder="Confirm Password" required> 
    </div> 
<button type="submit" class="btn btn-info" ng-click="submit()">Submit</button> 

</form> 
</div> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
<script src="controllers/controller.js"></script> 

</body> 
</html> 
+0

エラーは何ですか?あなたはここに投稿できますか? – abdulbarik

+0

メッセージに応答するブラウザ:できませんPOST/ –

答えて

0

あなたのルートは適切ではありません。

これは、この

$http.post('/', $scope.data) 
    .success(function(data, status, headers, config) { 
    $scope.result = data; 
    console.log("inserted successfully") 
    }) 
    .error(function(data, status, header, config) { 
    $scope.result = "Data: " + status; 
    }); 

のようなこの

app.get('/', function(req, res) {//remove index.html 
    res.sendFile(__dirname + '/public' + 'index.html'); 
}); 


app.post('/', function(req, res, next) {//remove index.html 
     var data = req.body; 
     console.log('request received:', data); 

     connection.query('INSERT INTO register SET ?', data, function(err, res) { 
     if (err) throw err; 
     console.log('record inserted'); 
     }); 

、クライアント側からの要求のようにサーバ側でのあなたのすべてのルート・ホープ、これを変更し

有効なルート

app.get('/index.html') 
ではありませんあなたのために働くでしょう

+0

$ http.post( '/'、&scope.data)を記述しました。 –

+0

ここで&は予期しないトークンです。 –

+0

あなたのルートバディを変更しました。残りのコードを確認できます – abdulbarik

関連する問題