react项目如何连接数据库
连接数据库的常见方法
在React项目中，前端通常不直接连接数据库，而是通过后端API间接操作数据库。以下是几种常见的实现方式：
使用Node.js后端
创建Express或Koa服务器作为中间层，通过RESTful API或GraphQL与数据库交互。前端通过axios或fetch调用这些API。
// Express示例
const express = require('express');
const mongoose = require('mongoose');
const app = express();
mongoose.connect('mongodb://localhost:27017/mydb');
app.get('/api/data', async (req, res) => {
const data = await DataModel.find();
res.json(data);
});使用Firebase
Firebase提供实时数据库和Firestore，可以直接在前端通过SDK连接：
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = { /* 配置对象 */ };
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);使用Supabase
Supabase提供PostgreSQL数据库的客户端访问：
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(
'https://your-project.supabase.co',
'your-anon-key'
)
const { data, error } = await supabase
.from('table_name')
.select('*');安全注意事项
直接在前端连接数据库会暴露凭据，应始终通过后端服务进行数据库操作。前端代码中不应包含数据库连接字符串或管理员凭据。
全栈框架方案
Next.js API路由
在pages/api目录下创建API端点：
// pages/api/data.js
import { connectToDatabase } from '../../lib/mongodb';
export default async function handler(req, res) {
const { db } = await connectToDatabase();
const data = await db.collection("data").find({}).toArray();
res.status(200).json(data);
}Prisma ORM
配合后端框架使用Prisma进行数据库操作：
// schema.prisma
model User {
id Int @id @default(autoincrement())
name String
email String @unique
}
// 服务端使用
const users = await prisma.user.findMany();开发环境配置
安装必要的数据库驱动：
# MongoDB
npm install mongodb mongoose
# PostgreSQL
npm install pg
# MySQL
npm install mysql2配置环境变量文件(.env)存储数据库连接信息，确保不提交到版本控制。
