如何将Mongoose实现的API数据入库代码适配为React+Node+MySQL？

我原本用Mongoose写了一段代码，功能是从在线API获取数据并存入MongoDB。现在要适配到React+Node.js+MySQL技术栈，已经写了操作MySQL的初步代码，但不知道怎么把在线API的调用部分整合进去，求实现方案。

原Mongoose代码 #

import mongoose, { mongo } from 'mongoose';

mongoose.connect("mongodb://127.0.0.1:27017/highscore");

const postSchema = new mongoose.Schema({
    position: {
        type: Number,
        required: true
    },
    id: {
        type: Number,
        required: true
    },
    score: {
        type: Number,
        required: true
    },
});

const Post = mongoose.model('Players', postSchema);

async function getPosts() {
    const getPlayers = await fetch("http://localhost:3008/api/highscore/players");
    const response = await getPlayers.json();
    for( let i = 0;i < response.players.length; i++){
        const post = new Post({
            position: response.players[i]['position'],
            id: response.players[i]['id'],
            score: response.players[i]['score'],
        });
        post.save();
    }
}

现有Node.js+MySQL初步代码（缺失API整合） #

app.post('/create', (req, res) => {
    const position = req.body.position
    const name = req.body.name
    const alliance = req.body.alliance
    const points = req.body.points

    db.query("INSERT INTO stats (position, name, alliance, points) VALUES (?,?,?,?)",
        [position, name, alliance, points],
        (err, result) => {
            if (err) {
                console.log(err)
            } else {
                res.send("Values Inserted")
            }
        }
    );
});

1. 封装API数据获取函数 #

和原Mongoose逻辑一致，用async/await处理API请求。注意Node.js 18及以上自带fetch，低版本需安装node-fetch包并导入。

async function fetchPlayerData() {
    try {
        const response = await fetch("http://localhost:3008/api/highscore/players");
        if (!response.ok) {
            throw new Error(`API请求失败，状态码: ${response.status}`);
        }
        const data = await response.json();
        return data.players;
    } catch (err) {
        console.error("获取API数据出错:", err);
        throw err;
    }
}

2. 整合API调用与MySQL插入逻辑 #

将API调用整合到新的接口中，同时改用批量插入提升性能（避免循环单条插入）：

// 假设db是已配置好的MySQL连接实例
app.post('/sync-player-data', async (req, res) => {
    try {
        // 1. 从API拉取数据
        const players = await fetchPlayerData();
        
        if (!players || players.length === 0) {
            return res.status(200).send("没有需要同步的数据");
        }

        // 2. 整理批量插入的参数数组
        const insertValues = players.map(player => [
            player.position,
            player.name,
            player.alliance,
            player.points // 注意字段映射：原Mongoose的score对应MySQL的points
        ]);

        // 3. 执行批量插入
        const sql = "INSERT INTO stats (position, name, alliance, points) VALUES ?";
        db.query(sql, [insertValues], (err, result) => {
            if (err) {
                console.error("插入MySQL出错:", err);
                return res.status(500).send("数据同步失败");
            }
            res.send(`成功同步 ${result.affectedRows} 条数据`);
        });
    } catch (err) {
        console.error("同步流程出错:", err);
        res.status(500).send("数据同步失败");
    }
});

3. 前端触发同步（React部分） #

在React组件中通过按钮点击触发后端同步接口：

import React from 'react';

const SyncPlayerData = () => {
    const handleSync = async () => {
        try {
            const response = await fetch('/sync-player-data', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
            });
            const message = await response.text();
            alert(message);
        } catch (err) {
            alert("同步失败，请检查后端服务");
        }
    };

    return (
        <button onClick={handleSync}>同步玩家数据</button>
    );
};

export default SyncPlayerData;

关键注意点 #

• 字段映射：确保API返回字段和MySQL表字段一一对应，若名称不一致需手动转换。
• 错误处理：添加多层错误捕获，避免单个环节崩溃导致整个流程异常，同时返回明确的状态信息。
• 性能优化：批量插入相比循环单条插入，在数据量较大时能大幅提升效率。

内容的提问来源于stack exchange，提问作者yandry santana