当前位置：首页 > 行业动态 > 正文

从数据库中获取的数据显示到网页中英文

admin
行业动态
2025-04-05
6

从数据库中获取的数据显示到网页中英文

在现代Web开发中，将数据库中的数据展示到网页上是一个常见且基本的任务，这个过程通常涉及后端和前端的协作，以下是实现这一功能的详细步骤：

数据库设计

需要设计一个数据库来存储数据，假设我们使用MySQL作为数据库管理系统，并创建一个名为users的表，包含以下字段：

id: 用户ID（主键）

name: 用户名

email: 用户邮箱

age: 用户年龄

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    age INT NOT NULL
);

后端设置

使用Node.js和Express框架来创建一个简单的API，用于从数据库中获取数据。

从数据库中获取的数据显示到网页中英文第1张

安装必要的包

npm install express mysql2 cors

创建服务器文件 `server.js`

const express = require('express');
const mysql = require('mysql2');
const cors = require('cors');
const app = express();
app.use(cors());
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'testdb'
});
db.connect((err) => {
    if (err) {
        console.error('Database connection failed: ' + err.stack);
        return;
    }
    console.log('Connected to database.');
});
app.get('/users', (req, res) => {
    db.query('SELECT  FROM users', (err, results) => {
        if (err) {
            res.status(500).send('Error retrieving data from database');
            return;
        }
        res.json(results);
    });
});
const PORT = 3000;
app.listen(PORT, () => {
    console.log(Server is running on port ${PORT});
});

前端设置

使用HTML、CSS和JavaScript来创建一个网页，并通过Fetch API从后端获取数据。

创建 `index.html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User Data</title>
    <style>
        table {
            width: 50%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>User Data</h1>
    <table id="userTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <!-Data will be inserted here -->
        </tbody>
    </table>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            fetch('http://localhost:3000/users')
                .then(response => response.json())
                .then(data => {
                    const tableBody = document.getElementById('userTable').getElementsByTagName('tbody')[0];
                    data.forEach(user => {
                        const row = tableBody.insertRow();
                        row.insertCell(0).innerText = user.id;
                        row.insertCell(1).innerText = user.name;
                        row.insertCell(2).innerText = user.email;
                        row.insertCell(3).innerText = user.age;
                    });
                })
                .catch(error => console.error('Error fetching data:', error));
        });
    </script>
</body>
</html>