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

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

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

您需要创建一个包含您的jade模板的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调用的静态网站中。

Answer 2

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

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

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

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和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'); });，如下例所示： / p>

server.js：

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

index.pug：

data.fields

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

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

2 个答案: