正文

如何用JavaScript编写代码实现按钮点击后读取数据库内容

/0 浏览量
0420

在Web开发中，实现按钮点击后读取数据库内容是一个常见的需求。以下是一个简单的示例，展示如何使用JavaScript和Node.js环境结合MySQL数据库来实现这一功能。

环境准备

  1. Node.js: 确保你的计算机上安装了Node.js环境。
  2. MySQL: 安装MySQL数据库，并创建一个数据库和一个表。
  3. npm: 如果你还没有安装npm，请先安装它。

步骤一：初始化项目

  1. 在你的项目目录下，运行以下命令创建一个新的Node.js项目：
npm init -y
  1. 安装必要的包：
npm install express mysql body-parser

这里我们使用了express来创建Web服务器，mysql用于连接和操作MySQL数据库，body-parser用于解析HTTP请求体。

步骤二：创建数据库和表

  1. 打开MySQL命令行工具，创建一个新的数据库：
CREATE DATABASE mydatabase;
  1. 使用新创建的数据库，并创建一个表：
USE mydatabase;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    email VARCHAR(100) NOT NULL
);
  1. 插入一些数据：
INSERT INTO users (username, email) VALUES ('Alice', 'alice@example.com');
INSERT INTO users (username, email) VALUES ('Bob', 'bob@example.com');

步骤三：编写代码

  1. 在项目根目录下创建一个名为app.js的文件，并添加以下代码：
const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');

const app = express();
const port = 3000;

// 配置MySQL连接
const db = mysql.createConnection({
    host: 'localhost',
    user: 'your_username',
    password: 'your_password',
    database: 'mydatabase'
});

db.connect((err) => {
    if (err) {
        return console.error('Error connecting to the database: ' + err.stack);
    }
    console.log('Connected to the database as id ' + db.threadId);
});

// 配置body-parser中间件
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// 设置静态文件目录
app.use(express.static('public'));

// 查询数据库的API
app.get('/users', (req, res) => {
    const sql = 'SELECT * FROM users';
    db.query(sql, (err, results) => {
        if (err) {
            return res.status(500).send('Error querying the database');
        }
        res.json(results);
    });
});

// 启动服务器
app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

  1. 替换your_username和your_password为你的MySQL用户名和密码。

  2. 在项目根目录下创建一个名为public的文件夹，并在该文件夹下创建一个名为index.html的文件，添加以下HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Database Example</title>
</head>
<body>
    <h1>Users</h1>
    <button id="loadUsers">Load Users</button>
    <ul id="usersList"></ul>

    <script>
        document.getElementById('loadUsers').addEventListener('click', () => {
            fetch('/users')
                .then(response => response.json())
                .then(data => {
                    const usersList = document.getElementById('usersList');
                    usersList.innerHTML = '';
                    data.forEach(user => {
                        const li = document.createElement('li');
                        li.textContent = `${user.username} (${user.email})`;
                        usersList.appendChild(li);
                    });
                })
                .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

步骤四：运行项目

  1. 在终端中运行以下命令启动服务器：
node app.js

  1. 打开浏览器，访问http://localhost:3000。

  2. 点击“Load Users”按钮，你应该能看到数据库中存储的用户列表。

这样，你就成功使用JavaScript编写了一个简单的代码示例，实现了按钮点击后读取数据库内容的功能。希望这个示例能帮助你更好地理解相关技术。

-- 展开阅读全文 --