使用AngularJS和NodeJS從MySQL檢索數據

Question

首先，也許我需要澄清一下，我是這種技術的新手。 我正在從PHP遷移到JavaScript，並且之前從未做過此類工作。 我正在使用Electron + AngularJS制作桌面應用程序。 我有一個簡單的表，需要在其中顯示獲取的MySQL表數據。 查看信息，我發現使用NodeJS的一種簡單方法，但是在將檢索到的數據存儲到$ scope之后，使用ng-repeat指令顯示該信息時遇到了問題。 這是我的代碼（簡化）：

app.controller('registrosController', function($scope, $http) {
    var mysql = require('mysql');
    var connection = mysql.createConnection({
        host: 'localhost',
        user: 'root',
        password: null,
        database: 'dniscan'
    })
    connection.connect((err) => {
        if(err){
            return console.log(err.stack);
        }
    })
    $queryString = 'SELECT * FROM registros ORDER BY escaneado DESC';
    connection.query($queryString, (err, data) => {
        if(err) {
            return console.log("Ocurrió un error durante la consulta", err)
        }
        console.log(data)       //The data shows correctly in the console.
        $scope.registros = data //This not working. It returns undefined.
    });
    connection.end();
});

Answer 1

似乎您正在混淆客戶端和服務器，因此要澄清一下，在服務器中，您是從數據庫獲取數據的。 在客戶端中，您將數據放在合並范圍內。 然后在HTML中，將范圍內的數據放入視圖中。

這是一個例子：

服務器-NodeJ

app.get('getData', function (req, res) {
    var mysql = require('mysql');
    var connection = mysql.createConnection({ ... });
    connection.connect((err, connection) => {
        if(err) { 
            res.send({ err }) 
        } else {
            var queryString = 'SELECT * FROM ...';

            connection.query(queryString, (err, data) => {
                if(err) { 
                    res.send({ err }) 
                } else {
                    res.send({ data });
                }
            });
        }
    });
    connection.end();
});

客戶-AngularJs

app.controller('registrosController', function($scope, $http) {
    $http.get('/getData').then(function(data) {
        $scope.registros = data;
    });
});

客戶-HTML

<div ng-repeat="registro in registros">
    ...
</div>

在JavaScript中，PS不會通過在變量后附加$定義變量，而是通過var 。

Answer 2

您不能從瀏覽器使用mysql。 您正在運行的代碼非常適合Node（它是服務器端平台），它將訪問您（服務器）的mysql並在其中存儲數據。

如果要在瀏覽器中存儲一些持久性數據，最好的方法是使用HTML5的功能本地存儲或會話存儲，直到用戶刪除它們后才可以訪問它們。

但是，如果您真的想使用數據庫，我不建議這樣做。 有一些可用的輕量級數據庫。

從我的搜索中，我可以找到angular的sqlite包：-https: //github.com/reduardo7/angular-sqlite

您也可以使用基於文檔的數據庫indexddb：-https: //github.com/webcss/angular-indexedDB

Answer 3

您應該使用angular.copy將數據移至$ scope.registros

$scope.registros = angular.copy(data)