react如何请求MySQL中数据
使用React请求MySQL数据的方法
React本身是一个前端框架，不能直接连接MySQL数据库。需要通过后端API作为桥梁。以下是几种常见方法：
创建后端API服务
使用Node.js + Express创建RESTful API：
// server.js (Node.js后端)
const express = require('express');
const mysql = require('mysql');
const app = express();
const db = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'test_db'
});
app.get('/api/data', (req, res) => {
db.query('SELECT * FROM your_table', (err, results) => {
if(err) throw err;
res.json(results);
});
});
app.listen(3001, () => console.log('Server running on port 3001'));在React中调用API
使用fetch或axios请求后端API：
// React组件示例
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function DataComponent() {
const [data, setData] = useState([]);
useEffect(() => {
axios.get('http://localhost:3001/api/data')
.then(response => setData(response.data))
.catch(error => console.error(error));
}, []);
return (
<div>
{data.map(item => (
<div key={item.id}>{item.name}</div>
))}
</div>
);
}使用ORM简化操作
后端可以使用Sequelize等ORM工具：
// 使用Sequelize示例
const { Sequelize, DataTypes } = require('sequelize');
const sequelize = new Sequelize('database', 'username', 'password', {
host: 'localhost',
dialect: 'mysql'
});
const User = sequelize.define('User', {
name: DataTypes.STRING,
email: DataTypes.STRING
});
app.get('/api/users', async (req, res) => {
const users = await User.findAll();
res.json(users);
});安全注意事项
- 永远不要在前端直接存储数据库凭证
- API接口应实施身份验证（如JWT）
- 使用环境变量存储敏感信息
- 对用户输入进行严格验证和参数化查询
替代方案
对于简单项目，可以考虑：
- 使用Firebase等BaaS服务
- 采用GraphQL替代REST API
- 使用Prisma等现代数据库工具
以上方法都需要前后端分离的架构，React只负责展示数据，所有数据库操作通过后端API完成。
