React 创建项目并连接 MySQL 后台的实战教程
一、项目概述
本篇博客将介绍如何使用 React 搭建前端项目，并通过 Node.js 和 MySQL 实现简单的后台数据连接。通过这个项目，你将掌握从前端到后端数据库的基础开发流程，适合初学者或正在项目实战中的开发者。
二、项目准备
1. 环境搭建
- Node.js：确保已经安装 Node.js，可以通过命令
node -v检查。 - npm 或 yarn：用于管理项目的依赖包。
- MySQL：作为数据库管理工具。
- VSCode：代码编辑工具，安装必要的插件如 ESLint、Prettier 等。
2. 初始化 React 项目
使用 create-react-app 快速创建一个 React 项目：
npx create-react-app my-react-project
cd my-react-project
项目初始化完成后，可以使用以下命令启动开发服务器：
npm start
现在你可以在浏览器中访问 http://localhost:3000，查看 React 应用是否运行成功。
三、项目搭建 - 实战步骤
注：工具篇：（三）MacOS 两种方式下载 Node.js 并进行测试教程
注：工具篇：（一）MacOS 下使用 Navicat 管理 MySQL 数据库：详细图文教程与常见问题解决
注：工具篇：（二）MacOS 下载 MySQL 并进行配置连接，使用 VSCode 创建 Node 项目-亲测有效
注：工具篇：（五）MacOS使用Postman 测试接口：从 创建MySQL数据库到 Node 项目
1. 创建后端（Node + Express）
初始化 Node 项目
首先在项目根目录下创建一个新的文件夹用于后端代码：
mkdir my-react-node
cd my-react-node
npm init -y
然后安装必要的依赖包：
npm install express mysql2 dotenv
创建 Express 服务器
在 server 文件夹中创建 index.js 文件，配置一个简单的 Express 服务器：
const express = require('express');
const app = express();
const mysql = require('mysql2');
require('dotenv').config();
const db = mysql.createConnection({
host: process.env.DB_HOST,
user: process.env.DB_USER,
password: process.env.DB_PASSWORD,
database: process.env.DB_NAME
});
db.connect((err) => {
if (err) throw err;
console.log('Connected to MySQL database');
});
app.use(express.json());
app.get('/api/users', (req, res) => {
db.query('SELECT * FROM users', (err, result) => {
if (err) throw err;
res.json(result);
});
});
app.listen(5000, () => {
console.log('Server is running on port 5000');
});
配置 .env 文件
在 server 文件夹中创建 .env 文件，添加数据库配置信息：
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=yourpassword
DB_NAME=mydatabase
数据库表设计
使用 Navicat 或 MySQL 命令行创建一个 users 表：
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(255) NOT NULL,
email VARCHAR(255) NOT NULL
);
四、React 前端与 Node 后端的连接
1. 安装 Axios
在前端项目中使用 axios 进行 API 请求：
npm install axios
2. 创建 API 请求
在 React 项目中创建一个简单的组件用于显示用户数据：
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const Users = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
axios.get('http://localhost:5000/api/users')
.then(response => {
setUsers(response.data);
})
.catch(error => {
console.error('There was an error fetching the users!', error);
});
}, []);
return (
<div>
<h1>Users List</h1>
<ul>
{users.map(user => (
<li key={user.id}>{user.name} - {user.email}</li>
))}
</ul>
</div>
);
}
export default Users;
3. 跨域配置
为了让 React 前端能够访问 Node 后端 API，需要在服务器端添加 CORS 中间件：
npm install cors
在 index.js 中添加以下代码：
const cors = require('cors');
app.use(cors());
五、总结
通过本篇博客的实战步骤，成功搭建了一个 React 前端项目，并使用 Node.js 和 MySQL 作为后端服务。这种全栈开发的模式适合中小型项目开发，同时也为学习前后端分离架构打下坚实的基础。后续可以考虑增加更多功能，如用户注册、登录等。
你可以根据需求进一步扩展和定制项目。希望这篇教程对你有所帮助！