Comment afficher la ligne sélectionnée d'une table MYSQL dans un exemple de table d'une page HTML?

Question

J'essaie d'ajouter une ligne de données sélectionnée de mysql db dans une table html.
En fait, je peux sélectionner des données et les montrer dans la console, mais je ne sais pas comment l'ajouter dans la page html.

ici est mon code js

var mysql = require('mysql'); 

var con = mysql.createConnection({ 
    host: "localhost", 
    user: "root", 
    password: "", 
    database: "mydb" 
}); 

con.connect(function(err) { 
    if (err) throw err; 
    //Select all customers and return the result object: 
    con.query("SELECT * FROM customers", function (err, result, fields) { 
    if (err) throw err; 
    console.log(result); 
    }); 
}); 

Answer 1

Vous pouvez envoyer des résultats de requête au client avec socket.io. Ensuite, vous pouvez ajouter des résultats à votre code HTML dans le client. Supposons que votre table « clients » a la structure suivante:

name varchar(20) 
password varchar(20) 

et vous avez élément vide dans votre code html. Vous pouvez émettez l'événement «clients sur le serveur:

con.query("SELECT * FROM customers", function (err, results, fields) { 
    if (err) throw err; 
    console.log(result); 
    // we only send results as we know the fields 
    socket.emit('customers', results); 
    }); 

Et dans le code du client (carlin ou jade):

script. 
    let socket = io(); 
    socket.on('customers', data => { 
     for (let i = 0, max = data.length; i < max; i++) { 
      document.getElementById('customers').innerHTML += data[i].user + ' ' + data[i].password + '<br/>; 
     } 
    }); 

Si vous ne connaissez pas les champs de la table (il est à peine possible , ne l'est pas), vous pouvez utiliser les deux results et fields retournés par la requête comme dans l'exemple suivant:

server.js:

const express = require('express'); 
const app = express(); 
const http = require('http').Server(app); 
const io = require('socket.io')(http); 
const mysql = require('mysql'); 

let con = mysql.createPool({ 
    connectionLimit: 10, 
    host: 'localhost', 
    user: 'root', 
    password: '', 
    database: 'mydb' 
}); 


io.on('connection', function (socket) { 
    console.log('client connected'); 

    socket.on('show',() => { 
     con.query('SELECT * FROM customers', (err, results, fields) => { 
      if (err) { 
       throw err; 
      } 
      //we send both: results and fields here as we don't know the fields 
      socket.emit('customers', {results: results, fields: fields}); 
     }); 
    }); 
}); 

http.listen(3000, function(){ 
    console.log('server listening on *:3000'); 
}); 

app.set('views', __dirname); 
app.set('view engine', 'pug'); 
app.get('/', (req,res) => { 
    res.render('index'); 
}); 

index.pug:

doctype html 
html 
head 
    meta(charset="UTF-8") 
    script(src="/socket.io/socket.io.js") 
body 
    style. 
     table, th, td { 
      border: 1px solid black; 
      border-collapse: collapse; 
     } 
     th, td { 
      padding: 5px; 
     } 
     #mysql { 
      margin-top: 10px; 
     } 
    div 
     h3 Query results 
     button(id='show') Show 
    #mysql 
    script. 
     let socket = io(); 
     socket.on('customers', data => { 
      let mysql = document.getElementById('mysql'); 
      let table = document.createElement('TABLE'); 
      mysql.appendChild(table); 
      let tableHead = document.createElement('THEAD'); 
      table.appendChild(tableHead); 
      let tr = document.createElement('TR'); 
      tableHead.appendChild(tr); 
      for (let i = 0, max = data.fields.length; i < max; i++) { 
       let th = document.createElement('TH'); 
       th.width = '75'; 
       th.appendChild(document.createTextNode(data.fields[i].name)); 
       tr.appendChild(th); 
      } 
      let tableBody = document.createElement('TBODY'); 
      table.appendChild(tableBody); 

      for (let i = 0, max = data.results.length; i < max; i++) { 
       let tr = document.createElement('TR'); 
       for (let k = 0, max = data.fields.length; k < max; k++) { 
        let td = document.createElement('TD'); 
        td.appendChild(document.createTextNode(data.results[i][data.fields[k].name])); 
        tr.appendChild(td); 
       } 
       tableBody.appendChild(tr); 
      } 
     }); 
     document.getElementById('show').addEventListener('click',() => { 
      socket.emit('show'); 
     }); 

nous récupérer ici des informations sur les champs de la table de data.fields et l'utiliser dans la construction de la table. Il suffit donc d'avoir accès à la base de données et de connaître le nom de la table.

Answer 2

Créer un serveur HTTP, vous pouvez utiliser le package noeud http mais il y a plusieurs cadres qui vous rendront la vie plus facile à faire ces tâches efficacement et en toute sécurité.

Je vais vous expliquer comment cela fonctionne avec express.js et le moteur de template jade. Vous aurez besoin de dépendances jade et express. Donc, dans votre dossier de projet: npm i express jade --save

Vous aurez besoin de créer un dossier de vues qui contiendra vos modèles de jade. Voici la structure du projet.

/node_modules 
/views 
    index.jade 
index.js 

fichier Première

// index.js file 
// Create an express app 
const app = require('express')(); 

// Create your mysql conn 
const mysql = require('mysql'); 
const con = mysql.createConnection({ 
    host: "localhost", 
    user: "root", 
    password: "", 
    database: "mydb" 
}); 

// set view engine 
app.set('view engine', 'jade'); 

// create a route handler, GET/ 
app.get('/', function (req, res) { 
    // fetch your mysql data 
    con.query("SELECT * FROM customers", function (err, result, fields) { 
     if (err) throw err; 
     // pass your data to your template file 
     res.render('index', {data: result}); 
    }); 
}); 

// open your mysql connection and start express app 
con.connect(function(err) { 
    if (err) throw err; 
    //Select all customers and return the result object: 
    app.listen(8090); 
}); 

Votre fichier modèle

// /views/index.jade 
each d in data 
    p 
    = d.someproperty 

C'est une application très simple, mais il vous donnera une compréhension de la façon de créer un serveur HTTP de base, obtenir des données de votre serveur et l'afficher. Notez qu'il existe également une autre méthode, qui consiste à créer une API REST et à renvoyer vos données au format JSON et à les afficher sur un site Web statique en effectuant un appel AJAX.