如何使用 node.js 将 sql 中的数据放入 html 中的表中答案

【问题标题】：How to put data from sql into a table in html using node.js如何使用 node.js 将 sql 中的数据放入 html 中的表中
【发布时间】：2021-06-26 18:31:59
【问题描述】：

我有 DATA 存储在 mysql 中。我想在 HTML 表格中显示它。我目前正在使用 NODE.JS 和 EXPRESS。如何保存传入的数据并将其放入 HTML 表格中。我试图找到一种方法来保存这个数据，并在 HTML 的脚本标签内使用 MAP 循环，但我无法将 DATA 发送到 HTML。

app.js

const mysql = require('mysql')
const SQL = require('sql-template-strings')
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = 3000
const Joi = require('joi');

app.use(bodyParser.urlencoded({ extended: true }))


// connect to MySQL
const con = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'pass123',
    database: 'carStorege'
})

con.connect((err)=> {
    if(err) throw err;
    else console.log('connect to DB !')
})

// seva data from database
con.query("SELECT * from Cars", (err, result, fields) => {
    if(err) console.log(err);
    else {
         //save the data
        const data = result
    }
})
// express

    // url to see all the car in table

    app.get('/all', (req, res) => {
        con.query("SELECT * from Cars", (err, result, fields) => {
            if(err) throw err;
            else {
                res.sendFile(__dirname+'/allCars.html')
            }
        })

    })


app.listen(port, () => console.log('srever is live'))

这是 HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <tr>
        <th>Car manufacturer</th>
        <th>Car model</th>
        <th>Color</th>
        <th>Yaer</th>
        <th>Price</th>
        <th>Door number</th>
    </tr>
    // here the data shuld be
</body>
</html>

【问题讨论】：

这能回答你的问题吗？ Display mysql in a html table with Node.js

标签： javascript html mysql node.js

【解决方案1】：

这需要在前端 javascript 中完成。你网页上的JS（连接到HTML）需要从你的Node服务器请求数据，然后doSomething用它。它可能在一个数组中，因此您可以遍历数组，创建一个包含数据的新 HTML 行，并将其附加到表中的正确位置。比如：

fetch('http://yourWebSite.com/api/all')
    .then(response => response.json())
    .then(data => {
        console.log(data);
        let table = document.querySelector('#tableId')
        data.forEach(row => {
            let tr = document.createElement('tr');
            tr.appendChild(document.createElement('th').innerText(row.item1))
            tr.appendChild(document.createElement('th').innerText(row.item2))
            tr.appendChild(document.createElement('th').innerText(row.item3))
            table.appendChild(tr)
        })
});

这是框架派上用场的地方，因为像 React、Vue 或 Angular 这样的库具有旨在处理此问题的渲染策略。

【讨论】：

谢谢你，你帮了我很多