我已经搜索了一个明确的答案，但似乎找不到。 我是编程的“新手”，至少在涉及AngularJS和NodeJS（我因学校而熟悉的基本语言，如HTML，CSS和纯JS）时。
我希望能够使用NodeJS从MySQL数据库获取数据，然后将该数据发送到其中包含AngularJS的HTML页面。
在创建此连接之前，我首先使用AngularJS直接从$ scope检索数据，并能够通过html上的下拉列表将其绑定。不错
然后，在NodeJS中，我建立了与MySQL数据库的连接（此处在Workbench上运行），并能够从表中检索数据并将其显示在控制台上。很好。
但是AngularJS如何请求NodeJS从MySQL获取数据并将其发送回AngularJS？这是我做不到的：（
AngularJS代码：
<!DOCTYPE html>
<html>
<head>
<title>HumbleMoney</title>
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> // AngularJS file
</head>
<body ng-app="clientesApp" ng-controller="clientesCtrl"> // Start App and Controller
<p>Selecionar um registo:</p>
<select ng-model="clienteSelecionado" ng-options="x.nome for x in clientes"></select> // dropdown that should get the "nome" value of each record in $scope.clientes
<table> // table with 2 columns that get the "nome" and "morada" values from the selected item on the above dropdown
<tr>
<td>{{clienteSelecionado.nome}}</td>
<td>{{clienteSelecionado.morada}}</td>
</tr>
</table>
<script>
var app = angular.module('clientesApp', []);
app.controller('clientesCtrl', function($scope, $http) {
$http.get('NodeJS/clientes.js') //make a GET request on the NodeJS file
.then(function(data) {
$scope.clientes = data; //make the $scope.clientes variable have the data retrieved, right?
})
});
</script>
</script>
</body>
</html>
NodeJS代码：
var express = require('express');
var app = express();
app.get('/', function (req, res){ //is this how you handle GET requests to this file?
var mysql = require('mysql'); //MySQL connection info
var conexao = mysql.createConnection({
host:"localhost",
user:"root",
password:"",
database:"mydb"
});
conexao.connect(function(erro) { //MySQL connection
if (erro) {
res.send({erro})
} else {
var sql = "SELECT nome, morada FROM clientes";
conexao.query(sql, function(erro, data) {
if (erro) {
res.send({erro})
} else {
res.send({data}); //this should bind the result from the MySQL query into "res" and send it back to the requester, right?
}
});
}
});
conexao.end();
});
这里有。我希望有人能指出我正确的方向。 非常感谢，并祝您编程愉快！ ：D
答案 0 :(得分：0)
因此，您想学习如何使用AngularJS，NodeJS和MySQL。非常好。 AngularJS和NodeJS都使用JavaScript。 AngularJS是100％JavaScript。只有很少的螺母和螺栓必须配合在一起。 AngularJS专注于前端，而NodeJS专注于后端。 MySQL用于数据库管理。像MVC一样，您仅需使用一些技巧就可以使代码工作并变得健壮。您可以通过多种方式来实施项目。其中之一是以下内容：
完成上述步骤后，我们就可以开始编码了。在您的后端代码中，您需要设置监听端口。您还需要配置默认目录。在前端，您可以使用数据绑定将数据模型连接到视图。例如范围是应用程序控制器和视图之间的粘合剂。以模块化方式构建应用程序。我们可以为应用程序使用许多构建基块。列表是无止境的，所以让我们开始吧……双卷曲表达式{{ }}用于观察，注册侦听器方法和更新视图。
前端：
后端：
db / mydb2.sql
node_modules
index.js
package.json
数据库：
要启动您的项目，可以在命令提示符下使用：node index.js或npm start。该应用程序将在本地主机上运行。使用浏览器查看项目。即http://localhost:8000/
index.js
//////////////////////
//
// index.js
//
///////////////////////
console.log("Start...");
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mysql = require('mysql');
var now = new Date();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(__dirname+'/app'));
var conexao = mysql.createConnection({
host: "localhost",
user: "jspro2",
password: "jspro32",
database: "mydb2"
});
conexao.connect(function(err){
if(err){
console.log(info()+" "+err);
}
else
{
console.log(info()+" connected...");
}
});
function info()
{
now = new Date();
return now.getTime();
}
app.set('port', (process.env.PORT || 8000));
app.get('/', function(req, res){
console.log(info()+" page request.... ");
res.sendFile(__dirname +'/'+'app/view/index.html');
});
app.get('/clientes', function(req, res){
console.log(info()+" clientes request.... ");
var sql = "SELECT * FROM CLIENTES2";
conexao.query(sql, function(err, result, fields){
if(err){
console.log(info()+" "+err);
res.send(info()+": dbErr...");
}
else
{
console.log(info()+" "+result);
res.send(result);
}
});
});
app.post('/clientPost', function(req, res){
var data = req.body;
var dnome = data.nome;
var dmorada = data.morada;
var sql = "INSERT INTO CLIENTES2 (nome,morada) VALUES(?, ?)";
conexao.query(sql, [dnome, dmorada], function(err, result){
if(err){
console.log(info()+":02 "+err);
res.send(info()+": dbErr02...");
}
else
{
console.log(info()+" "+ result);
res.send(result);
}
});
});
var dport = app.get('port');
app.listen(dport, function(){
console.log(info()+" "+" app is running at http://localhost:"+dport+"/");
console.log(" Hit CRTL-C to stop the node server. ");
});
//
//
app.js
/////////////////////////
//
// app.js
//
/////////////////////////////////
//alert("start...");
var now = new Date();
//Define the clientesApp module.
var clientesApp = angular.module('clientesApp', []);
//Define the clientesCtrl controller.
clientesApp.controller('clientesCtrl', function clientsList($scope, $http){
$scope.clientes = [
{
nome: 'Marc',
morada: '123 West Parade, Nome'
},
{
nome: 'Jean',
morada: '432 East Cresent, Lisboa'
}
];
$scope.feedback = now;
$scope.listView = function(){
//alert("View");
$http.get('/clientes').then(function(data){
$scope.clientes = data.data;
$scope.feedback = data;
});
};
$scope.listSubmit = function(){
//alert("Submit..");
var listData = {
nome: $scope.nome,
morada: $scope.morada
};
//alert(listData.nome);
$http.post('/clientPost', listData).then(function(data){
$scope.feedback = data;
});
};
});
//alert(now);
//
//
index.html
<!DOCTYPE html>
<!--
index.html
-->
<html lang="en">
<head>
<title>DemoJSPro</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-app="clientesApp">
<h1>AngularJS Demo using NodeJS and MySQL.</h1>
<div ng-controller="clientesCtrl">
<hr>
<div>{{ feedback }}</div>
<hr>
<div>
<br>
Nome:
<input type="text" ng-model="nome">
<br>
Morada:
<input type="text" ng-model="morada">
<br>
<input type="button" value="OK" ng-click="listSubmit()">
<br>
</div>
<div>
<p>Selecionar um registo:</p>
<select ng-model="clienteSelecionado" ng-options="x.nome for x in clientes">
</select>
<table>
<tr>
<td>{{ clienteSelecionado.nome }}</td>
<td>{{ clienteSelecionado.morada }}</td>
</tr>
</table>
</div>
<hr>
<div>
<input type="button" value="View" ng-click="listView()">
<hr>
<table>
<tr>
<th>###</th>
<th>Nome</th>
<th>Morada</th>
</tr>
<tr ng-repeat=" y in clientes">
<td>{{ $index + 1 }}</td>
<td>{{ y.nome }}</td>
<td>{{ y.morada }}</td>
</tr>
</table>
</div>
<br>
<hr>
<br><br>
</div>
<script src="../lib/angular/angular.js"></script>
<script src="../lib/jquery/jquery.js"></script>
<script src="../js/app.js"></script>
<script src="../js/test.js"></script>
</body>
</html>
mydb2.sql
#//////////////////////////
#//
#// mydb2.sql
#//
#///////////////////////////
CREATE DATABASE MYDB2;
USE MYDB2;
CREATE TABLE CLIENTES2 (
id int NOT NULL auto_increment,
nome varchar (30) NOT NULL,
morada varchar (99) NOT NULL,
PRIMARY KEY (id)
);
GRANT ALL ON MYDB2.* to jspro2@localhost identified by 'jspro32';
享受。