如何将数据从 AngularJS 前端传递到 Nodejs 后端？
Posted
技术标签:
【中文标题】如何将数据从 AngularJS 前端传递到 Nodejs 后端？【英文标题】：How to pass data from AngularJS frontend to Nodejs backend? 【发布时间】：2016-06-12 11:09:52 【问题描述】：我这里有一些 Angular 的 js 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="Scripts/angular.min.js"></script>
<body>
<div ng-app="">
<form>
Author:
<input type="text" ng-model="author">
<br>
<br> Title:
<input type="text" ng-model="title">
<br>
<br> Body:
<input type="author" ng-model="body">
<br>
<br>
<input type="submit" value="Submit">
</form>
</div>
</head>
</body>
</html>
这里还有带有 mysql 代码的 node js。我能够从此节点代码将数据传递到 MySQL DB。如何继续 Angular 到节点 js？我来自 php 背景。我应该能够将数据从 Angular js 表单发送到 MySQL 数据库。我可以从这里的节点代码向 MySQL 数据库发送数据。
var mysql = require('mysql');
var connection = mysql.createConnection(
host: 'localhost',
user: '',
password: '',
database: 'copedb'
);
connection.connect();
var cope =
author: 'XYZXYZ',
title: 'Testing Node',
body: 'Node JS'
;
var query = connection.query('insert into cope set ?', cope, function(err, result)
if (err)
console.error(err);
return;
console.error(result);
);
【问题讨论】：
我应该能够将数据从 Angular js 发送到 mysql 以角度检查 $http 服务docs.angularjs.org/api/ng/service/$http 【参考方案1】：无论如何我已经在这里写了实际的工作代码。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<form>
Author:
<input type="text" ng-model="data.author">
<br>
<br> Title:
<input type="text" ng-model="data.title">
<br>
<br> Body:
<input type="author" ng-model="data.body">
<br>
<br>
<input type="submit" value="Submit" ng-click="submit()">
</form>
</div>
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http)
$scope.data = ;
$scope.submit= function()
console.log('clicked submit');
$http(
url: 'http://localhost:8080/blah',
method: 'POST',
data: $scope.data
).then(function (httpResponse)
console.log('response:', httpResponse);
)
);
server.js
var express = require('express');
var bodyParser = require('body-parser');
var mysql = require('mysql');
var app = express();
app.use(bodyParser.json(limit: '50mb'));
app.use(express.static('public'));
var connection = mysql.createConnection(
host: 'localhost',
user: 'root',
password: '',
database: 'copedb'
);
connection.connect();
app.post('/blah', function(req, res, next)
var cope = req.body;
console.log('request received:', req.body);
var query = connection.query('insert into cope set ?', cope, function (err, result)
if (err)
console.error(err);
return res.send(err);
else
return res.send('Ok');
);
//res.send('received the data.');
);
app.listen(8080);
【讨论】：
【参考方案2】：它可以成为您入门的垫脚石：
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<form>
Author:
<input type="text" ng-model="author">
<br>
<br> Title:
<input type="text" ng-model="title">
<br>
<br> Body:
<input type="author" ng-model="body">
<br>
<br>
<input type="submit" value="Submit" ng-click="submit()">
</form>
</div>
</body>
Angular 代码 app.js
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
$scope.submit= function()
var data = $.param(
book: JSON.stringify(
author: $scope.author,
title : $scope.title,
body : $scope.body
)
);
$http.post("/api/book/", data).success(function(data, status)
console.log('Data posted successfully');
)
);
server.js - Nodejs
var express = require('express');
var mysql = require('mysql');
var app = express();
var connection = mysql.createConnection(
host: 'localhost',
user: '',
password: '',
database: 'copedb'
);
connection.connect();
app.post('/api/book', function(req, res, next)
var cope = req.body.params;
var query = connection.query('insert into cope set ?', cope, function(err, result)
if (err)
console.error(err);
return res.send(err);
else
return res.send('Ok');
);
app.listen(8080);
【讨论】：
谢谢。我的 sever.js 用红色下划线。我有放 server.js 文件的任何特定位置吗？我正在将 webstorm 与 nodejs express 项目一起使用。 server.js 是你程序的入口文件。我不知道 Webstorm。 mysql下划线-module未列出package.json 已修复 - ALT+Enter - 添加依赖项。 此代码是基本代码。我什至没有测试它。从中学习是件好事。从这个免费课程中学习 angularjs。 codeschool.com/courses/shaping-up-with-angular-js【参考方案3】：如何将数据从 AngularJS 前端传递到 Nodejs 后端的最简单答案
带有 html 的 AngularJs 代码
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<p>First Name: <input type="text" name="firstName" ng-model="firstName" required /></p>
<p>Lirst Name: <input type="text" name="lastName" ng-model="lastName" required /></p>
<button ng-click="SendData()">Submit</button>
<hr />
PostDataResponse
</div>
<script>
var app = angular.module("app",[]);
app.controller("myCtrl", function($scope,$http)
$scope.SendData = function()
var data =
fName : $scope.firstName,lName : $scope.lastName
$http.post('/postFormAngular', data)
.success(function (data, status, headers, config)
$scope.PostDataResponse = data;
)
.error(function(data, status, header, config)
$scope.PostDataResponse = "Data: " + status;
);
;
);
</script>
</body>
Nodejs 代码
var express = require('express');
var multer = require('multer');
var mime = require('mime');
var mysql = require('mysql');
var app = express();
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded( extended: true ));
app.use(bodyParser.json());
var connection = mysql.createConnection(
host : 'localhost',
user : 'root',
port : 3306,
password : '',
database : 'angular_db'
);
connection.connect(function(err)
if(!err)
console.log("Database is connected ... nn");
else
console.log("Error connecting database ... nn");
);
app.get('/angular_html.html', function(req, res)
res.sendFile(__dirname + '/' + 'angular_html.html');
console.log("----------------");
);
app.post("/postFormAngular", function (req, res)
console.log(req.body.fName);
res.send(req.body.fName);
);
app.listen(3000);
【讨论】：
【参考方案4】：首先，根据您的需要，使用 npm 模块的 Express/Restify 创建一个 RESTful 服务，然后再与您的 SQL 数据库对话。
一旦服务在服务器级别启动并运行，您现在就可以在客户端级别向服务器发送/接收数据了。
注意：使用 $resource 代替 AngularJS 的 $http 服务与服务器通信。
https://docs.angularjs.org/api/ngResource/service/$resource
【讨论】：
以上是关于如何将数据从 AngularJS 前端传递到 Nodejs 后端？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 REST 将数据从 AngularJS 发布到 Struts 2
如何将变量从 jQuery 传递到 AngularJs 函数