如何将MYSQL表的选定行显示到HTML页面的示例表中？

Question

I'm trying to add selected data row from mysql db into a html table.
In fact i can select data and show it in console but I don't know how to add it in html page.

here is my 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

Create an HTTP server, you can use the node http package but there are multiple frameworks which will make your life easier to do such tasks efficiently and safely.

I will explain how to it basically with express.js and the jade template engine. You will need jade and express dependencies. So in your project folder: npm i express jade --save

You will need to create a views folder which will contain your jade templates. Here is the project structure.

/node_modules
/views
    index.jade
index.js

First file

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

Your template file

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

This is very basic application but it will give you an understanding of how to create a basic http server, get data from your server and display it.

Note that there is also another way, which is to create a REST api and return your data as JSON and display it in a static website making an AJAX call.

Answer 2

You can send query results to the client with socket.io. Then you can add results to your html in the client. Suppose your 'customers' table has the following structure:

name varchar(20)
password varchar(20)

and you have empty element in your html. You can emit 'customers' event in the server:

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

And in the client's code (pug or 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/>;
       }
   });

If you don't know the table fields (it is hardly possible, isn't it?) you can use both results and fields returned by the query as in the following example:

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

Here we retrieve information about the fields of the table from data.fields and use it in building the table. So we only have to have access to the database and know the name of the table.