在网页开发中，经常需要将数据库中多个表格的不同数据类型展示到HTML页面上，方便用户查看和管理数据。实现这个需求需要从数据库设计、后端数据获取、前端页面渲染三个层面共同配合完成。
一、数据库表结构与数据类型设计
首先需要在数据库中创建多个关联表格，每个表格设置对应的字段和数据类型。以MySQL数据库为例，我们创建两个关联的用户表和订单表，分别设置不同的数据类型：
-- 创建用户表，包含多种常见数据类型
CREATE TABLE user (
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(50) NOT NULL,
age TINYINT UNSIGNED,
balance DECIMAL(10,2),
register_time DATETIME,
is_active BOOLEAN
);
-- 创建订单表，与用户表通过user_id关联
CREATE TABLE order_info (
order_id INT PRIMARY KEY AUTO_INCREMENT,
user_id INT,
product_name VARCHAR(100),
price DECIMAL(10,2),
order_time TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES user(id)
);
二、后端接口开发获取多表数据
后端需要编写接口查询两个表格的数据，并将数据类型信息和具体数据一起返回给前端。以Node.js的Express框架为例，代码如下：
const express = require('express');
const mysql = require('mysql2');
const app = express();
const port = 3000;
// 创建数据库连接
const pool = mysql.createPool({
host: '127.0.0.1',
user: 'root',
password: '123456',
database: 'test_db'
});
// 获取用户表和订单表数据及字段类型
app.get('/api/getTablesData', (req, res) => {
// 查询用户表结构和数据
const userSql = `
SELECT COLUMN_NAME, DATA_TYPE
FROM INFORMATION_SCHEMA.COLUMNS
WHERE TABLE_SCHEMA = 'test_db' AND TABLE_NAME = 'user';
SELECT * FROM user;
`;
// 查询订单表结构和数据
const orderSql = `
SELECT COLUMN_NAME, DATA_TYPE
FROM INFORMATION_SCHEMA.COLUMNS
WHERE TABLE_SCHEMA = 'test_db' AND TABLE_NAME = 'order_info';
SELECT * FROM order_info;
`;
pool.query(userSql, (err, userResults) => {
if (err) return res.json({ code: 500, msg: '查询用户表失败' });
pool.query(orderSql, (err, orderResults) => {
if (err) return res.json({ code: 500, msg: '查询订单表失败' });
res.json({
code: 200,
data: {
user: {
columns: userResults[0],
rows: userResults[1]
},
order: {
columns: orderResults[0],
rows: orderResults[1]
}
}
});
});
});
});
app.listen(port, () => {
console.log(`服务运行在端口 ${port}`);
});
三、HTML页面渲染多个表格及数据类型
前端通过AJAX请求获取后端返回的数据，动态生成两个表格，分别展示用户表和订单表的字段数据类型以及具体数据内容。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多表格数据类型展示</title>
<style>
.table-container {
margin: 20px;
padding: 15px;
border: 1px solid #eee;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f5f5f5;
}
.type-label {
color: #666;
font-size: 12px;
margin-left: 5px;
}
</style>
</head>
<body>
<h1>数据库多表格数据类型展示</h1>
<div class="table-container">
<h2>用户表数据</h2>
<div id="userTable"></div>
</div>
<div class="table-container">
<h2>订单表数据</h2>
<div id="orderTable"></div>
</div>
<script>
// 获取表格数据并渲染
function renderTables() {
fetch('http://127.0.0.1:3000/api/getTablesData')
.then(res => res.json())
.then(data => {
if (data.code === 200) {
renderSingleTable('userTable', data.data.user, '用户表');
renderSingleTable('orderTable', data.data.order, '订单表');
}
});
}
// 渲染单个表格，包含字段数据类型
function renderSingleTable(containerId, tableData, tableName) {
const container = document.getElementById(containerId);
let tableHtml = '<table>';
// 表头：字段名 + 数据类型
tableHtml += '<thead><tr>';
tableData.columns.forEach(col => {
tableHtml += `<th>${col.COLUMN_NAME}<span class="type-label">(${col.DATA_TYPE})</span></th>`;
});
tableHtml += '</tr></thead>';
// 表格内容
tableHtml += '<tbody>';
tableData.rows.forEach(row => {
tableHtml += '<tr>';
tableData.columns.forEach(col => {
tableHtml += `<td>${row[col.COLUMN_NAME] || ''}</td>`;
});
tableHtml += '</tr>';
});
tableHtml += '</tbody></table>';
container.innerHTML = tableHtml;
}
// 页面加载完成后执行
window.onload = renderTables;
</script>
</body>
</html>
四、注意事项
- 不同数据库获取字段数据类型的系统表不同，比如MySQL使用<code>INFORMATION_SCHEMA.COLUMNS</code>，PostgreSQL使用<code>information_schema.columns</code>，需要根据实际使用的数据库调整查询语句。
- 如果表格数据量较大，建议添加分页功能，避免一次性渲染过多数据导致页面卡顿。
- 前端渲染时对特殊字符做转义处理，防止XSS攻击，比如对返回的数据中的<code><</code>、<code>></code>等字符进行转义后再插入到HTML中。
- 如果两个表格存在关联关系，可以在前端添加点击联动效果，比如点击用户表的某一行，自动筛选展示该用户的订单数据。