如何使用 node.js 将 sql 中的数据放入 html 中的表中
Posted
技术标签:
【中文标题】如何使用 node.js 将 sql 中的数据放入 html 中的表中【英文标题】：How to put data from sql into a table in html using node.js 【发布时间】：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 【参考方案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 这样的库具有旨在处理此问题的渲染策略。
【讨论】：
谢谢你，你帮了我很多以上是关于如何使用 node.js 将 sql 中的数据放入 html 中的表中的主要内容，如果未能解决你的问题，请参考以下文章