GET http://127.0.0.1:5500/dataFood 404（未找到）尝试将我的sql数据打印到我的html中

Question

我的问题是我尝试连接到 mysql 并使用express.js 服务器，问题是 GET http://127.0.0.1:5500/dataFood 404 (Not Found) 。我有 2 个代码，客户端和服务器端都会在这里打印所有内容，看看问题是什么。

**服务器端 JavaScript 代码： **

const mysql = require('mysql');
const express = require('express');
const app = express();

// MySQL database connection configuration
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'rootuser',
    database: 'foodDatabase',
    port: 3306
});

// Connect to the MySQL database
connection.connect((err) => {
    if (err) {
        console.error('Error connecting to MySQL database:', err.stack);
        return;
    }
    console.log('Connected to MySQL database as ID ' + connection.threadId);
});

// Serve static files (HTML, CSS, JavaScript)
app.use(express.static('public'));


// Route to fetch data from the database
app.get('/dataFood', (req, res) => {
    // Perform a query to fetch data
    connection.query('SELECT * FROM meals', (error, results, fields) => {
        if (error) {
            console.error('Error executing query:', error);
            return res.status(500).send('Error fetching data from database');
        }

        // Send the fetched data as JSON response
        res.json(results);
    });
});

// Start the server
const port = 3000;
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

**JavaScript 中的客户端代码： **

fetch('/dataFood')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log('Data received from server:', data);

        // Create a container for the data
        const dataContainer = document.getElementById('dataContainer');

        // Iterate over the data and create an element for each item
        data.forEach(item => {
            // Create a new div element for the item
            const itemDiv = document.createElement('div');
            itemDiv.className = 'item';

            // Create a new h2 element for the item name
            const itemName = document.createElement('h2');
            itemName.textContent = item.name; // Assuming 'name' is a property of the item

            // Create a new p element for the item description
            const itemDescription = document.createElement('p');
            itemDescription.textContent = item.description; // Assuming 'description' is a property    of the item

            // Append the item name and description to the item div
            itemDiv.appendChild(itemName);
            itemDiv.appendChild(itemDescription);

            // Append the item div to the data container
            dataContainer.appendChild(itemDiv);
        });
    })
    .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
    });

**这是html代码： **

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Data Page</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Data from MySQL Database</h1>
  <div id="dataContainer" class="data-container"></div> <!-- Container for data -->
  <script src="script.js"></script> <!-- Include your JavaScript file -->
</body>

</html>

这是我得到的输出：

这是我的 github：https://github.com/SulimanGR/Async

随时查看我的代码以进行进一步的代码检查。

Answer 1

呃，快速扫描一下，404 表示该页面不存在。作为程序员很容易忽视错误，但我强烈建议您查看错误。

找不到页面意味着当客户端请求资源时该资源不存在。您的路线似乎正确，但网址中的端口不正确。您在端口 5500 上询问，但在您的代码中您有端口 = 3000。

GET http://127.0.0.1:5500/dataFood 404（未找到）尝试将我的sql数据打印到我的html中

问题描述投票：0回答：1

1个回答

最新问题

GET http://127.0.0.1:5500/dataFood 404（未找到）尝试将我的sql数据打印到我的html中

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1