【问题标题】:how to insert data into database using MEAN stack (MySQL, Express, Angular, Node)如何使用 MEAN 堆栈(MySQL、Express、Angular、Node)将数据插入数据库
【发布时间】:2017-03-08 14:17:31
【问题描述】:

如何使用 MEAN 堆栈(MySQL、Express、Angular、Node)将数据插入数据库? 我在插入时遇到了问题。请帮我解决这个问题。这是我的代码。我是 MEAN 的新手。

index.html

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

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

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

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


                });

【问题讨论】:

  • 你在console.log('request received:', data);身上得到了什么?

标签: mysql angularjs node.js angularjs-directive mean-stack


【解决方案1】:

在您的 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
        }; 

        $http
            .post('/index.html', data)
            .then(function (response) {
                console.log(response)
            }, function(response){
                console.log(response)
            });
     };
});

【讨论】:

  • 我做了同样的事情,就像你说的...现在控制器显示错误:POST localhost:5500/index.html net::ERR_CONNECTION_REFUSED controller.js:17 failure...
  • 帮帮我我现在该怎么办?
  • 您确定您的服务器正在运行吗?
  • 是的,我确定。当我刷新浏览器服务器断开连接。下一步是什么?
  • 刚刚对代码进行了更改,忘记了最后一行的右括号。再次尝试使用它。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2013-12-24
  • 2018-10-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-01-11
相关资源
最近更新 更多