Wie kann ich die ausgewählte Zeile einer MYSQL-Tabelle in einer Beispieltabelle einer HTML-Seite anzeigen?

Question

Ich versuche, ausgewählte Daten Zeile von MySQL-db in eine HTML-Tabelle hinzuzufügen.
In der Tat kann ich Daten auswählen und in der Konsole anzeigen, aber ich weiß nicht, wie Sie es in HTML-Seite hinzufügen.

hier ist mein js Code

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

Sie können Abfrageergebnisse mit socket.io an den Client senden. Dann können Sie Ergebnisse zu Ihrem HTML im Client hinzufügen. Angenommen, Ihre 'Kunden' Tabelle hat die folgende Struktur:

name varchar(20) 
password varchar(20) 

und Sie haben ein leeres Element in Ihrem HTML. Sie können 'Kunden' Ereignis im Server emittieren:

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); 
    }); 

Und in der Client-Code (Mops oder 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/>; 
     } 
    }); 

Wenn Sie die Tabellenfelder nicht wissen (es ist kaum möglich, ist es nicht) Sie beide results und fields zurückgegeben von der Abfrage, wie im folgenden Beispiel verwenden können:?

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'); 
     }); 

Hier rufen wir Informationen über die Felder der Tabelle, aus data.fields und es verwenden, um die Tabelle in den Bau. Wir müssen also nur Zugriff auf die Datenbank haben und den Namen der Tabelle kennen.

Answer 2

einen HTTP-Server erstellen, können Sie den Knoten http Paket verwenden, aber es gibt mehrere Frameworks, die Ihnen das Leben leichter machen solche Aufgaben effizient und sicher zu tun.

Ich werde erklären, wie es im Grunde mit express.js und der Jade-Vorlage-Engine. Sie werden Jade und Express-Abhängigkeiten benötigen. Also in Ihrem Projektordner: npm i express jade --save

Sie müssen einen Views-Ordner erstellen, der Ihre Jade-Vorlagen enthält. Hier ist die Projektstruktur.

/node_modules 
/views 
    index.jade 
index.js 

Erste Datei

// 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); 
}); 

Ihre Template-Datei

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

Dies ist sehr grundlegende Anwendung, aber es wird Ihnen ein Verständnis dafür, wie eine grundlegende http-Server zu erstellen, erhalten Daten aus dein Server und zeige es an.

Beachten Sie, dass es auch eine andere Möglichkeit gibt, eine REST-API zu erstellen und Ihre Daten als JSON zurückzugeben und sie auf einer statischen Website anzuzeigen, die einen AJAX-Aufruf durchführt.