久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

如何使用 MEAN 堆棧(MySQL、Express、Angular、Node)將數(shù)

2023-06-06 數(shù)據(jù)庫問題 html5模板網(wǎng)

how to insert data into database using MEAN stack (MySQL, Express, Angular, Node)(如何使用 MEAN 堆棧(MySQL、Express、Angular、Node)將數(shù)據(jù)插入數(shù)據(jù)庫)

本文介紹了如何使用 MEAN 堆棧(MySQL、Express、Angular、Node)將數(shù)據(jù)插入數(shù)據(jù)庫的處理方法，對大家解決問題具有一定的參考價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧！

問題描述

限時(shí)送ChatGPT賬號(hào)..

如何使用 MEAN 堆棧(MySQL、Express、Angular、Node)將數(shù)據(jù)插入數(shù)據(jù)庫?我在插入時(shí)遇到了問題.請幫我解決這個(gè)問題.這是我的代碼.我是 MEAN 的新手.

index.html

<頭><link rel="stylesheet" ><標(biāo)題>注冊頁面</title><身體><div class="container" ng-app="bookitnow" ng-controller="myCtrl"><h1>注冊</h1><form method="post"><div class="form-group"><input type="text" class="form-control" id="firstName" ng-model="fname" placeholder="First Name" required>

<div class="form-group"><input type="text" class="form-control" id="lastName" ng-model="lname" placeholder="Last Name" required>

<div class="form-group"><input type="email" class="form-control" id="email" ng-model="email" placeholder="Email Address" required>

<div class="form-group"><input type="text" class="form-control" id="phone" ng-model="phone" placeholder="Phone" required>

<button type="submit" class="btn btn-info" ng-click="submit()">提交</button></表單>

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

server.js

var express = require("express");var app = express();var bodyParser = require('body-parser');var mysql = require('mysql');var connection = mysql.createConnection({主機(jī):'本地主機(jī)'，用戶:'根'，密碼 : ''，數(shù)據(jù)庫:'bookitnow'});connection.connect(function(err) {如果(！錯(cuò)誤)console.log('數(shù)據(jù)庫已連接');別的console.log('數(shù)據(jù)庫連接錯(cuò)誤.');});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('收到請求:', 數(shù)據(jù));connection.query('INSERT INTO register SET ?', data, function(err,res){如果(錯(cuò)誤)拋出錯(cuò)誤；console.log('記錄插入');});app.listen(5500);console.log('你好，來自 server.js');

controller.js

var app = angular.module('bookitnow',[]);app.controller('myCtrl', function($scope,$http){$scope.submit = function() {變量數(shù)據(jù) = {fName : $scope.fname,lName : $scope.lname,電子郵件:$scope.email，電話:$scope.phone}};$http.post('/index.html', &scope.data).success(功能(數(shù)據(jù)，狀態(tài)，標(biāo)題，配置){$scope.result = 數(shù)據(jù)；console.log("插入成功")}).錯(cuò)誤(功能(數(shù)據(jù)，狀態(tài)，標(biāo)題，配置){$scope.result = "數(shù)據(jù):" + 狀態(tài)；});

解決方案

在您的 controller.js 中，嘗試以下操作，看看會(huì)發(fā)生什么.

var app = angular.module('bookitnow',[]);app.controller('myCtrl', function($scope, $http){$scope.submit = function() {變量數(shù)據(jù) = {fName : $scope.fname,lName : $scope.lname,電子郵件:$scope.email，電話:$scope.phone};$http.post('/index.html', 數(shù)據(jù)).then(功能(響應(yīng)){控制臺(tái)日志(響應(yīng))}，功能(響應(yīng)){控制臺(tái)日志(響應(yīng))});};});

How to insert data into database using MEAN stack (MySQL, Express, Angular, Node)? I am facing the problem at the time of insertion. Please help me to solve this. Here is my code. I'm newbie in MEAN.

index.html

<html ng-app="bookitnow">
<head>
    <link rel="stylesheet" >

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


                });

解決方案

In your controller.js, try the following and see what happens.

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

這篇關(guān)于如何使用 MEAN 堆棧(MySQL、Express、Angular、Node)將數(shù)據(jù)插入數(shù)據(jù)庫的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！

【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題，如果有圖片或者內(nèi)容侵犯了您的權(quán)益，請聯(lián)系我們刪除處理，感謝您的支持！

上一篇：如何在 Ionic 框架中使用 ngCordova s??qlite 服務(wù)和下一篇：角度錯(cuò)誤 - ReferenceError: $modal 未定義

相關(guān)文檔推薦

獲取所有產(chǎn)品、類別和元數(shù)據(jù)的 SQL 查詢 woocomm

SQL query to get all products, categories and meta data woocommerce/wordpress(獲取所有產(chǎn)品、類別和元數(shù)據(jù)的 SQL 查詢 woocommerce/wordpress)

如何在 WSL(Linux 的 Windows 子系統(tǒng))中使用 MySQL?

How to use MySQL in WSL (Windows Subsystem for Linux)?(如何在 WSL(Linux 的 Windows 子系統(tǒng))中使用 MySQL?)

任務(wù)計(jì)劃程序中的 PowerShell MySQL 備份腳本錯(cuò)誤

PowerShell MySQL Backup Script Error in Task Scheduler 0x00041301(任務(wù)計(jì)劃程序中的 PowerShell MySQL 備份腳本錯(cuò)誤 0x00041301)

將數(shù)據(jù)從 XML 文件導(dǎo)入 MySQL 數(shù)據(jù)庫

Import the data from the XML files into a MySQL database(將數(shù)據(jù)從 XML 文件導(dǎo)入 MySQL 數(shù)據(jù)庫)

在 Windows 7 32 位上安裝 Xampp.啟動(dòng)時(shí)的錯(cuò)誤

installed Xampp on Windows 7 32-bit. Errors when starting(在 Windows 7 32 位上安裝 Xampp.啟動(dòng)時(shí)的錯(cuò)誤)

Windows xampp 上的 Mysql 小寫表

Mysql lower case table on Windows xampp(Windows xampp 上的 Mysql 小寫表)

欄目導(dǎo)航

前端問題解決 Java問題 php問題 Python問題 C#/.NET問題 C/C++問題移動(dòng)開發(fā)問題數(shù)據(jù)庫問題