Comment créer une table de données dynamique à l'aide de MySQL et JavaScript

Comment créer une table de données dynamiques à l'aide de MySQL et JavaScript

Présentation :
Dans le développement Web moderne, les tables de données dynamiques sont un composant très courant. En utilisant le système de gestion de base de données MySQL et le langage de programmation frontal JavaScript, nous pouvons facilement créer une table de données dynamique pour afficher et manipuler les données dans la base de données. Cet article présentera en détail comment utiliser MySQL et JavaScript pour créer une table de données dynamique et fournira des exemples de code spécifiques.

Étapes :

1. Créer une base de données et une table :
   Tout d'abord, nous devons créer une base de données dans MySQL et y créer une table pour stocker les données qui doivent être affichées. Voici un exemple simple :

CREATE DATABASE my_database;
USE my_database;
CREATE TABLE my_table (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50),
    age INT,
    email VARCHAR(100)
);

2. Connexion à la base de données :
   Ensuite, nous devons utiliser JavaScript pour nous connecter à la base de données MySQL. Habituellement, nous utiliserons le pilote officiel de MySQL (tel que node-mysql) pour réaliser cette fonction. Voici un exemple de code pour vous connecter à la base de données :

const mysql = require('mysql');

const connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'your_username',
    password : 'your_password',
    database : 'my_database'
});

connection.connect((err) => {
    if (err) throw err;
    console.log('Connected to MySQL database');
});

Veuillez vous assurer de remplacer votre_nom d'utilisateur et votre_mot de passe dans le code ci-dessus par votre nom d'utilisateur et votre mot de passe MySQL réels. your_username和your_password替换为实际的MySQL用户名和密码。

3. 查询数据库：
   在连接数据库成功之后，我们可以使用JavaScript来查询数据库中的数据，并将其展示在数据表格中。以下是一个简单的查询数据库并展示数据的示例代码：

const sql = 'SELECT * FROM my_table';

connection.query(sql, (err, result) => {
    if (err) throw err;
    console.log('Fetched data from database:', result);

    // 将数据展示在表格中
    const table = document.getElementById('data-table');
    result.forEach((row) => {
        const newRow = table.insertRow();
        Object.values(row).forEach((value) => {
            const cell = newRow.insertCell();
            cell.innerHTML = value;
        });
    });
});

在以上示例中，我们执行了一个简单的SELECT语句来获取数据库中的所有数据，并将其展示在一个id为data-table的HTML表格中。

4. 其他操作：
   除了查询数据之外，我们还可以使用JavaScript来执行其他数据库操作，例如插入、更新或删除数据。以下是一个插入数据的示例代码：

const sql = `INSERT INTO my_table (name, age, email) VALUES ('John', 25, 'john@example.com')`;

connection.query(sql, (err, result) => {
    if (err) throw err;
    console.log('Inserted a new row into the database');
});

以上代码将在数据库的my_table

Interroger la base de données :

Après une connexion réussie à la base de données, nous pouvons utiliser JavaScript pour interroger les données de la base de données et les afficher dans la table de données. Voici un exemple de code simple pour interroger la base de données et afficher les données :


rrreee🎜Dans l'exemple ci-dessus, nous avons exécuté une simple instruction SELECT pour obtenir toutes les données de la base de données et les afficher dans un fichier avec l'identifiant de Dans le tableau HTML de data-table. 🎜
🎜Autres opérations : 🎜En plus d'interroger des données, nous pouvons également utiliser JavaScript pour effectuer d'autres opérations de base de données, telles que l'insertion, la mise à jour ou la suppression de données. Voici un exemple de code pour insérer des données : 🎜🎜rrreee🎜Le code ci-dessus insérera une nouvelle ligne de données dans la table my_table de la base de données. 🎜🎜Résumé : 🎜En utilisant MySQL et JavaScript, nous pouvons facilement créer un tableau de données dynamique et afficher et exploiter les données dans la base de données. Cet article fournit des exemples de code spécifiques pour se connecter à la base de données, interroger des données et effectuer d'autres opérations. J'espère qu'il sera utile à tout le monde lors du développement de tables de données dynamiques. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!