如何从MySQL数据库获取全部URL列表（Next.js+Express实现）

一、服务器端（server/index.js）修正代码 #

原代码存在3个核心问题：仅返回SQL字符串未执行数据库查询、GET请求错误使用req.body、未处理数据库异步查询逻辑。以下是修正后的完整代码：

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const passport = require("passport");
const expressSession = require("express-session");
const cookieParser = require("cookie-parser");
const bcrypt = require("bcrypt");
const db = require("./db");

const app = express();

// 配置必要中间件（确保跨域、JSON解析正常）
app.use(cors({ origin: "http://localhost:3000", credentials: true }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(expressSession({ secret: "your-custom-secret-key", resave: false, saveUninitialized: false }));
app.use(passport.initialize());
app.use(passport.session());

// 修正后的/getUrls接口：执行数据库查询并返回结果
app.get("/getUrls", (req, res) => {
    const query = "SELECT * FROM db_indexer.urls";
    db.query(query, (err, results) => {
        if (err) {
            console.error("数据库查询失败:", err);
            return res.status(500).json({ error: "获取URL列表失败" });
        }
        // 直接返回查询到的URL数组
        res.json(results);
    });
});

// 启动服务器（端口与前端请求一致）
const PORT = 3001;
app.listen(PORT, () => {
    console.log(`服务器运行在端口 ${PORT}`);
});

二、前端（ProcessUrl.js）修正代码 #

原代码存在2个核心问题：错误解析服务器返回数据、使用未定义变量导致链接失效。以下是修正后的完整代码：

import axios from "axios";
import React, { useEffect, useState } from "react";

export default function ProcessUrl() {
    const [urls, setUrls] = useState([]);
    const [fetchError, setFetchError] = useState("");

    useEffect(() => {
        getUrls();
    }, []);

    const getUrls = () => {
        axios({
            method: "GET",
            withCredentials: true,
            url: "http://localhost:3001/getUrls",
        })
            .then((res) => {
                // 服务器返回的是URL数组，直接存入状态
                setUrls(res.data);
                setFetchError("");
            })
            .catch((err) => {
                console.error("请求URL列表失败:", err);
                setFetchError("无法加载URL列表，请稍后重试");
            });
    };

    return (
        <div>
            <section className="text-black body-font">
                <div className="container px-5 py-24 mx-auto">
                    {/* 显示错误提示 */}
                    {fetchError && <p className="text-red-500 text-center mb-4">{fetchError}</p>}
                    <div className="lg:w-2/3 w-full mx-auto overflow-auto">
                        <table className="table-auto w-full text-left whitespace-no-wrap">
                            <thead className="text-center">
                                <tr>
                                    <th className="px-20 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl">
                                        Status
                                    </th>
                                    <th className="w-full py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">
                                        Links
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                {/* 空数据提示 */}
                                {urls.length === 0 ? (
                                    <tr>
                                        <td colSpan={2} className="px-4 py-3 text-center">
                                            暂无URL数据
                                        </td>
                                    </tr>
                                ) : (
                                    urls.map((result, id) => (
                                        <tr className="results" key={id}>
                                            <td className="px-4 py-3 text-emerald-500 text-center">
                                                Success
                                            </td>
                                            <td className="px-4 py-3">
                                                {/* 使用result.url作为链接地址，添加noopener noreferrer安全属性 */}
                                                <a href={result.url} target="_blank" rel="noopener noreferrer">
                                                    {result.url}
                                                </a>
                                            </td>
                                        </tr>
                                    ))
                                )}
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
        </div>
    );
}

三、关键错误说明 #

你遇到的前端报错（如"无法读取undefined的属性'url'"或"无法对undefined执行map操作"），本质原因：

• 服务器端原代码未执行真实数据库查询，仅返回SQL字符串，前端无法拿到有效数据
• 前端错误预期服务器返回{ url: [...] }结构，但实际修正后服务器返回的是纯URL数组，导致res.data.url为undefined，进而引发状态异常
• 前端链接标签误用未定义的url变量，导致点击跳转失效

内容的提问来源于stack exchange，提问作者Damn Free