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

我想从MySQL数据库添加选定的数据行到一个HTML表格。
事实上，我可以选择数据并在控制台中显示它，但我不知道如何将它添加到html页面中。

这里是我的js代码如何将MYSQL表的选定行显示到HTML页面的示例表中？

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

来源

2017-09-23 Mehdi

您可以使用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检索关于表的字段信息，并在建表使用它。所以我们只需要访问数据库并知道表的名字。

来源

2017-09-23 17:38:06 mk12ok

创建一个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调用。

来源

2017-09-23 10:35:48

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

回答

相关问题