使用nodejs angularjs将数据插入mysql数据库答案

【问题标题】：inserting data into mysql database using nodejs angularjs使用nodejs angularjs将数据插入mysql数据库
【发布时间】：2016-10-14 17:50:24
【问题描述】：

我是新手。我无法将数据从前端插入 mysql 数据库。我在插入时遇到了问题。无论是在 controller.js、index.html 还是 server.js 中，我都无法追踪我的编码错误。请帮我解决这个问题。

我的 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>

【问题讨论】：

错误是什么？你可以在这里发帖吗？
浏览器响应消息：无法 POST /

标签： angularjs node.js

【解决方案1】：

你的路线不对。

这不是一条有效的路线

app.get('/index.html')

像这样在服务器端更改所有路由

 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');
      });

像这样来自客户端的请求

 $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;
   });

希望这对你有用

【讨论】：

你提到了 $http.post('/', & scope.data)。
我刚刚改变了你的路线哥们你可以检查其余的代码
错误：angular.js:12011POST localhost:5500404（未找到）（匿名函数）@angular.js:12011n @angular.js:11776（匿名函数）@angular.js:11571（匿名函数) @ angular.js:16383$eval @ angular.js:17682$digest @ angular.js:17495$apply @ angular.js:17790(匿名函数) @ angular.js:1761invoke @ angular.js:4718c @ angular.js:1759Bc @ angular.js:1779fe @ angular.js:1664(匿名函数) @ angular.js:31763b @ angular.js:3207Sf @ angular.js:3497d @ angular.js:3485
将您请求的 URL 与服务器 URL 匹配。有些东西不匹配