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

Question

我正在尝试将 mysql db 中的选定数据行添加到 html 表中。
事实上，我可以选择数据并在控制台中显示它，但我不知道如何在 html 页面中添加它。

这是我的 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

您可以使用 socket.io 将查询结果发送到客户端。然后您可以将结果添加到客户端中的 html 中。假设您的“客户”表具有以下结构：

name varchar(20)
password varchar(20)

并且您的 html 中有空元素。您可以在服务器中发出 'customers' 事件：

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

并且在客户端的代码中（pug 或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/>;
       }
   });

如果您不知道表字段（几乎不可能，不是吗？）您可以同时使用查询返回的results 和fields，如下例所示：

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

在这里，我们从data.fields 中检索有关表字段的信息，并将其用于构建表。所以我们只需要访问数据库并知道表的名称。

Answer 2

创建一个 HTTP 服务器，您可以使用节点 http 包，但是有多个框架可以让您更轻松地高效安全地完成此类任务。

我会用express.js和jade模板引擎来解释它的基本原理。 您将需要玉和表达依赖关系。所以在你的项目文件夹中： npm i express jade --save

您需要创建一个包含您的翡翠模板的views 文件夹。这是项目结构。

/node_modules
/views
    index.jade
index.js

第一个文件

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

您的模板文件

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

这是一个非常基本的应用程序，但它会让您了解如何创建一个基本的 http 服务器、从您的服务器获取数据并显示它。

请注意，还有另一种方法，即创建一个 REST api 并将您的数据返回为 JSON 并将其显示在进行 AJAX 调用的静态网站中。