web-dev-qa-db-fra.com

Afficher les données dans un fichier html/js en utilisant NodeJs de la base de données mysql

Mon fichier index.js est 

var express         = require('express');
var  app            = express();
var path            = require('path');
var router          = express.Router();
var data            = require('./data/jsonData');
var createDatabase  = require('./data/db');
var careateTable    = require('./data/createTable');
var insert          = require('./data/insert');
var bodyParser      = require('body-parser');
var select          = require('./data/select');


app.use(express.static(path.join(__dirname, 'www')));
app.use(express.static(path.join(__dirname, 'form')));
app.use(bodyParser());
app.get('/' , function (req , res) {
    res.sendFile(path.join(__dirname + '/www/index.html'));
});

app.get('/data' ,function (req , res) {
    res.json(data);
});
app.get('/form' ,function (req , res) {
    res.sendFile(path.join(__dirname + '/form/index.html'));
});
app.post('/form' ,function (req , res) {
    console.log(req.body.user);
    console.log(req.body.password);
    insert.insertModule(req.body.user , req.body.password);
    res.sendFile(path.join(__dirname + '/www/index.html'));
});
app.get('/show' , function (req , res) {
    var i ;
   select.select( function (err, results) {
       if (err == 'error') {
           console.log(err);
       } else {
           console.log(results);
           res.send(results.username);
       }
   });

});

app.listen(3000);
console.log("App is listning on port 3000");

et select.js est

var mysql = require('mysql');
var con = mysql.createConnection({
    Host: "localhost",
    user: "root",
    password: "",
    database: "NodeDataBase"
});
con.connect(function (err) {
    if (err) throw err;
    console.log("Connected!");
});

module.exports  = {
    select: function (callback) {
        var sql = "SELECT username , password FROM login ";
        con.query(sql, function (err, result , fields) {
            if (err) {
                callback("error", err)
            } else {
                callback("success", result)
            }
        });
    }
}

Je veux montrer les données d'objet de résultats en fichier html, alors comment puis-je faire cela s'il vous plaît me suggérer.

à partir d'une requête get/show, toutes les données utilisateur extraites de la base de données seront affichées.

htmlmysqlnode.js
3
Narendra Kumawat

Je vais essayer d’expliquer comment cela fonctionne (avec la considération que vous pouvez maintenant voir les données sur ' http: // localhost: 3000/show '). _ {Plz, les gars, corrigez-moi si j'explique quelque chose de manière erronée.}

Là, ce que vous avez dans votre code, est le 

Code côté serveur

  • mysql : Déclare la connexion à la base de données (il s'agit du connecteur de votre base de données)
  • node.js : Déclare les méthodes pour mettre/Pousser/obtenir les données de la base de données (votre côté serveur tel quel)
  • express.js : Déclare les URL à mettre/Pousser/obtenir les données de la base de données (routeur http/https)

Ensuite, si nous vérifions le code, nous pouvons voir la déclaration d’un serveur api - par exemple app.get('/show')

Là, ce que vous dites est que express, utilisera l’url/show avec la méthodeGET

Voici où votre client apparaît dans la scène. Nous supposons maintenant que votre serveur est opérationnel et attend de pouvoir traiter les requêtes GET sur http: // localhost: 3000/show .

Si cela est correct, lorsque vous cliquez sur le lien, vous devriez voir les noms d'utilisateur. Vous aurez maintenant besoin d'un client http pour vous connecter à votre serveur http.

Le javascript est la façon dont vous pouvez récupérer des données sur votre client HTML à partir de votre serveur.

Ensuite, vous devrez créer un fichier HTML, qui contiendra également un script javascript (dans mon exemple, écrit dans angular ).

Le code HTML (ceci est écrit en jade . Vous pouvez le convertir ) devrait ressembler à ceci: 

Code HTML client Vous devez créer un fichier index.html et coller ce code. 

<!doctype html>
<html ng-app>
  <head>
    <title>My AngularJS App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  </head>
  <body>
  <div ng-controller="MyCtrl">
    <table>
      <thead>
        <tr>
          <th>
            <p>Name</p>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="user in users">
          <td> 
            <p>{{user}}</p>
          </td>
        </tr>
      </tbody>
    </table>
   </div>
    <script>
     var myApp = angular.module('myApp',[]);
     function MyCtrl($scope, $http) {
     //This method will call your server, with the GET method and the url /show
     $http.get("http://localhost:3000/show").then(function(success){
      if(success.data.length>0)
      {
         $scope.users=success.data;
      }
     });
     }
   </script>
  </body>
 </html>

Ce code doit capturer les données et afficher une ligne dans la table pour chaque nom de la base de données.

J'espère que cela vous aidera, du moins en expliquant clairement le fonctionnement de la pile complète (client-serveur).

0
Alejandro Teixeira Muñoz

Peut-être que vous pouvez utiliser le moteur de visualisation tel qu'EJS, Jade pour restituer les données d'un noeud à l'autre. 

Si vous voulez rendre les données sur la page html, je vais le faire comme http: // localhost: 3000/show : avec json -resonponse 

var express = require('express');
var app = express();

require('json-response');

app.get('/', function(req, res){
  res.ok({foo: 'bar'}, 'hello world');
});

je vais retourner JSON à partir du lien et dans Index.html avec l'aide de jquery/Ajax va cliquer sur le lien, récupérer la valeur et l'afficher en HTML

0
LogicBlower