如何把数据库的数据显示到html上

通过数据库将数据显示到HTML页面上有多种方法，包括使用服务器端脚本语言（如PHP、Python、Node.js等）、前端框架（如React、Vue.js等）和API接口。 其中，常见的方法包括：使用服务器端脚本语言、AJAX结合API接口、前端框架与工具链。 在这篇文章中，我们将详细介绍这三种方法，并深入探讨每种方法的具体步骤和注意事项。

一、使用服务器端脚本语言

使用服务器端脚本语言是最常见的方式之一，通过这种方法，我们可以直接在服务器端获取数据库数据并将其传递到HTML页面。以下是实现步骤：

1.1、设置数据库连接

首先，需要设置与数据库的连接。在PHP中，可以使用mysqli或PDO扩展来连接数据库。以mysqli为例：

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
?>

1.2、执行SQL查询

连接数据库后，我们需要执行SQL查询以获取数据。例如，查询一个名为users的表：

<?php
$sql = "SELECT id, name, email FROM users";
$result = $conn->query($sql);
?>

1.3、将数据传递到HTML页面

获取数据后，我们需要将数据传递到HTML页面。在PHP中，可以直接嵌入PHP代码到HTML中：

<!DOCTYPE html>
<html>
<head>
    <title>用户列表</title>
</head>
<body>
    <h1>用户列表</h1>
    <table border="1">
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>邮箱</th>
        </tr>
        <?php
        if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
                echo "<tr><td>" . $row["id"]. "</td><td>" . $row["name"]. "</td><td>" . $row["email"]. "</td></tr>";
            }
        } else {
            echo "0 结果";
        }
        $conn->close();
        ?>
    </table>
</body>
</html>

二、使用AJAX结合API接口

另一种方法是使用AJAX结合API接口。这种方法通常用于单页面应用（SPA），可以在不刷新页面的情况下异步获取数据并显示到HTML页面上。

2.1、创建API接口

首先，我们需要创建一个API接口来提供数据。在Node.js中，可以使用Express框架创建API接口：

const express = require('express');
const mysql = require('mysql');
const app = express();
const port = 3000;
const db = mysql.createConnection({
    host: 'localhost',
    user: 'username',
    password: 'password',
    database: 'database'
});
db.connect((err) => {
    if(err) throw err;
    console.log('MySQL Connected...');
});
app.get('/api/users', (req, res) => {
    let sql = 'SELECT id, name, email FROM users';
    db.query(sql, (err, results) => {
        if(err) throw err;
        res.json(results);
    });
});
app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

2.2、使用AJAX获取数据

创建API接口后，可以使用AJAX在前端获取数据。在HTML页面中，可以使用jQuery来发送AJAX请求：

<!DOCTYPE html>
<html>
<head>
    <title>用户列表</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $.ajax({
                url: 'http://localhost:3000/api/users',
                method: 'GET',
                success: function(data) {
                    let table = '<table border="1"><tr><th>ID</th><th>姓名</th><th>邮箱</th></tr>';
                    data.forEach(function(user) {
                        table += `<tr><td>${user.id}</td><td>${user.name}</td><td>${user.email}</td></tr>`;
                    });
                    table += '</table>';
                    $('#userTable').html(table);
                }
            });
        });
    </script>
</head>
<body>
    <h1>用户列表</h1>
    <div id="userTable"></div>
</body>
</html>

三、前端框架与工具链

现代前端开发通常使用框架和工具链，如React、Vue.js和Angular。这些框架提供了更强大和灵活的方式来处理数据和更新视图。

3.1、使用React获取和显示数据

在React中，可以使用useEffect钩子来获取数据，并使用组件状态来管理数据。

3.1.1、创建React项目

首先，使用create-react-app工具创建一个新的React项目：

npx create-react-app my-app cd my-app npm start

3.1.2、获取数据并更新状态

在App.js文件中，使用useEffect钩子来获取数据：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
    const [users, setUsers] = useState([]);
    useEffect(() => {
        axios.get('http://localhost:3000/api/users')
            .then(response => {
                setUsers(response.data);
            })
            .catch(error => {
                console.error('There was an error fetching the data!', error);
            });
    }, []);
    return (
        <div>
            <h1>用户列表</h1>
            <table border="1">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                    </tr>
                </thead>
                <tbody>
                    {users.map(user => (
                        <tr key={user.id}>
                            <td>{user.id}</td>
                            <td>{user.name}</td>
                            <td>{user.email}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}
export default App;

3.2、使用Vue.js获取和显示数据

在Vue.js中，可以使用created生命周期钩子来获取数据，并使用Vue实例的data属性来管理数据。

3.2.1、创建Vue项目

首先，使用Vue CLI创建一个新的Vue项目：

vue create my-app cd my-app npm run serve

3.2.2、获取数据并更新视图

在src/components/HelloWorld.vue文件中，使用created钩子来获取数据：

<template>
  <div>
    <h1>用户列表</h1>
    <table border="1">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>邮箱</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: 'HelloWorld',
  data() {
    return {
      users: []
    };
  },
  created() {
    axios.get('http://localhost:3000/api/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.error('There was an error fetching the data!', error);
      });
  }
};
</script>

3.3、使用Angular获取和显示数据

在Angular中，可以使用HttpClient模块来获取数据，并使用组件的ngOnInit生命周期钩子来初始化数据。

3.3.1、创建Angular项目

首先，使用Angular CLI创建一个新的Angular项目：

ng new my-app cd my-app ng serve

3.3.2、获取数据并更新视图

在src/app/app.component.ts文件中，使用ngOnInit钩子来获取数据：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  users: any = [];
  constructor(private http: HttpClient) {}
  ngOnInit() {
    this.http.get('http://localhost:3000/api/users')
      .subscribe(data => {
        this.users = data;
      });
  }
}

在src/app/app.component.html文件中，使用*ngFor指令来显示数据：

<h1>用户列表</h1>
<table border="1">
  <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>邮箱</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let user of users">
      <td>{{ user.id }}</td>
      <td>{{ user.name }}</td>
      <td>{{ user.email }}</td>
    </tr>
  </tbody>
</table>

四、总结

通过数据库将数据显示到HTML页面上，有多种方法可供选择。使用服务器端脚本语言（如PHP、Node.js等）是最传统的方法，可以直接在服务器端获取数据并生成HTML内容。使用AJAX结合API接口则提供了更灵活和动态的方式，特别适合单页面应用（SPA）。现代前端框架（如React、Vue.js、Angular）提供了更强大的工具链，可以更高效地处理数据和更新视图。

无论选择哪种方法，都需要根据项目的具体需求和团队的技术栈来决定。如果涉及到项目团队管理，可以考虑使用研发项目管理系统PingCode，和通用项目协作软件Worktile，以提高团队协作效率和项目管理水平。