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 项目:
bash
npx create-react-app my-react-project
cd my-react-project
项目初始化完成后,可以使用以下命令启动开发服务器:
bash
npm start
现在你可以在浏览器中访问 http://localhost:3000
,查看 React 应用是否运行成功。
三、项目搭建 - 实战步骤
注:工具篇:(三)MacOS 两种方式下载 Node.js 并进行测试教程
注:工具篇:(一)MacOS 下使用 Navicat 管理 MySQL 数据库:详细图文教程与常见问题解决
注:工具篇:(二)MacOS 下载 MySQL 并进行配置连接,使用 VSCode 创建 Node 项目-亲测有效
注:工具篇:(五)MacOS使用Postman 测试接口:从 创建MySQL数据库到 Node 项目
1. 创建后端(Node + Express)
初始化 Node 项目
首先在项目根目录下创建一个新的文件夹用于后端代码:
bash
mkdir my-react-node
cd my-react-node
npm init -y
然后安装必要的依赖包:
bash
npm install express mysql2 dotenv
创建 Express 服务器
在 server
文件夹中创建 index.js
文件,配置一个简单的 Express 服务器:
javascript
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
文件,添加数据库配置信息:
bash
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=yourpassword
DB_NAME=mydatabase
数据库表设计
使用 Navicat 或 MySQL 命令行创建一个 users
表:
sql
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 请求:
bash
npm install axios
2. 创建 API 请求
在 React 项目中创建一个简单的组件用于显示用户数据:
javascript
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 中间件:
bash
npm install cors
在 index.js
中添加以下代码:
javascript
const cors = require('cors');
app.use(cors());
五、总结
通过本篇博客的实战步骤,成功搭建了一个 React 前端项目,并使用 Node.js 和 MySQL 作为后端服务。这种全栈开发的模式适合中小型项目开发,同时也为学习前后端分离架构打下坚实的基础。后续可以考虑增加更多功能,如用户注册、登录等。
你可以根据需求进一步扩展和定制项目。希望这篇教程对你有所帮助!