当前位置：首页 > React

react 如何保存数据库

2026-03-11 11:02:59React

使用 React 保存数据到数据库

React 本身是一个前端框架，无法直接操作数据库。需要通过后端服务（如 Node.js、Python、Java 等）与数据库交互。以下是常见的实现方法：

通过 API 调用后端服务

创建一个后端 API 接口（如 RESTful 或 GraphQL），React 通过 HTTP 请求（如 fetch 或 axios）将数据发送到后端，后端再存入数据库。

// React 组件中发送数据示例
import axios from 'axios';

const saveData = async (data) => {
  try {
    const response = await axios.post('http://your-backend-api.com/data', data);
    console.log('Data saved:', response.data);
  } catch (error) {
    console.error('Error saving data:', error);
  }
};

使用 Firebase 实时数据库

对于无需自建后端的场景，可以直接使用 Firebase 的实时数据库服务。

import { initializeApp } from 'firebase/app';
import { getDatabase, ref, set } from 'firebase/database';

const firebaseConfig = {
  // 你的 Firebase 配置
};

const app = initializeApp(firebaseConfig);
const db = getDatabase();

function writeUserData(userId, data) {
  set(ref(db, 'users/' + userId), data);
}

使用 Express.js 作为后端

搭配 Node.js 和 Express.js 创建简单的后端服务接收 React 数据并存入数据库（以 MongoDB 为例）。

// 后端 Express 代码示例
const express = require('express');
const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/mydatabase');

const DataSchema = new mongoose.Schema({
  content: String
});
const Data = mongoose.model('Data', DataSchema);

const app = express();
app.use(express.json());

app.post('/api/data', async (req, res) => {
  const newData = new Data({ content: req.body.data });
  await newData.save();
  res.status(201).send('Data saved');
});

app.listen(3000);

使用 Next.js API 路由

如果使用 Next.js 框架，可以直接在项目中创建 API 路由处理数据库操作。

react 如何保存数据库

// pages/api/saveData.js
import { connectToDatabase } from '../../lib/mongodb';

export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { db } = await connectToDatabase();
    const result = await db.collection('data').insertOne(req.body);
    res.status(201).json(result);
  }
}