如何將MYSQL表的選定行顯示到HTML頁面的示例表中？

Question

我想從MySQL數據庫添加選定的數據行到一個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中有空元素。您可以發出「客戶」事件在服務器：

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

而在客戶端的代碼（哈巴狗或玉）：

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

你將需要創建一個包含你的玉模板的視圖文件夾。這是項目結構。

/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調用。