MySQL과 JavaScript를 사용하여 동적 데이터 테이블을 만드는 방법

MySQL 및 JavaScript를 사용하여 동적 데이터 테이블을 만드는 방법

개요:
현대 웹 개발에서 동적 데이터 테이블은 매우 일반적인 구성 요소입니다. 데이터베이스 관리 시스템인 MySQL과 프런트엔드 프로그래밍 언어인 JavaScript를 사용하여 데이터베이스의 데이터를 표시하고 조작하기 위한 동적 데이터 테이블을 쉽게 생성할 수 있습니다. 이 기사에서는 MySQL과 JavaScript를 사용하여 동적 데이터 테이블을 생성하는 방법을 자세히 소개하고 구체적인 코드 예제를 제공합니다.

단계:

1. 데이터베이스 및 테이블 만들기:
   먼저 MySQL에 데이터베이스를 만들고 그 안에 표시해야 하는 데이터를 저장할 테이블을 만들어야 합니다. 다음은 간단한 예입니다.

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. 데이터베이스에 연결:
   다음으로 JavaScript를 사용하여 MySQL 데이터베이스에 연결해야 합니다. 일반적으로 이 기능을 구현하기 위해 MySQL의 공식 드라이버(예: node-mysql)를 사용합니다. 다음은 데이터베이스에 연결하기 위한 샘플 코드입니다.

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');
});

위 코드의 your_username 및 your_password를 실제 MySQL 사용자 이름과 비밀번호로 바꾸세요. 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

데이터베이스 쿼리:

데이터베이스에 성공적으로 연결되면 JavaScript를 사용하여 데이터베이스의 데이터를 쿼리하고 데이터 테이블에 표시할 수 있습니다. 다음은 데이터베이스를 쿼리하고 데이터를 표시하는 간단한 샘플 코드입니다.


rrreee🎜위의 예에서는 간단한 SELECT 문을 실행하여 데이터베이스의 모든 데이터를 가져와 ID가 데이터 테이블의 HTML 테이블. 🎜
🎜기타 작업: 🎜데이터 쿼리 외에도 JavaScript를 사용하여 데이터 삽입, 업데이트 또는 삭제와 같은 다른 데이터베이스 작업을 수행할 수도 있습니다. 다음은 데이터 삽입을 위한 샘플 코드입니다. 🎜🎜rrreee🎜위 코드는 데이터베이스의 my_table 테이블에 새로운 데이터 행을 삽입합니다. 🎜🎜요약: 🎜MySQL과 JavaScript를 사용하면 쉽게 동적 데이터 테이블을 생성하고 데이터베이스의 데이터를 표시하고 조작할 수 있습니다. 이 문서에서는 데이터베이스 연결, 데이터 쿼리 및 기타 작업 수행에 대한 구체적인 코드 예제를 제공합니다. 이 문서가 동적 데이터 테이블을 개발할 때 모든 사람에게 도움이 되기를 바랍니다. 🎜

위 내용은 MySQL과 JavaScript를 사용하여 동적 데이터 테이블을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!